CODEWITHSUNDEEP
javascriptlaravel
mafortis
mafortis

Reputation: 7128

laravel javascript on click gets same id for all buttons in table

I have button in my table like:

@foreach($orders as $order)
<tr>
  //other td's...
  <td><button class="btn btn-block btn-theme02 pay-button" id="{{$order->id}}" type="submit">Pay!</button></td>
</tr>
@endforeach

And JavaScript like:

<script type="text/javascript">
  $('.pay-button').click(function (event) {
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
      });
    event.preventDefault();
    // $(this).attr("disabled", "disabled");
    var prdfoId = $(".kghgh").val();
        $.ajax({
          url: '{{url("orderspayonline")}}/'+encodeURI(prdfoId),
          type: "POST",
          cache: false,

          success: function(data) {
//codes...
}
});
    });
</script>

the issue is i get same order id for my pay button in all tr's.

I mean If my order id is 1 i get 5 and if my order id is 2 i get 5 and so on. (5 is latest order id in database)

Upvotes: 0

Views: 575

Answers (2)

Kasnady
Kasnady

Reputation: 2279

Currently you are getting wrong id cause you are using this

var prdfoId = $(".kghgh").val();

Which only 1 input with a fix value. In order to get actual value, you had put orderId at every button as their id. You can use this for your need in js

<script type="text/javascript">
  $('.pay-button').click(function (event) {
    var prdfoId = $(this).attr("id"); // here will get the correct id
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
      });
    event.preventDefault();
    // $(this).attr("disabled", "disabled");
        $.ajax({
          url: '{{url("orderspayonline")}}/'+encodeURI(prdfoId),
          type: "POST",
          cache: false,

          success: function(data) {
//codes...
}
});
    });
</script>

Upvotes: 0

kbhatta
kbhatta

Reputation: 457

Best approach to do such task is to use data attribute. Change id="{{$order->id}}" to data-id="{{$order->id}}" and you can get particular id by calling $(this).data('id') in jQuery. See below:

@foreach($orders as $order)
<tr>
  //other td's...
  <td><button class="btn btn-block btn-theme02 pay-button" data-id="{{$order->id}}" type="submit">Pay!</button></td>
</tr>
@endforeach

JS code:

<script type="text/javascript">
  $('.pay-button').click(function (event) {
    var prdfoId = $(this).data('id');
    $.ajaxSetup({
        headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') }
      });
    event.preventDefault();
    // $(this).attr("disabled", "disabled");
        $.ajax({
          url: '{{url("orderspayonline")}}/'+encodeURI(prdfoId),
          type: "POST",
          cache: false,

          success: function(data) {
//codes...
}
});
    });
</script>

Upvotes: 1

Related Questions