jQuery从特定形式获取所有输入


84

有什么方法可以填充特定形式的所有输入吗?可以这样说:

<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,名称和甚至为那些输入元素设置动画

有什么办法吗?

请让我知道并提前感谢您!和

Answers:


180

要遍历表单中的所有输入,可以执行以下操作:

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

它使用jquery :input选择器获取所有类型的输入,如果您只想输入文字,则可以执行以下操作:

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

等等


3
我认为:input可以做到这一点,但否则您可以做:$("form#formID input[type=text],form#formID select")
TJB

在上面的第一个答案中记错字。$(“ from应该为$(” form
Mitch

1
$("form#formID :input").each输出input类型,select类型甚至button类型的输入。至少在我的代码中。
塔库斯

3
@TARKUS inputVS :input。$(“:input”)选择所有jQuery表单元素。$(“ input”)仅选择输入标签。
Johnathan Elmore

25

以下代码有助于从具有表单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());
    }
);

1
使用此input.val()无法获得文本的价值。您能帮我吗?
DhavalThakor

我的错。对不起,我在寻找错误的地方输出。
DhavalThakor

3

使用HTML表单的“元素”属性:

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

现在,不必提供诸如“输入,文本区域,选择...”之类的名称。


!-方式太多信息。尝试以更快的方式查看表单信息$(“ form:input”)。each(function(index){console.log(index,this.type,this.id,this.name,this.value,this.placeholder );});
朱尔斯·巴托
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.