AJAX - 发布表格行和单个输入

Question

我在 Laravel 有一个正在处理的项目，其中一部分要求我通过模式提交表单，问题是我对 AJAX 的熟悉程度不如我想的那样，而且我'遇到问题了。

这里是模态内容：

<table>
        <tr>
        <td>
            {{ csrf_field() }}
            <select name="payer_id" class="js-basic-single payer_id" style="width:100%;" id="payer_id">
                 <option></option>
                 @foreach($customers as $customer)
                 <option value="{{ $customer->id }}">{{ $customer->customer_name }}</option>
                 @endforeach
            </select>
            <div id="existing_biller_details" class="hidden" name="existing_biller_details" style="margin-top:10px;">
                </div>
            <select class="form-control deposit_type" name="deposit_type" id="deposit_type">
            <option disabled selected>Please Select</option>
            <option value="Check">Check</option>
            <option value="Cash">Cash</option>
                <option value="ECheck">ECheck</option>
            </select>
            <div name="check_number" id="check_number" class="hidden">
                  <input type="text" placeholder="Check Number" class="form-control" id="check_number" name="check_number">
              </div>
            <input type="text" class="form-control" placeholder="Payment Amount" name="payment_amount" id="payment_amount">
            <input type="date" class="form-control" placeholder="Date of Deposit" name="date_deposit" id="date_deposit">
            <textarea placeholder="Notes" style="width:100%;" class="form-control" id="notes" name="notes"></textarea>
        </td><td style="width:50%;">
            <table style="width:100%;" id="freight_bill_items">
                <thead>

                    <td style="width:30%;font-weight:bold;text-align:center;">Bill No.</td><td style="width:30%; font-weight:bold; text-align:center;">Amount</td>

                </thead>
                <tbody>
                    <tr style="height:40px">
                <td style="width:30%;text-align:center;"><input type="text" name="payment_details[shipment_id][]" required class="form-control name_list" id="shipment_id" placeholder="Bill No." required></td><td style="width:30%;text-align:center;"><input type="text" name="payment_details[amount][]" required class="form-control name_list" id="amount" placeholder="Amount" required>
                        </td><td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
                </tr>
            </tbody>
            </table>
                <div id="freight_bill_items_subtotal;" style="font-weight:bold; padding-top:10px; padding-bottom:10px; text-align:left; background-color: #f0f8ff;">
                SUBTOTAL:
                    <input type="text" readonly name="freightBillSubtotal" id="freightBillSubtotal" class="form-control total_field" style="display:inline;" value="0.00">
                </div>




            </td>    
        </tr>
        </table>

你可以在下面看到一点，有一个名为“freight_bill_items”的 div，有一个表格，在唯一的 tbody 行中，两个文本输入和一个按钮，用于添加具有相同输入的另一个表格行。

现在这里是我的 ajax 脚本：

<script type="text/javascript">
        $(document).on('click', '.createPayment', function() {
            $('.modal-title').text('Record New Payment');
            $('#payment').modal('show');
        });
        $('.modal-footer').on('click', '.add_payment', function() {
            //START
            var payment_details = [];
            //END
            $.ajax({
            type:'POST',
            url: '/payments/createNew',
            data: {
                payer_id: $('input[name=payer_id]').val(),
                notes: $('input[name=notes]').val(),
                payment_amount: $('input[name=payment_amount]').val(),
                date_deposit: $('input[name=date_deposit]').val(),
                check_number: $('input[name=check_number]').val(),
                deposit_type: $('input[name=deposit_type]').val(),
                payment_details:payment_details, //LOOKING FOR ASSISTANCE HERE//
                _token: $('input[name=_token]').val(),
            },
                success: function(data) {
                    $('.errorTitle').addClass('hidden');
                    $('.errorContent').addClass('hidden');

                    if ((data.errors)) {
                        setTimeout(function () {
                            $('#payment').modal('show');
                            toastr.error('Validation error - Check your inputs!', 'Error Alert', {timeOut: 5000});
                        }, 500);

                        if (data.errors.title) {
                            $('.errorTitle').removeClass('hidden');
                            $('.errorTitle').text(data.errors.title);
                        }
                        if (data.errors.content) {
                            $('.errorContent').removeClass('hidden');
                            $('.errorContent').text(data.errors.content);
                        }
                    } else {
                        toastr.success('Successfully recorded Payment!', 'Success Alert', {timeOut: 5000});

                    }
                },
            });
        });
</script>

现在我遇到的问题是如何将这些行及其输入内容与其他值一起传递到数组中以 POST？

Answer 1

我建议您从重复的输入中删除 id。而是指定一个类。货件 ID 可以作为属性指定。

<input class="payment_details" shipment_id="{shipment_id}" value="" required>

function get_array(element){
    // Inputs having mutliple fields(grouped by class) will be returned as an array
    arr = [];
    element.map(function(){
        arr[$(this).attr('shipment_id')] = $(this).val();
    });
    return arr;
}

var payments = get_array($('.payment_details'));

您现在有一个数组，其键是 shipping_id，值是相应元素的输入值。在你的 AJAX 中传递这个数组。