jquery 从特定表单获取所有输入

Posted 2023-05-08

【中文标题】jquery 从特定表单获取所有输入

【英文标题】：jquery get all input from specific form

【发布时间】：2011-05-16 12:22:13

【问题描述】：

有什么方法可以填充来自某个表单的所有输入？ 比如说，像这样的事情：

<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、名称，甚至为这些输入设置动画元素

有什么办法吗？

请提前告诉我，谢谢！ 和

【参考方案1】：

要遍历表单中的所有输入，您可以这样做：

$("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]")//...

等等

【讨论】：

我认为 :input 可以做到这一点，否则你可以这样做：$("form#formID input[type=text],form#formID select")

请注意上面第一个答案中的错字。 $("from 应该是 $("form

$("form#formID :input").each 输出input 类型、select 类型甚至button 类型输入。至少在我的代码中是这样。

@TARKUS input 与 :input。 $(":input") 选择所有 jQuery 表单元素。 $("input") 只选择输入标签。

【参考方案2】：

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

【讨论】：

我没有使用这个 input.val() 获得文本的价值。你能帮我吗？

我的错。抱歉，我在寻找错误的输出位置。

【参考方案3】：

使用HTML表单“元素”属性：

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

现在不需要提供诸如“input、textarea、select ...”之类的名称了。

【讨论】：

哇！ ——信息量太大。尝试以更快的方式查看表单信息 $("form:input").each(function(index) console.log(index, this.type, this.id, this.name, this.value, this.placeholder ); );

【参考方案4】：

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