有没有办法填充某种形式的所有输入? 比方说,有些事情是这样的:
<form id="unique00">
<input type="text" name="whatever" id="whatever" value="whatever" />
<div>
<input type="checkbox" name="whatever" id="whatever" value="whatever" />
</div>
<table><tr><td>
<input type="hidden" name="whatever" id="whatever" value="whatever" />
<input type="submit" value="qweqsac" />
</td></tr></table>
</form>
<form id="unique01">
<div>
<input type="text" name="whatever" id="whatever" value="whatever" />
<input type="checkbox" name="whatever" id="whatever" value="whatever" />
</div>
<table><tr><td>
<input type="hidden" name="whatever" id="whatever" value="whatever" />
</td></tr></table>
<select>blah...</select>
<input type="submit" value="qweqsac" />
</form>
etc forms... forms...
*注意:每个表单可能有不同的输入和类型,也有不同的html结构
那么有没有办法填充某个表单ID的输入?例如,如果我单击某个表单ID的提交按钮,那么jquery将为我填充那些表单id中的所有输入。 目前我正在做的是这样的:
$("form").submit(function(){ return validateForm($(this)) });
function validateForm(form){
var retVal = true;
var re;
$.each(form.serializeArray(), function(i, field) {
var input = $('input[name='+field.name+']');
field.value = $.trim(field.value);
switch(field.name){
case "name" :
and another cases...
}
})
}
那是工作,
但在这种情况下,我只得到field.name和field.value,实际上我想要的是,我想为每个输入元素一个jquery对象,所以我可以访问他们的css,id,name,甚至动画那些输入元件
有什么办法吗?
请让我知道并提前感谢你! 和
答案 0 :(得分:152)
要遍历表单中的所有输入,您可以执行以下操作:
$("form#formID :input").each(function(){
var input = $(this); // This is the jquery object of the input, do what you will
});
这使用jquery :input selector来获取所有类型的输入,如果您只想要文本:
$("form#formID input[type=text]")//...
等
答案 1 :(得分:22)
以下代码有助于从表单ID
的特定表单中获取元素的详细信息$('#formId input, #formId select').each(
function(index){
var input = $(this);
alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
}
);
以下代码有助于从加载页面中的所有表单中获取元素的详细信息,
$('form input, form select').each(
function(index){
var input = $(this);
alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
}
);
以下代码有助于获取放置在加载页面中的元素的详细信息,即使元素未放置在标记内,
$('input, select').each(
function(index){
var input = $(this);
alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
}
);
注意:我们在对象列表中添加了更多元素标记名称,如下所示,
Example: to get name of attribute "textarea",
$('input, select, textarea').each(
function(index){
var input = $(this);
alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
}
);
答案 2 :(得分:1)
使用 HTML 表单&#34;元素&#34;属性:
$.each($("form").elements, function(){
console.log($(this));
});
现在没有必要提供&#34;输入,文本区域,选择...&#34;等
答案 3 :(得分:0)
$(document).on("submit","form",function(e){
//e.preventDefault();
$form = $(this);
$i = 0;
$("form input[required],form select[required]").each(function(){
if ($(this).val().trim() == ''){
$(this).css('border-color', 'red');
$i++;
}else{
$(this).css('border-color', '');
}
})
if($i != 0) e.preventDefault();
});
$(document).on("change","input[required]",function(e){
if ($(this).val().trim() == '')
$(this).css('border-color', 'red');
else
$(this).css('border-color', '');
});
$(document).on("change","select[required]",function(e){
if ($(this).val().trim() == '')
$(this).css('border-color', 'red');
else
$(this).css('border-color', '');
});