如何使用jquery/javascript计算和显示表单中键入的字符数
how to count and display numbers of characters typed in a form using jquery/javascript.?
我正试图建立一个计算其中键入的字符总数的表单。我的表单包含姓名、地址和客户的基本信息等字段。我想要得到所有字段中键入的字符总数。我该怎么做?'
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>
Years In job::<input type="text" name="years_job">
Postion/Type of Business:: <input type="text" name="pos_type"> 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>
Years In job::<input type="text" name="years"> <br>
Postion/Type of Business:: <input type="text" name="type" > 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>
Years In job::<input type="text" name="years" > Position/Type of job::<input type="text" name="positions" ><br>
Date(frm-to):: <input type="text" name="date" > 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>
Years In job::<input type="text" name="years"> Position/Type of job::<input type="text" name="positions"><br>
Date(frm-to):: <input type="text" name="date"> 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>
Years In job::<input type="text" name="years"> Position/Type of job::<input type="text" name="positions"><br>
Date(frm-to):: <input type="text" name="date"> 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>
Years In job::<input type="text" name="years"> Position/Type of job::<input type="text" name="positions"><br>
Date(frm-to):: <input type="text" name="date"> 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>
<input type="submit" name="submit" value="SUBMIT" onclick="return validateform();">
</body>
</html>
只需遍历包含输入文本的所有表单字段并计算其长度:
$('#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/
相关文章：
- 禁用带有字符白名单的表单提交
- 如何禁止在纯JavaScript形式输入的表单中输入特定字符
- 如何在输入文本字段中输入10个字符时自动提交表单
- 如何处理多种语言的表单验证(特殊字符）:AngularJS
- 如果输入字段不是 40 个字符，则隐藏付款表单PayPal提交按钮
- 如何以基于字符的编码发布二进制 html 多部分表单数据
- 在使用 JavaScript 验证表单时检查特殊字符 (， ; .）
- 获取仅输入 11 个字符的表单元素
- 提交包含特殊字符的值的表单
- 除非文本字段超过 2 个字符，否则不要提交表单
- 表单输入的字符计数器 - 不计数
- 输入表单中不允许有空白字符/空格
- 在表单输入中启用特殊字符
- 通过 JS 解析 URL 参数，但仅将前八个字符作为值添加到 HTML 表单中
- 输入表单中的禁止字符
- Django表单中的非ASCII字符发出警告
- Javascript文件中的非法字符导致表单无法使用Jquery
- 表单验证(最少字符）
- 如何使用jquery在表单文本字段中只允许使用阿拉伯字符
- 如何在HTML表单中抑制或转换诸如智能引号之类的字符
