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

Question

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

我正在使用 Sweet Alert 加载的 PHP 动态构建表单。该表单包含多个具有相同 name/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

忘记 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());
}

如文档所述：

Only "successful controls" are serialized to the string. No submit button value is serialized since the form was not submitted using a button. For a form element's value to be included in the serialized string, the element must have a name attribute. Values from checkboxes and radio buttons (inputs of type "radio" or "checkbox") are included only if they are checked. Data from file select elements is not serialized.

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

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

我怀疑这是必需的。

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

How to pass array in Sweet Alert 2 Promise

javascript

arrays

promise

sweetalert2