Pass Data from input form to ajax in Laravel

Question

I Have a List of projects and three type of payments for any project I Want to give all type of payments and send payment id to ajax But I give just id=1 for all request my Code is here:

@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 Code:

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

How I Can fix my problem that When click in button of payment print this id?

Lars Mertens · Accepted Answer · 2017-11-01 19:03:41Z

1

You're not targetting an unique id with var payment_id = $('#payment_id').val();

Change this line of html

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

Into

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

answered Nov 1, 2017 at 19:03

Lars Mertens

1,4392 gold badges18 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mohammad Nurul Huda Rimon · Accepted Answer · 2017-11-02 03:51:54Z

Try this

@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 Code:

$('.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);
});

Rutvij Kothari · Accepted Answer · 2017-11-01 18:36:47Z

ID should be unique for individual HTML entity.

Code Update:

{{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 Code:

$('.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();
});

Try this out. Not tested.

Collectives™ on Stack Overflow

Pass Data from input form to ajax in Laravel

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related