javascript - 使用 Serialize() 抛出空值传递表单数据

Question

当我点击添加按钮时，我有一个表单，它应该将表单数据值传递给 AJAX 数据。当我尝试使用 console.log 时，值为空。我已经尝试了 Serialize() 和 FormData() 方法。都显示空值。

<div class="modal-content">
  <div class="modal-header clearfix ">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					<i class="pg-close fs-14"></i>
			</button>
    <h4 class="modal-title p-b-5"><span class="semi-bold">Add Invoice Period</span></h4>
  </div>
  <br />
  <div class="modal-body">
    <form role="form" id="invoiceForm" name="invoicePeriod" method="post" enctype='multipart/form-data'>
      <div class="row">
        <div class="col-sm-5">
          <div class="form-group form-group-default">
            <label>Start Date</label>
            <input id="startDate" type="date" class="form-control">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-5">
          <div class="form-group form-group-default">
            <label>End Date</label>
            <input id="endDate" type="date" class="form-control">
          </div>
        </div>
      </div>
      <div class="row">
        <button id="add-app" type="button" class="pull-right btn btn-primary  btn-cons" onclick="addPeriod()">Add</button>
        <button type="button" class="pull-right btn btn-cons close" data-dismiss="modal" aria-hidden="true">Close</button>
      </div>
    </form>
  </div>
</div>

<script>
  function addPeriod() {
    var form = document.querySelector('form');
    //console.log($('form').serialize());
    var formData = new FormData(form);
    console.log(formData);
  }
</script>

Answer 1

如果您希望它们显示在 .serialize() 方法结果中，您的表单字段应该有一个名称属性，例如:

<input id="startDate" type="date" class="form-control" name="start_date">
<input id="endDate" type="date" class="form-control" name="end_date">

function addPeriod() {
  var form = document.querySelector('form');
  console.log($('form').serialize());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="modal-content">
  <div class="modal-body">
    <form role="form" id="invoiceForm" name="invoicePeriod" method="post" enctype='multipart/form-data'>
      <div class="row">
        <div class="col-sm-5">
          <div class="form-group form-group-default">
            <label>Start Date</label>
            <input id="startDate" type="date" class="form-control" name="start_date">
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-sm-5">
          <div class="form-group form-group-default">
            <label>End Date</label>
            <input id="endDate" type="date" class="form-control" name="end_date">
          </div>
        </div>
      </div>
      <div class="row">
        <button id="add-app" type="button" class="pull-right btn btn-primary  btn-cons" onclick="addPeriod()">Add</button>
        <button type="button" class="pull-right btn btn-cons close" data-dismiss="modal" aria-hidden="true">Close</button>
      </div>
    </form>
  </div>
</div>