如何解决引导表单模式提交按钮每次都传递唯一的第一行数据？

Question

引导编辑表单模型每隔一行传递唯一的第一行数据。我该如何解决这个问题？

我在表格视图中显示记录列表，每行有两个按钮 1.Done 和 2.view。

假设用户点击完成按钮显示带有特定行数据的引导表单模式，并且在显示表单模式后，用户按下引导模式表单的提交按钮将第一行数据传递给每隔一行的控制器，那么如何修复那个问题？

查看

<a class="modalLink" href="#" data-toggle="modal" data-target="#con-close-modal<?php echo $getemi->loan_payments_id; ?>" data-id="<?php echo $getemi->loan_payments_id; ?>"> <span class="btn btn-success btn-rounded waves-effect waves-light">Done</span>
</a>
<!-- Start Model -->
<div id="con-close-modal<?php echo $getemi->loan_payments_id; ?>" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title mt-0">Pay Your Outstanding Amount</h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <div class="modal-body">
                <!--  <form method="POST" id="frm_pay_installment"> -->
                <div class="form-group row">
                    <label class="col-4 col-form-label">Current EMI</label>
                    <div class="col-8">
                        <input type="text" name="current_emi" id="current_emi" class="form-control" value="<?php echo $current_emi; ?>" placeholder="Current EMI" disabled>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Pay Amount</label>
                    <div class="col-8">
                        <input type="text" id="payment_amount" name="payment_amount" class="form-control" placeholder="Pay Amount" autocomplete="off">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-4 col-form-label">Payment Info:</label>
                    <div class="col-8">
                        <textarea class="form-control" id="payment_details" name="payment_details" placeholder="Details Of Cash / Cheque/ DD :"></textarea>
                    </div>
                </div>
                <input type="hidden" id="loan_payments_id" name="loan_payments_id" value="<?php echo $getemi->loan_payments_id; ?>">

                <div class="modal-footer" style="justify-content: center;">

                    <button type="button" class="btn btn-secondary waves-effect" data-dismiss="modal">Close</button>

                    <!-- <input type="submit" name="btn_pay" value="Pay" class="btn btn-info"> -->

                    <button class="pay_installment btn btn-info waves-effect waves-light" id="btn_pay">Pay</button>
                </div>
                <!--  </form> -->
            </div>
        </div>
    </div>

</div>
<!-- / Emd modal -->

Ajax 调用

<script>
    $('.pay_installment').click(function() {
        var payment_amount = $('#payment_amount').val();
        var payment_details = $('#payment_details').val();
        var loan_payments_id = $('#loan_payments_id').val();

        $.ajax({
            url: "<?php echo base_url('admin/payInstallmentAmount');?>",
            type: 'POST',
            data: {
                payment_details: payment_details,
                payment_amount: payment_amount,
                loan_payments_id: loan_payments_id
            },

            dataType: 'json',
            success: function(data) {
                if (data['success'] == false) {

                    $('#show_error_message').html(data['error']);
                    return false;
                    console.log(data);
                }

                if (data['success'] == true) {
                    console.log(data);
                    $('#con-close-modal' + data['loan_payments_id']).modal('hide');
                    location.reload();
                    $('#success_message').html(data['message']);
                    return true;
                }
            }
        });

});

控制器

public function payInstallmentAmount() {
    $data = array();

    $this - > form_validation - > set_rules('payment_amount', 'Pay Amount', 'required');
    $this - > form_validation - > set_rules('payment_details', 'Payment Details', 'required');

    if ($this - > form_validation - > run() == false) {
        $data['success'] = false;
        $data['error'] = validation_errors();
    } else {
        $post_data = $this - > input - > post();

        if ($this - > AdminModel - > payInstallmentAmount($post_data)) {
            $loan_payments_id = $post_data['loan_payments_id'];
            $data['success'] = true;
            $data['message'] = "Successfully Submit Installment Amount";
            $data['loan_payments_id'] = $loan_payments_id;
        }

    }
    echo json_encode($data);
}

Answer 1

如果此模型对话框代码在 for 循环中，则将其放在 for 循环之外并在单击 完成 按钮时填充模型

（或）

元素 id 在页面中必须是唯一的，因为您为每一行填充模型对话框。页面中有“n”个payment_amount、payment_details、loan_payments_id字段。要清楚我在说什么，请右键单击页面“查看页面源”并搜索任何字段 ID（例如：payment_amount）

将其更改为类名，然后您需要在单击支付按钮时将模型对话框 id 传递给 javascript 方法，以便您可以使用父 id 访问元素，如

<input type="hidden" class="loan_payments_id" name="loan_payments_id" value="<?php echo $getemi->loan_payments_id; ?>"> 

脚本：

payment_amount= $('#con-close-modal'+payment_id+' .payment_amount').val()

来自 play_button 的 ID 有很多方法可以获取id， 1. 作为参数提供给函数

<button class="pay_installment btn btn-info waves-effect waves-light" id="btn_pay" onclick="pay_installment(<?php echo $getemi->loan_payments_id; ?>)">Pay</button>


function pay_installment(payment_id) {
        var payment_amount = $('#con-close-modal'+payment_id+' .payment_amount').val();
        var payment_details = $('#con-close-modal'+payment_id+' .payment_details').val();

1. 作为按钮 ID 的一部分提供

   button class="pay_installment btn btn-info waves-effect waves-light" id="btn_pay_loan_payments_id; ?>">支付按钮>

    $('.pay_installment').click(function() {
    buttonid=this.id;
   payment_id=buttonid.split('_')[2]
     var payment_amount = $('#con-close-modal'+payment_id+' .payment_amount').val();
               var payment_details = $('#con-close-modal'+payment_id+' .payment_details').val();
   -----------
   }