Блог

Главная - Вопросы по программированию - как подсчитать и отобразить количество символов, введенных в форме с помощью jquery / javascript.?

как подсчитать и отобразить количество символов, введенных в форме с помощью jquery / javascript.?

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь создать форму, которая подсчитывает общее количество введенных в нее символов.Моя форма содержит такие поля, как имя, адрес и основную информацию о клиенте.Я хочу получить общее количество символов, введенных во всех этих полях.почему я должен это делать.?`

HTML-КОДЫ

//

 <form name="form_3" id="form_3" method="post" action="action_form_2.php">
    <table border="1" width="1300" height="200" bordercolour="BLUE" >

            <tr>
            <td>Name and Address of Company:: <textarea name="name_address1" cols="30" rows="6" ></textarea><br>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
                Years In job::<input type="text" name="years_job">amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
                amp;nbsp;amp;nbsp;amp;nbsp;Postion/Type of Business::amp;nbsp;amp;nbsp;<input type="text" name="pos_type">amp;nbsp;amp;nbsp;Years Employed in this profession::<input type="text" name="years_employed" id="years_emp">
                Business Phone::<input type="text" name="phone_no" id="phone_no" >
                <input type="checkbox" name="self_employed" id="self_employed" value="self">Self Employed<br>
            </td>

           <td>Name and Address of Company:: <textarea name="name_address2" cols="30" rows="6" ></textarea><br>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
                Years In job::<input type="text" name="years">amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; <br>
               amp;nbsp; Postion/Type of Business::amp;nbsp;amp;nbsp;<input type="text" name="type" >amp;nbsp;amp;nbsp;Years Employed in this profession::<input type="text" name="years_emp">
                 Business Phone::<input type="text" name="phone" id="phone"   >
                <input type="checkbox" name="self_employed" id="self_employed" value="self">Self Employed<br>
            </td>

            </tr>

             </table>
              <h4>iv.EMPLOYMENT INFORMATION</h4> 
           <table border="1" width="1300" height="200">
            <tr>
            <td>Name and Address of Company:: <textarea name="name_address3" cols="30" rows="6" ></textarea><br>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
                Years In job::<input type="text" name="years" >amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; Position/Type of job::<input type="text" name="positions" ><br>
                amp;nbsp;amp;nbsp;amp;nbsp;Date(frm-to)::amp;nbsp;amp;nbsp;<input type="text" name="date" >amp;nbsp;amp;nbsp;Monthly Income::<input type="text" name="date" >
                  Business Phone,inc area code::<input type="text" name="phone" >
                <input type="checkbox" name="self_employed" id="self_employed" value="self"  >Self Employed<br>
            </td>
            <td>Name and Address of Company:: <textarea name="name_address4" cols="30" rows="6" ></textarea><br>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
                Years In job::<input type="text" name="years">amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; Position/Type of job::<input type="text" name="positions"><br>
                amp;nbsp;amp;nbsp;amp;nbsp;Date(frm-to)::amp;nbsp;amp;nbsp;<input type="text" name="date">amp;nbsp;amp;nbsp;Monthly Income::<input type="text" name="date">
                  Business Phone,inc area code::<input type="text" name="phone" >
                <input type="checkbox" name="self_employed" id="self_employed" value="self">Self Employed<br>
            </td>

            </tr>

            <tr>
              <td>Name and Address of Company:: <textarea name="name_address5" cols="30" rows="6" ></textarea><br>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
                Years In job::<input type="text" name="years">amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; Position/Type of job::<input type="text" name="positions"><br>
                amp;nbsp;amp;nbsp;amp;nbsp;Date(frm-to)::amp;nbsp;amp;nbsp;<input type="text" name="date">amp;nbsp;amp;nbsp;Monthly Income::<input type="text" name="date">
                  Business Phone,inc area code::<input type="text" name="phone">
                <input type="checkbox" name="self_employed" id="self_employed" value="self">Self Employed<br>
            </td>
             <td>Name and Address of Company:: <textarea name="name_address" cols="30" rows="6" ></textarea><br>amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;
                Years In job::<input type="text" name="years">amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp; Position/Type of job::<input type="text" name="positions"><br>
                amp;nbsp;amp;nbsp;amp;nbsp;Date(frm-to)::amp;nbsp;amp;nbsp;<input type="text" name="date">amp;nbsp;amp;nbsp;Monthly Income::<input type="text" name="date">
                  Business Phone,inc area code::<input type="text" name="phone">
                <input type="checkbox" name="self_employed" id="self_employed" value="self">Self Employed<br>
            </td>

            </tr>

             </table>  
        <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>
      amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;amp;nbsp;        <input type="submit" name="submit" value="SUBMIT" onclick="return validateform();">


    </body>
</html>

Комментарии:

1. Пожалуйста, не возражайте против публикации вашего HTML и кода, который вы пробовали.

2. @satpal.понятия не имею, как это сделать…

3. @saji, SO — это не место для основ, попробуйте хотя бы что-нибудь. они приходят сюда с вашим кодом

4. @satpal .. добавил мой html к вопросу.? На самом деле я ищу работу над программным обеспечением bpo, если я хочу получить общее количество символов, введенных за определенное время.

Ответ №1:

Просто выполните итерацию по всем полям формы, которые содержат введенный текст, и подсчитайте их длину:

 $('#yourform').on('submit', function(){
  var count = 0;
  $('input[type="text"], textarea', this).each(function(){
    count  = $(this).val().length;
  });
  // your total is in count variable
  return false; // or true to submit form
});

Я поместил это в jsFiddle с вашим HTML: http://jsfiddle.net/MUs7s /