Question

我最近介绍了使用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
            ,

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

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

2 个答案: