javascript - 如何在表格中一次获取所有输入值

这是我的表单，单击提交按钮时，我尝试从表单中获取所有值

  <form class="well form-horizontal" action=" " method="post"  id="contact_form">
<fieldset>

<!-- Form Name -->
<legend>User Form</legend>

<!-- Text input-->

<div class="form-group">
  <label class="col-md-4 control-label">User Name</label>
  <div class="col-md-4 inputGroupContainer">
  <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-cloud"></i></span>
  <input  name="name" placeholder="Enter User Name" class="form-control"  type="text">
    </div>
  </div>
</div>
<div class="form-group">
  <label class="col-md-4 control-label">Age</label>
  <div class="col-md-4 inputGroupContainer">
  <div class="input-group">
  <span class="input-group-addon"><i class="glyphicon glyphicon-cloud"></i></span>
  <input  name="age" placeholder="Enter Age " class="form-control"  type="text">
    </div>
  </div>
</div><div class="form-group">
  <label class="col-md-4 control-label"></label>
  <div class="col-md-4">
    <button name="submitbutton" type="submit" class="btn btn-success" >Submit <span class="glyphicon glyphicon-send"></span></button>
  </div>
</div>

</fieldset>
</form>

然后我编写脚本以在提交时获取所有值

<script type="text/javascript">

$(document).ready(function(){
    $("#submit").click(function(){
        var name = $("#name").val();
        var age= $("#age").val();

        console.log(name);
        console.log(age);

    });
});
</script>

但是它在提交时记录值。任何帮助表示赞赏

最佳答案

$("#submit").click(function(){

您正在将点击事件处理程序关联到ID为submit的元素。您的代码中没有这样的元素。

您宁愿做的就是为表单的submit event指定一个处理程序。另外，没有ID为name和age的元素。您可以将查询选择器与输入的name属性一起使用。

$('#contact_form').submit(function(e) {
  var name = $('#contact_form input[name="name"]').val();
  var age = $('#contact_form input[name="age"]').val();

  console.log(name);
  console.log(age);
});