代码之家 › 专栏 › 技术社区 › H C

通过jquery模拟提交按钮并收集所有html输入值

django ajax html jquery javascript

H C · 技术社区 · 7 年前

我有以下表格:

<form method="post">
  <div class="summary">
    <div class="trip">
      <select name="State" class="state">
        <option selected disabled>Choose a State</option>
        <option value="1">California</option>
        <option value="2">New York</option>
      </select>
      <select name="State" class="state">
        <option selected disabled>Choose a State</option>
        <option value="1">California</option>
        <option value="2">New York</option>
      </select>
      ...
      Repeated an unknown number of times.
      ...
      <br><br>
    </div>
  </div>
  <input type="button" id="submit" value="calculate">
 </form>

我想使用ajax调用将calculate按钮模拟为带有jquery的submit按钮。

jquery中是否有类似的函数,用于收集html中的所有输入值,作为ajax调用的参数??

2 回复 | 直到 7 年前

Alexander Higgins 7 年前

Jquery有一个 serialize 作用

var postData =$('form').serialize();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <div class="summary">
    <div class="trip">
      <input name="city" value="Some City" type="text" />
      <select name="State" class="state">
        <option selected disabled>Choose a State</option>
        <option value="1">California</option>
        <option value="2">New York</option>
      </select>
      <select name="State" class="state">
        <option selected disabled>Choose a State</option>
        <option value="1">California</option>
        <option value="2">New York</option>
      </select> ... Repeated an unknown number of times. ...
      <br><br>
    </div>
  </div>
  <input type="button" id="submit" value="calculate">
</form>
<textarea id="data"></textarea>
<script>
  $("#submit").click(function() {
    var data = $("form").serialize()

    $("#data").val(data);
    return false;
  });
</script>

您也可以使用 serializeArray 这将为您提供表单中所有值的数组。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <div class="summary">
    <div class="trip">
      <input name="city" value="Some City" type="text" />
      <select name="State" class="state">
        <option selected disabled>Choose a State</option>
        <option value="1">California</option>
        <option value="2">New York</option>
      </select>
      <select name="State" class="state">
        <option selected disabled>Choose a State</option>
        <option value="1">California</option>
        <option value="2">New York</option>
      </select> ... Repeated an unknown number of times. ...
      <br><br>
    </div>
  </div>
  <input type="button" id="submit" value="calculate">
</form>
<textarea id="data"></textarea>
<script>
  $("#submit").click(function() {
        var m = {};
        $("form").serializeArray().forEach(function(x, y) {
            if(!m[x.name]) {
               m[x.name] = x.value;
            } else {
              var d = [];
              d.push(m[x.name]);
              d.push(x.value);
              m[x.name]=d;
            }
          
          });


          $("#data").val(JSON.stringify(m));
          return false;
        });
</script>

Rajesh P 7 年前

你可以这样做。

将按钮类型更改为“提交”。

<input type="submit" id="submit" value="calculate">

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});