使用jQuery循環遍歷表單中的所有文本框
[英]Loop through all text boxes in a form using jQuery
問題描述
我有一個像電子表格一樣的表格。
我想驗證每個文本框中的文本，如果它不是數字，請更改文本框的背景並顯示消息。
除了循環部分，我可以做任何事情。
我猜這是......每個聲明？
5 個解決方案
解決方案1
15 已采納 2012-04-25 20:03:24
$('form input[type="text"]').each(function(){
// Do your magic here
if (this.value.match(/\D/)) // regular expression for numbers only.
Error();
});
如果您有表單ID：
$('#formId input[type="text"]').each(function(){
// Do your magic here
});
解決方案2
5 2012-04-25 20:04:21
// 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
}
});
我想你正在追求的是什么。 如果你想更具體地對<input type="text" ... />你也可以指定input[type="text"]
或者， 更簡潔 ：
$('form input[type="text"]').each(function(i,e){
if (isNaN(parseFloat(e.value,10))){
$(e).css('backgroundColor','red');
}
});
解決方案3
2 2012-04-25 20:12:20
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>
解決方案4
1 2012-04-25 20:04:10
對於每個循環：
for (var $input in $('input[type="text"]')) {
//code here
}
解決方案5
0 2016-11-30 14:33:11
這對我有用！ :)參考
使用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>
使用jQuery，如果單擊一個表單，如何清除表單上的所有文本框？
[英]Using jquery how can I clear all the text boxes on a form if I click in one?
如何遍歷頁面源中的所有文本框元素並查找所有這些文本框的名稱？
[英]How to loop through all text box elements in a page source and find the names of all those text boxes?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.