将数据从输入表单传递到 Laravel 中的 ajax答案

【问题标题】：Pass Data from input form to ajax in Laravel将数据从输入表单传递到 Laravel 中的 ajax
【发布时间】：2017-11-01 18:12:18
【问题描述】：

我有一个项目列表和任何项目的三种付款类型我想提供所有类型的付款并将付款 id 发送到 ajax 但我只为所有请求提供 id=1 我的代码在这里：

@foreach($project->payments as $payment)
    @if($payment->type==1)
        @if(empty($payment->code))
            <input type="hidden"id="payment_id"value="{{$payment->id}}">
            <input type="text" class="form-control" id="paymentCode" name="paymentC">
            {{csrf_field()}}
            <button id="AddCode"  type=submit class="btn btn-info generate-label AddCode">enter</button>
        @else
            {{$payment->code}}
        @endif

     @elseif($payment->type==2)
         @if(empty($payment->code))
             <input type="hidden" id="payment_id" value="{{$payment->id}}">
             <input type="text" class="form-control" name="paymentC" id="paymentCode">
             {{csrf_field()}}
             <button id="AddCode" type="submit" class="btn btn-info generate-label AddCode">enter</button>
         @else
             {{$payment->code}}
         @endif
    @endif
@endforeach

Javascript 代码：

$('.AddCode').click (function (event) {
    var payment_id = $('#payment_id').val();
    var paymentCode = $('#paymentCode').val();
    console.log(payment_id);
});

如何解决点击付款按钮时打印此 ID 的问题？

【问题讨论】：

标签： php jquery ajax laravel

【解决方案1】：

您没有使用 var payment_id = $('#payment_id').val(); 定位唯一 ID

改这行html

<button id="AddCode" type="submit" class="btn btn-info generate-label AddCode">enter</button>

进入

<button value="{{$payment->id}}" type="submit" class="btn btn-info generate-label AddCode">enter</button>

jQuery

$('.AddCode').on("click", function(event){
    var payment_id = $(this).val(); // payment id
});

【讨论】：

【解决方案2】：

试试这个

@foreach($project->payments as $payment)
    @if($payment->type==1)
        @if(empty($payment->code))
            <div>
                <input type="hidden" id="payment_id" value="{{$payment->id}}">
                <input type="text" class="form-control" id="paymentCode" name="paymentC">
                {{csrf_field()}}
                <button id="AddCode" class="btn btn-info generate-label AddCode">enter</button>
            </div>
        @else
            {{$payment->code}}
        @endif

     @elseif($payment->type==2)
         @if(empty($payment->code))
            <div>
                <input type="hidden" id="payment_id" value="{{$payment->id}}">
                <input type="text" class="form-control" name="paymentC" id="paymentCode">
                {{csrf_field()}}
                <button id="AddCode" class="btn btn-info generate-label AddCode">enter</button>
            </div>
         @else
             {{$payment->code}}
         @endif
    @endif
@endforeach

Javascript 代码：

$('.AddCode').click (function (event) {
    var payment_id = $(this).closest('div').find("#payment_id").val();
    var paymentCode = $(this).closest('div').find("#paymentCode").val();
    console.log(payment_id);
});

【讨论】：

【解决方案3】：

ID 对于单个 HTML 实体应该是唯一的。

代码更新：

{{csrf_field()}}
@foreach($project->payments as $payment)
    @if($payment->type==1)
        @if(empty($payment->code))
            <input type="hidden"id="payment-id-1"value="{{$payment->id}}">
            <input type="text" class="form-control" id="payment-code-1" name="payment_code">
            <button type=submit class="btn btn-info generate-label add-code" data-payment=1>enter</button>
        @else
            {{$payment->code}}
        @endif

    @elseif($payment->type==2)
        @if(empty($payment->code))
            <input type="hidden" id="payment_id_2" value="{{$payment->id}}">
            <input type="text" class="form-control" name="payment_code" id="paymentCode">

             <button type="submit" class="btn btn-info generate-label add-code" data-payment=1>enter</button>
        @else
            {{$payment->code}}
        @endif
    @endif
@endforeach

Javascript 代码：

$('.add-code').on("click", function(event){
    var payment_type = $(this).data("payment");
    var payment_id = $('#payment-id-'+payment_type).val();
    var paymentCode = $('#payment-code-'+payment_type).val();
});

试试这个。未测试。

【讨论】：