Question

我正在使用SweetAlert2来显示效果很好的表单，但是我最近遇到了一个我无法解决的问题，而且我已经浪费了很多时间试图在Google上找到解决方案。

我正在使用由Sweet Alert加载的PHP动态构建表单。表单包含多个具有相同名称/ ID的复选框。我有3组多个复选框，因为它是一个动态表单，我不知道每组中有多少个复选框。

复选框集名为 invoice_details ， invoice_hours 和 invoice_materials 。每个集合可能没有复选框，也可能有十个或更多。但是每组复选框都具有相同的名称，因此invoice_details集都被命名为invoice_details。

如何将结果导入每个复选框组的数组并将其传递给promise，以便我可以在php页面中处理表单？

<script type="text/javascript">
    // SCRIPT TO ADD INVOICE

    //Warning Message with function
    $(document).on('click', '#addinvoice', function(){
        swal({
    title: 'Generate New Invoice',
    html: '<?php echo tm_generate_invoice_form( $post->ID ) ?>',
    showCancelButton: true,
    confirmButtonText: 'Submit',
    showLoaderOnConfirm: true,
    buttonsStyling: true,
    confirmButtonClass: 'btn btn-primary btn-lg',
    cancelButtonClass: 'btn btn-lg',
    preConfirm: function () {
    return new Promise(function (resolve) {
      resolve([
        $('#invoice_number').val(),
        $('#invoice_details').val(),
        $('#invoice_hours').val(),
        $('#invoice_materials').val(),
        $('#invoice_custom_message').val(),
        $('#jobid').val(),
        $('#tm_add_invoice').val()
      ])
    })
  }
}).then(function(result){
            swal(
                "Invoice Created!",
                "Invoice now ready to be sent to customer.",
                "success"
            );
            $.ajax({
            type: 'post',
            url: '<?php echo admin_url( 'admin-ajax.php' ) ?>',
            data: {
                action: 'tm_add_invoice',
                invoice_number: result[0],
                invoice_details: result[1][0],
                invoice_hours: result[2][0],
                invoice_materials: result[3][0],
                invoice_custom_message: result[4],
                jobid: result[5],
                tm_add_invoice: result[6]
            },
            success: function(data){

                $('#invoices').html(data);

            },
            error: function(e){
                 alert("error " + e);
                 console.log(e);
            }
            });
        });
    });
</script>

Answer 1

忘记ids。使用格式为name的{{1}}属性构建表单。

例如：

name="xxx[]"

每个集合中的元素不一定是相邻的。交错元素将以相同的方式序列化。

现在您只需使用jQuery的.serialize()序列化表单。

<form id="myForm">
    <input name="invoice_number" value="invoice_no_000" /><br/>
    <br/>
    <input type="checkbox" name="invoice_details[]" value="abc" /><br/>
    <input type="checkbox" name="invoice_details[]" value="bcd" /><br/>
    <br/>
    <input type="checkbox" name="invoice_hours[]" value="cde" /><br/>
    <input type="checkbox" name="invoice_hours[]" value="def" /><br/>
    <input type="checkbox" name="invoice_hours[]" value="efg" /><br/>
    <input type="checkbox" name="invoice_hours[]" value="fgh" /><br/>
    <br/>
    <input type="checkbox" name="invoice_materials[]" value="ghi" /><br/>
    <input type="checkbox" name="invoice_materials[]" value="hij" /><br/>
    <input type="checkbox" name="invoice_materials[]" value="ijk" /><br/>
    <input type="checkbox" name="invoice_materials[]" value="jkl" /><br/>
    <input type="checkbox" name="invoice_materials[]" value="klm" /><br/>
    <input type="checkbox" name="invoice_materials[]" value="lmn" /><br/>
    <input type="checkbox" name="invoice_materials[]" value="mno" /><br/>
    <br/>
    <!-- other fields as necessary -->
    <br/>
    <input type="submit" />
</form>

正如文件所说：

仅将“成功控件”序列化为字符串。没有提交按钮值被序列化，因为表单未使用按钮提交。要使表单元素的值包含在序列化字符串中，该元素必须具有name属性。复选框和单选按钮（“radio”或“checkbox”类型的输入）中的值仅在选中时才包括在内。来自文件选择元素的数据未被序列化。

因此，根据选中的复选框，生成的序列化（添加换行符）可能是：

'preConfirm': function () {
    return Promise.resolve($('#myForm').serialize());
}

在服务器端，PHP会将数据视为：

$ _ POST ['invoice_number']：'invoice_no_000'
$ _ POST ['invoice_details']：['bcd']
$ _ POST ['invoice_hours']：['cde'，'fgh']
$ _ POST ['invoice_materials']：['hij'，'jkl'，'klm'，'lmn']

我怀疑这是必需的。

如何在Sweet Alert 2 Promise中传递数组

1 个答案: