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行中，两个文本输入和一个按钮，用于添加另一个具有相同输入的表行。 / p>

现在这里是我的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>

现在我要坚持的是如何将这些行及其输入内容传递给数组以及其他值？

Answer 1

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

＆＃13;

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

＆＃13;

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'));

现在有一个数组，其键是shipment_id，value是相应元素的输入值。在AJAX中传递此数组。

AJAX - 帖子表行和个人输入

1 个答案: