jquery 获取表单数据的方式:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="pkgs/jquery-2.1.1.min.js"></script>
</head>
<body>
  <script>
  $(function() {
    $('#submit').click(function() {
      var d = {};
      var t = $('form').serializeArray();
      console.log(t);
      console.log($("form").serialize());
      $.each(t, function() {
        d[this.name] = this.value;
      });
      alert(JSON.stringify(d));
      // {"a1":"a","a2":"b","a3":"c","ax":"0"}
    });
  });
  </script>
  <form>
  <input id="a11" type="input" value="" name="a1"><br>
  <input id="a22" type="input" value="" name="a2"><br>
  <input id="a33" type="input" value="" name="a3"><br>
  <select id="axx" name="ax">
  <option value="0">选项1</option>
  <option value="1">选项2</option>
  </select><br>
  <input id="submit" type="button" value="提交" name="submit">
</body>
</html>
jquery要表单元素的值包含到序列字符串中,元素必须有 name 属性。

 console.log($("form").serialize());

a1=a&a2=b&a3=c&ax=0

 

 

原生js获取表单数据的方式:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="pkgs/jquery-2.1.1.min.js"></script>
</head>

<body>
  <script>
    $(function () {
      $('#submit').click(function () {
        var d = {};
        var t = $('form').serializeArray();
        console.log(t);
        $.each(t, function () {
          d[this.name] = this.value;
        });
        alert(JSON.stringify(d));
        // {"a1":"a","a2":"b","a3":"c","ax":"0"}
        var inputa11 = document.getElementById("a11");
        console.log(inputa11.value); // 输入的值
      });
    });
  </script>
  <form id="form">
    <div class="a">
      <input id="a11" type="input" value="" name="a1"><br>
    </div>
    <input id="a22" type="input" value="" name="a2"><br>
    <input id="a33" type="input" value="" name="a3"><br>
    <select id="axx" name="ax">
      <option value="0">选项1</option>
      <option value="1">选项2</option>
    </select><br>
    <input id="submit" type="button" value="提交" name="submit">
  </form>
</body>

</html>

 

 

更多推荐

jquery 获取表单数据(获取序列化表单数据)