jQueryのSerializeを省略フィールド

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()は、無効または名前属性を持たないフィールドを無視します。シリアル化されていないものの例として指定したフィールドbusinessSignatureが無効になっているため、含まれていません。

擬似非表示の入力フィールドを無効にしてcssで非表示にしているようです。これはhtmlが既にあなたのためにこれを行うフォーム要素型を持っているので、これは不要です。

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

非表示の入力はユーザには表示されず、名前が付けられて無効になっている限り、シリアライズに含まれます。