Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
251 views
in Technique[技术] by (71.8m points)

javascript - Setting up a counter in jquery

I have a form which includes basic client details and information.have used jquery to count total numbers of characters in the form and now I am trying to implement counter to see the total time taken to fill the form ,my codes are as follows

   <html>
        <title>  Employment Information
        </title>

      <style>
    table, td, th {
        border: 3px solid black;
    }

    td {
        padding: 15px;
    }
    </style>
    <script src="javascript/jquery-1.11.0.js"></script> 

 // codes for getting total number of charatecs typed //

    <script>
                    $('#form_3').on('submit', function(){
                         var count = 0;
                         $('input[type="text"], textarea', this).each(function(){
                         count += $(this).val().length;
                            });
                           alert("No of Characters Typed:" +count);
                           return true; // or true to submit form
                        });   
    </script>


        <body>
            <h4>MONTHLY INCOME AND COMBINED HOUSING EXPENSE INFORMATION</h4>


                <table border="1"  width="1300" height="150">
                  <tr>
                    <td>Gross monthly income</td>
                    <td>Borrower</td>
                    <td>Co-borrower</td>
                    <td>Total</td>
                    <td>Combined Monthly Housing Exp.</td>
                    <td>Present</td>
                    <td>Proposed</td>
                </tr>
                 <tr>
                 <td>Base EMPL income<</td>
                 <td>$::<input type="text" name="empl_income" id="empl_income"></td>
                 <td>$::<input type="text" name="co_borrower" ></td>
                 <td>$::<input type="text" name="base_empl_total"></td>
                    <td>Rent</td>
                    <td>$::<input type="text" name=""></td>
                     <td>$::<input type="text" name="years"></td>
                 </tr>
                   <tr>
                 <td>Overtime</td>
                 <td>$::<input type="text" name="overtime_borrower"></td>
                 <td>$::<input type="text" name="overtime_coborrower"></td>
                  <td>$::<input type="text" name="overtime_total"></td>
                 <td>Mortgaged</td>
                 <td>$::<input type="text" name="years"></td>
                  <td>$::<input type="text" name="years"></td>
                 </tr>
                 </table>

           <br>
           <br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;        <input type="submit" name="submit" value="SUBMIT" onclick="return validateform();">
           </form> 

        </body>
    </html>

How can I implement a time counter along with the character count codes.?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Slightly improved @danfromgermany's answer:

var timeStart;
var timeStop;

$("input").keyup(function () {

    if (!timeStart) {
        timeStart = new Date();
    }
});

$('#form_3').on('submit', function () {
    timeStop = Math.round((new Date().getTime() - timeStart.getTime()) / 1000);
    console.debug('time taken from load till submit: ' + timeStop);
});

Here timer starts when any input is edited first time


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...