Question

我目前有以下代码：

$(document).ready(function() {
  // Initialize the quilljs editor
  var quill = new Quill('.quill-editor', {
    modules: { toolbar: true },
    theme: 'snow'
  });

  $('#frmBusiness').on('submit', function(e) {
    // Prevent the sumbission
    e.preventDefault();

    // Set the path of the PHP file based on if this is a new business or an edit of an existing business
    var path = (!$('#businessHiddenId').val().trim()) ? '../php/insert_business.php' : '../php/update_business.php';

    // Set the value of the signature to the contents of the quilljs editor
    $('#businessSignature').val($('.ql-editor').html());

    // Send the AJAX request
    $.ajax({
      type: 'POST',
      url: path,
      data: $('#frmBusiness').serialize(),
      dataType: 'JSON',
      error: function(data) {console.log(data)},
      success: function(data) {
        // reload the web page
        location.reload();
      }
    });
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/quill/1.3.4/quill.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.quilljs.com/1.3.4/quill.snow.css" />

<form class="modal-body" id='frmBusiness'>
  <input type="text" class="d-none" disabled="disabled" id="businessHiddenId" />
  <fieldset>
    <legend>Owner Information</legend>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="businessFirstName">First Name</label>
        <input type="text" class="form-control" id="businessFirstName" name="first_name" placeholder="First name" required="required" />
      </div>
      <div class="form-group col-md-6">
        <label for="businessLastName">Last Name</label>
        <input type="text" class="form-control" id="businessLastName" name="last_name" placeholder="Last name" required="required" />
      </div>
    </div>
    <div class="form-group">
      <label for="businessEmail">Sending Email</label>
      <input type="email" class="form-control" id="businessEmail" name="email" placeholder="email@insurance.com" required="required" />
    </div>
    <div class="form-group">
      <label for="businessSignature">Signature</label>
      <input type="text" class="form-control d-none" disabled="disabled" id="businessSignature" name="signature" required="required" />
      <div class="form-control quill-editor" style="min-height: 8rem;"></div>
    </div>
  </fieldset>
  <fieldset>
    <legend>Business Information</legend>
    <div class="form-group">
      <label for="businessBusinessName">Business Name</label>
      <input type="text" class="form-control" id="businessBusinessName" name="business_name" placeholder="My Super Cool Business Name" required="required" />
    </div>
    <div class="form-row">
      <div class="form-group col-md-6">
        <label for="businessPhone">Phone Number</label>
        <input type="tel" class="form-control" id="businessPhone" name="phone" placeholder="(555) 555-1234" required="required" />
      </div>
      <div class="form-group col-md-6">
        <label for="businessFax">Fax Number</label>
        <input type="tel" class="form-control" id="businessFax" name="fax" placeholder="(555) 555-1234" required="required" />
      </div>
    </div>
  </fieldset>
  <fieldset>
    <legend>Business Information</legend>
    <div class="form-group">
      <label for="businessAddress">Address</label>
      <input type="text" class="form-control" id="businessAddress" name="address" placeholder="123 S. Main St. STE 1" required="required" />
    </div>
    <div class="form-row">
      <div class="form-group col-md-4">
        <label for="businessCity">City</label>
        <input type="text" class="form-control" id="businessCity" name="city" placeholder="Florence" required="required" />
      </div>
      <div class="form-group col-md-4">
        <label for="businessState">State</label>
        <select class="form-control" name="state" id="businessState" required="required">
          <option value="2">AK</option><option value="1">AL</option><option value="4">AR</option><option value="3">AZ</option><option value="5">CA</option><option value="6">CO</option><option value="7">CT</option><option value="8">DC</option><option value="9">DE</option><option value="10">FL</option><option value="11">GA</option><option value="12">HI</option><option value="16">IA</option><option value="13">ID</option><option value="14">IL</option><option value="15">IN</option><option value="17">KS</option><option value="18">KY</option><option value="19">LA</option><option value="22">MA</option><option value="21">MD</option><option value="20">ME</option><option value="23">MI</option><option value="24">MN</option><option value="26">MO</option><option value="25">MS</option><option value="27">MT</option><option value="34">NC</option><option value="35">ND</option><option value="28">NE</option><option value="30">NH</option><option value="31">NJ</option><option value="32">NM</option><option value="29">NV</option><option value="33">NY</option><option value="36">OH</option><option value="37">OK</option><option value="38">OR</option><option value="39">PA</option><option value="40">RI</option><option value="41">SC</option><option value="42">SD</option><option value="43">TN</option><option value="44">TX</option><option value="45">UT</option><option value="47">VA</option><option value="46">VT</option><option value="48">WA</option><option value="50">WI</option><option value="49">WV</option><option value="51">WY</option>
        </select>
      </div>
      <div class="form-group col-md-4">
        <label for="businessZip">Zip</label>
        <input type="text" pattern="\d{5}" class="form-control" name="zip" id="businessZip" maxlength="5" placeholder="12345" required="required" />
      </div>
    </div>
  </fieldset>
  <input class="col-md-4 offset-md-8 btn btn-primary btn-block" type="submit" value="Save" />
</form>

但每当我提交AJAX时，form.Serialize（）方法都会忽略隐藏输入#businessSignature中的值。

正如您所知，get-go的输入是隐藏的并且没有值，但是在AJAX请求之前，值被更改为从quilljs编辑器获取HTML标记。

每当我设置断点时，我都会验证隐藏输入的val（）是否符合预期，但正如我所提到的，serialize方法的返回值完全省略了该字段。我还通过在$ _POST值上调用print_r来验证PHP文件中是否省略了该字段。

可能导致此问题的原因是什么？我知道我可以手动传递所需的数据，但理想情况下这就是serialize方法的用途。

Answer 1

serialize()忽略已禁用或没有name属性的字段。您提供的字段作为未序列化的字段businessSignature，将被禁用，这就是为什么它不被包含在内。

看起来您正在通过禁用它们并使用css隐藏它们来创建自己的准隐藏输入字段。这是不必要的，因为html已经有一个表单元素类型来为你执行此操作。

<input type="hidden" name="..." value="...">

隐藏的输入对用户不可见，并且将包含在序列化中，只要它们被命名并且未被禁用。

jQuery Serialize省略字段

1 个答案: