jQuery获取所有表单元素的属性和值

Question

In the below html i want to read all the input elements of the form and get the custom field and the selected values or the input entered,how to do this? 在下面的html中，我想阅读表单的所有输入元素，并获取自定义字段和所选值或输入的输入，该怎么做？

function create()
{
   $("form").each(function(){
     var elements = $(this).find(':input');
     for(var ele in elements)
     {
          console.log("++++++++++++")
          console.log(ele)
          console.log("++++++++++++")
     }
  }

} }

<form name="UserForm">
   <input type="text" name="name1" readonly class="form-control" custom="input"/>
   <select  name="iType" id="iType" custom="SelectList">
      <option value="3" selected>school</option>
   </select>
   <select multiple id="multi" id="multi" custom="multiselect">
      <option value="1"> 1</option>
      <option value="2"> 2</option>
      <option value="3"> 3</option>
   </select> 
   <input type="checkbox" value="1" custom="checkbox" /> 
   <input type="radio" value="1"  custom ="radio" />
</form>

Answer 1

First, in your case probably form is single element selector and you should iterate form elements only not form selector , try this code 首先，在您的情况下， form可能是单个元素selector ，您应该仅迭代表单元素而不是表单选择器 ，请尝试以下代码

 $(function(){ $(':input','form').each(function(i, o){ $('#op').append($(o).attr('custom') + ' value:' + $(o).val()+'<br/>'); }) });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form name="UserForm"> <input type="text" name="name1" readonly class="form-control" custom="input"/> <select name="iType" id="iType" custom="SelectList"> <option value="3" selected>school</option> </select> <select multiple id="multi" id="multi" custom="multiselect"> <option value="1" selected> 1</option> <option value="2" selected> 2</option> <option value="3"> 3</option> </select> <input type="checkbox" value="1" custom="checkbox" /> <input type="radio" value="1" custom ="radio" /> </form> <div id="op"></div>

Answer 2

  var $input = $("form :input");
  var inputs = {}


$inputs.each(function() {

    inputs[$(this).attr('type')] = $(this).val();
});

Answer 3

You can use JQuery serializeArray function for that purpose, but previously you should add name attribute to each input or select. 您可以为此目的使用JQuery serializeArray函数，但是在此之前，您应该为每个输入或选择添加name属性。

 <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> <script languarge="javascript"> $(document).ready(function() { $('form[name=UserForm]').submit(function(event) { event.preventDefault(); var a = $(this).serializeArray(); o = {}; a.forEach(function(v) { if (!o[v.name]) { o[v.name] = v.value; } else { o[v.name] = [o[v.name]]; o[v.name].push(v.value); } }); //console.log ( o ); $('#result').text(JSON.stringify(o, null, '\\t')); }); }); </script> </head> <body> <form name="UserForm"> <input type="text" name="name1" readonly class="form-control" custom="input" /> <select name="iType" id="iType" custom="SelectList" name="SelectList"> <option value="3" selected>school</option> </select> <select multiple id="multi" id="multi" custom="multiselect" name="multiselect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="checkbox" value="1" custom="checkbox" name="checkbox" /> <input type="radio" value="1" custom="radio" name="radio" /> <input type="submit" /> </form> <pre id="result"> </pre> </body> </html>

Answer 4

Try: 尝试：

function create()
{
   $("form input").each(function(){
     {
          console.log("++++++++++++")
          console.log($(this).val())
          console.log("++++++++++++")
     }
    $("form select").each(function(){
     {
          console.log("++++++++++++")
          console.log($(this).find("option:selected").val())
          console.log("++++++++++++")
     }
  }

Answer 5

Try using attribute selector: 尝试使用属性选择器：

 $(function() { $('form[name=UserForm]').find('[custom]').each(function() { console.log(this, $(this).val()); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <form name="UserForm"> <input type="text" name="name1" readonly class="form-control" custom="input" /> <select name="iType" id="iType" custom="SelectList"> <option value="3" selected>school</option> </select> <select multiple id="multi" id="multi" custom="multiselect"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="checkbox" value="1" custom="checkbox" /> <input type="radio" value="1" custom="radio" /> </form>

jQuery获取所有表单元素的属性和值

问题描述

5 个解决方案

解决方案1
2 已采纳 2015-06-23 10:48:44

解决方案2
1 2015-06-23 10:45:14

解决方案3
1 2015-06-23 12:14:02

解决方案4
0 2015-06-23 10:38:24

解决方案5
0

jQuery获取所有表单元素的属性和值

问题描述

5 个解决方案

解决方案1 2 已采纳 2015-06-23 10:48:44

解决方案2 1 2015-06-23 10:45:14

解决方案3 1 2015-06-23 12:14:02

解决方案4 0 2015-06-23 10:38:24

解决方案5 0

解决方案1
2 已采纳 2015-06-23 10:48:44

解决方案2
1 2015-06-23 10:45:14

解决方案3
1 2015-06-23 12:14:02

解决方案4
0 2015-06-23 10:38:24

解决方案5
0