javascript - 如何获取表单中输入的所有值

Question

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

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

但它在提交时记录值。任何帮助表示感谢

Answer 1

$("#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);
});