Jquery 从特定的表单中获取所有输入

有没有什么方法可以填充来自某种形式的所有输入？ 比如说，这样的事情:

<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，甚至动画化这些输入元素

有什么办法吗？

请让我知道，并提前感谢你！ 还有

314220 次浏览
小开
最佳答案

To iterate through all the inputs in a form you can do this:

$("form#formID :input").each(function(){
var input = $(this); // This is the jquery object of the input, do what you will
});

This uses the jquery :input selector to get ALL types of inputs, if you just want text you can do :

$("form#formID input[type=text]")//...

etc.

小开

The below code helps to get the details of elements from the specific form with the form id,

$('#formId input, #formId select').each(
function(index){
var input = $(this);
alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
}
);

The below code helps to get the details of elements from all the forms which are place in the loading page,

$('form input, form select').each(
function(index){
var input = $(this);
alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
}
);

The below code helps to get the details of elements which are place in the loading page even when the element is not place inside the tag,

$('input, select').each(
function(index){
var input = $(this);
alert('Type: ' + input.attr('type') + 'Name: ' + input.attr('name') + 'Value: ' + input.val());
}
);

NOTE: We add the more element tag name what we need in the object list like as below,

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());
}
);
小开

Use HTML Form "elements" attribute:

$.each($("form").elements, function(){
console.log($(this));
});

Now it's not necessary to provide such names as "input, textarea, select ..." etc.

小开 

$(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', '');
});


提交答案