Question

在下面的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

首先，在您的情况下，可能form是单个元素selector，您应该只迭代表单元素而不是表单选择器，请尝试此代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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


$inputs.each(function() {

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

Answer 3

您可以使用JQuery serializeArray函数，但之前您应该为每个输入添加name属性或选择。

＆＃13;

<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>

＆＃13;

Answer 4

尝试：

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

尝试使用属性选择器：

$(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 个答案: