Javascript 使用 jQuery 遍历表单中的所有文本框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10322891/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Loop through all text boxes in a form using jQuery
提问by Tom
I have a form which is laid out like a spreadsheet.
我有一个像电子表格一样布局的表格。
I want to validate the text in each textbox and if it's not numeric, change the background of the textbox and display a message.
我想验证每个文本框中的文本，如果它不是数字，则更改文本框的背景并显示一条消息。
I can do everything except for the looping part.
除了循环部分，我可以做任何事情。
I'm guessing it's a for...each statement?
我猜这是一个 for...each 语句？
回答by gdoron is supporting Monica
$('form input[type="text"]').each(function(){
// Do your magic here
if (this.value.match(/\D/)) // regular expression for numbers only.
Error();
});
If you got the form id:
如果您有表单 ID：
$('#formId input[type="text"]').each(function(){
// Do your magic here
});
回答by Brad Christie
// locate all ":input" elements within a generic <form>,
// then use .each() to loop through all results
$('form :input').each(function(){
var $el = $(this); // element we're testing
// attempt to cast the form's value to a number
var n = parseFloat($el.val());
// check if the conversion passed
if (isNaN(n)){
// $el does not have a number in it
}
});
I think is what you're after. You can also specify input[type="text"]if you want to be more specific to <input type="text" ... />
我认为这就是你所追求的。您还可以指定input[type="text"]是否要更具体地<input type="text" ... />
Or, more concisely:
或者，更简洁地说：
$('form input[type="text"]').each(function(i,e){
if (isNaN(parseFloat(e.value,10))){
$(e).css('backgroundColor','red');
}
});
回答by Jonathan Payne
jsFiddle( http://jsfiddle.net/BctQP/18/)
jsFiddle( http://jsfiddle.net/BctQP/18/)
<form id="theForm">
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="text"/>
<input type="button" onclick="validateTextBoxes();" value="Click"/>
</form>
<script>
function validateTextBoxes()
{
$("#theForm input").each( function()
{
if ( $(this).is('[type=text]') && !parseInt( $(this).val() ) )
{
$(this).css("background-color","red");
}
});
}
</script>?
回答by Kay
For each loop:
对于每个循环：
for (var $input in $('input[type="text"]')) {
//code here
}
回答by CARRION RAYMI KAPAK
Got this working for me! :) references
这对我有用！：） 参考
Loop through all text boxes in a form using jQuery& https://stackoverflow.com/a/311589
使用 jQuery和 https://stackoverflow.com/a/311589遍历表单中的所有文本框
$(document).ready(function() {
$('form button[type=submit]').click(function() {
// attach the listener to your button
debugger;
var sub_form = $(this.form);
// use the native JS object with "this"
$(':input[class="required"]', sub_form).each(function() {
if (this.value == "") {
alert("is empty");
} else {
alert(this.value);
}
});
});
});body {
margin: 5px;
padding: 5px;
border: 1px solid black;
}
#topContainer {
width: auto;
margin: 2px;
padding: 2px;
border: 1px solid black;
height: 100px;
}
#mainContainer {
width: auto;
height: 200px;
margin: 2px;
padding: 2px;
border: 1px solid black;
}
#footerContainer {
width: auto;
height: 200px;
margin: 2px;
padding: 2px;
border: 1px solid black;
}
.gridRow4 {
margin: 2px 5px;
width: 25%;
}
.gridRow5 {
margin: 2px 5px;
width: ;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="topContainer">
<h2>text goes here
</h2>
</div>
<div id="mainContainer">
<form id="form1">
<select id="input1" class="required" name="input1">
<option value="volvo">Volvo
</option>
<option value="saab">Saab
</option>
<option value="mercedes">Mercedes
</option>
<option value="audi">Audi
</option>
</select>
<select id="input2" class="required" name="input2">
<option value="Alpha">Alpha
</option>
<option value="Beta">Beta
</option>
<option value="Gamma">Gamma
</option>
<option value="Radial">Radial
</option>
</select>
<select id="input3" class="required" name="input3">
<option value="">
</option>
<option value="up">up
</option>
<option value="down">down
</option>
<option value="left">left
</option>
</select>
<input id="input4" class="required" type="text" name="input4" />
<input id="input5" class="required" type="text" name="input5" />
<select id="input6" class="required" name="input6">
<option value="1">1
</option>
<option value="2">2
</option>
<option value="3">3
</option>
<option value="4">4
</option>
</select>
<select id="input7" class="required" name="input7">
<option value="happy">happy
</option>
<option value="sad">sad
</option>
<option value="round">round
</option>
<option value="flat">flat
</option>
</select>
<button id="btn1" name="btn1" type="submit">Submit
</button>
</form>
</div>
<div id="footerContainer">
<form id="form2">
<input id="inputa" class="required" name="inputa">
<input id="inputb" class="required" name="inputb">
<input id="inputc" class="required" name="inputc">
<input id="inputd" class="required" name="inputd">
<input id="inpute" class="required" name="inpute">
<input id="inputf" class="required" name="inputf">
<input id="inputg" class="required" name="inputg">
<button id="btn2" name="btn2" type="submit">Submit
</button>
</form>
</div>
</body>