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

Question

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

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

复选框集被命名为 invoice_details、invoice_hours 和 invoice_materials。每组可能没有复选框，或者可能有十个或更多。但是每组checkbox的名字都一样，所以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

忘记 ID。使用格式为name="xxx[]" 的name 属性构建表单。

例如：

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

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

现在您可以简单地使用 jQuery 的.serialize() 序列化表单。

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

正如文档所说：

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

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

invoice_number%5B%5D=invoice_no_000&
invoice_details%5B%5D=bcd&
invoice_hours%5B%5D=cde&
invoice_hours%5B%5D=fgh&
invoice_materials%5B%5D=hij&
invoice_materials%5B%5D=jkl&
invoice_materials%5B%5D=klm&
invoice_materials%5B%5D=lmn

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

• $_POST['invoice_number'] : 'invoice_no_000'
• $_POST['invoice_details'] : ['bcd']
• $_POST['invoice_hours'] : ['cde', 'fgh']
• $_POST['invoice_materials'] : ['hij', 'jkl', 'klm', 'lmn']

我怀疑这是必需的。