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

如果您希望表单字段显示在<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());
}

＆＃13;

＆＃13;

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

＆＃13;

text-decoration

＆＃13;

＆＃13;

＆＃13;

Answer 2

您的代码缺少表单操作，输入名称和Ajax请求。

＆＃13;

＆＃13;

  function addPeriod() {
    //It could be better to get form by id because there might be multiple forms in the page
    var form = $('#invoiceForm');
    var formData = form.serialize();
    $.ajax({
        type: "POST",
        url: form.attr('action'),//Or you can define the action endpoint manually
        data: formData,
        success: function( response ) {
          console.log( response );
        }
      });
      console.log(formData);
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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" action="sample/sampleform" 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="startDate">
          </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="endDate">
          </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>

＆＃13;

＆＃13;

＆＃13;