序列化不从表单发送所有数据答案

【问题标题】：Serialize not sending all data from form序列化不从表单发送所有数据
【发布时间】：2017-10-07 03:01:02
【问题描述】：

我最近被介绍在我的ajax 调用中使用serialize() 发送表单值。它在大多数情况下都有效，除了一种情况。

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
            ,

【问题讨论】：

为什么不用json？
@bigbounty 不知道该怎么做。

标签： javascript jquery ajax forms serialization

【解决方案1】：

要为一个复选框提交多个值，您需要将[] 添加到它们的名称中，以便它们的值将作为一个数组提交。

您还可以通过在方括号之间放置一个整数来手动增加数组索引。

不添加括号符号基本上会覆盖每个后续检查的同名输入的复选框值。

不带括号的查询字符串如下所示：

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

括号出来是这样的：

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

【讨论】：

所以我只会对 html 执行 name="prop-type[]" 吗？
如果adding the bracket notation basically overwrites the value of the checkbox for each subsequent checked input with the same name. 那么为什么这样做是正确的呢？这不会适得其反吗？
@Paul 您的引用不包括句子的第一个单词：Not...
我必须在 php 变量的 $_POST 中包含数组括号吗？ $proposal_type = trim(htmlspecialchars($_POST['prop-type[]'])); 这是抛出错误。
@Paul 不，它会在没有[] 的情况下为您提供数组结果，例如$_POST['prop-type']

【解决方案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"
}

【讨论】：