序列化不從表單發送所有數據

Question

最近，我被引入了使用serialize()在我的ajax調用中發送表單值的信息。 除了一種情況，它在大多數情況下都起作用。

div proposal-type包含選定或未選定的輸入復選框。 該值僅作為選擇之一發送。 因此，簡而言之，我不確定如何在數據中發送變量以及進行序列化。

我試過了：

var datastring = $('#proposal-form').serialize();
data: {
    "type": type},
    datastring
,

和

var datastring = $('#proposal-form').serialize();
data: 
    "type": type,
    datastring
,

但是兩者都沒有運氣。 以下是更多代碼。 有人對我該怎么做有任何想法嗎？

<form method="POST" action="" id="proposal-form">
    <div class="panel-input"><input type="text" id="proposal-name" name="proposal_name" class="proposal-input" placeholder="Name *"></div>
    <div class="panel-input"><input type="email" id="proposal-email" name="proposal_email" class="proposal-input" placeholder="Email *"></div>
    <div class="panel-input"><input type="tel" id="proposal-phone" name="proposal_phone" class="proposal-input" placeholder="Phone *"></div>
    <div class="panel-input"><input type="text" id="proposal-location" name="proposal_location" class="proposal-input" placeholder="Location *"></div>
    <div class="panel-input"><input type="text" id="proposal-company" name="proposal_company" class="proposal-input" placeholder="Company *"></div>
    <div class="panel-input">
    <div id="proposal-type" class="proposal-input"></div>
        <div id="proposal-type-drop">
                <label class="drop-item">A<input type="checkbox" name="prop-type" class="drop-item-input" value="A"></label>
                <label class="drop-item">B<input type="checkbox" name="prop-type" class="drop-item-input" value="B"></label>
                <label class="drop-item">C<input type="checkbox" name="prop-type" class="drop-item-input" value="C"></label>
            </div>
    </div>
    <textarea class="proposal-text" id="proposal-description" name="proposal_description" placeholder="Project Details *"></textarea>
</form>

submitHandler: function(form) {
        event.preventDefault();
        /*var proposal_name = $('#proposal-name').val();
        var proposal_email = $('#proposal-email').val();
        var proposal_phone = $('#proposal-phone').val();
        var proposal_location = $('#proposal-location').val();
        var proposal_company = $('#proposal-company').val();*/
        var type = $('.drop-item-input:checked').map(function() {
                        return $(this).val();
                    }).get().join(', ');
        //var proposal_description = $('#proposal-description').val();
        var datastring = $('#proposal-form').serialize();
        $.ajax({
            url: "php/proposal-send.php", 
            type: "POST",
            data: 
                /*"proposal_name": proposal_name,
                "type": type,*/
                datastring
            ,

Answer 1

要為復選框提交多個值，您需要在其名稱中添加[] ，以便將其值作為數組提交。

您也可以通過在方括號之間放置一個整數來手動增加數組索引。

不添加方括號符號基本上會覆蓋具有相同名稱的每個后續選中輸入的復選框的值。

不帶括號的查詢字符串如下所示：

prop-type=A&prop-type=B&prop-type=c

隨着括號出來像這樣：

prop-type[]=A&prop-type[]=B&prop-type[]=c

Answer 2

嘗試將您的輸入checkboxes名稱更改為array

這個：

<input type="checkbox" name="prop-type" class="drop-item-input" value="A">

為此：

<input type="checkbox" name="prop-type[]" class="drop-item-input" value="A">

另外，您可以使用下面的代碼通過serialize()數據發送額外的數據

$.ajax({
    type : 'POST',
    url : 'url',
    data : $('#form').serialize() + "&par1=1&par2=2&par3=232"
}