CODEWITHSUNDEEP
ajaxlaravel
Jemwel Beltran Libron
Jemwel Beltran Libron

Reputation: 71

Laravel ajax only the first button excute the other button will not response

I need your help guys im stuck because when i click the first button it will execute but the other button it will not excute im using ajax for the form and i use foreach. If someone know how to solve please tell me.

This is my current view code:

<tbody>
                    @foreach($customers as $name => $member)
                     @foreach($member->slice(0,1) as $value)
                     <tr>
                         <td>{{$value->id}}</td>
                         <td>{{$value->MATNR}}</td>
                         <td>{{$value->MAKTX}}</td>
                         <td>
                           <select class="form-control">
                              <option>{{$value->UNIT1}}({{$value->CONV1}})</option>
                              <option>{{$value->UNIT2}}({{$value->CONV2}})</option>
                          </select>
                         </td>
                         <td>

                           <select class="form-control">
                            @foreach($member as $value)
                              <option value="{{$value->CHARG}}">{{$value->CHARG}}</option>
                            @endforeach
                          </select>
                         </td>
                         <td>{{$value->VERME}}</td>
                         <td>
                           <form name="ajaxForm" id="ajaxForm" class="form-horizontal" novalidate="">
                            <input type="text" name="_token" value="{{ csrf_token() }}">
                            <input type="text" name="id" value="{{$value->id}}"> 
                          <button type="button" class="btn btn-primary" id="btnSave" value="add">Save</button>
                         </form>


                         </td>
                    </tr>

                     @endforeach 
                    @endforeach 
                    </tbody>

This is my current controller code

public function cart() {
    if (Request::isMethod('post')) {
        $id = Request::get('id'); 
            $customers = DB::table('Materials')->select('Materials.MATNR','Materials.MAGRV','Materials.CONV1','Materials.id','Materials.CONV1','Materials.UNIT1','Materials.CONV2','Materials.UNIT2','Materials.MHDHB','Materials.MAKTX','Inventory.CHARG','Inventory.VERME')->join('Inventory',function($join){
                $join->on('Inventory.MATNR','LIKE',DB::raw("CONCAT('%',Materials.MATNR,'%')"));
            })->groupBy('Materials.MATNR','Materials.MAGRV','Materials.CONV1','Materials.id','Materials.CONV1','Materials.UNIT1','Materials.CONV2','Materials.UNIT2','Materials.MHDHB','Materials.MAKTX','Inventory.CHARG','Inventory.VERME')->find($id);

        $cart = ShoppingCart::add($customers->id, $customers->CHARG, 5, 100.00, ['MAKTX' => $customers->MAKTX, 'kg' => $customers->VERME]);

    }   
}

And my current route

Route::post('/cart', 'system\request_customer@cart');

Ajax current code

 $(document).ready(function(){
   $("#btnSave").click(function (e) { 
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
        }
    })
    e.preventDefault();  
    $.ajax({
        type: 'POST',
        url: 'cart',
        data: $('#ajaxForm').serialize(),
        dataType: 'json',
        success: function (data) {
            console.log(data);

        },
        error: function (data) {
            console.log('Error:', data);
        }
    });
});

});

Upvotes: 2

Views: 125

Answers (2)

Jemwel Beltran Libron
Jemwel Beltran Libron

Reputation: 71

So this is my new view

<form method="POST" class="form-horizontal ajaxForm">
   <input type="hidden" id="token" name="_token" value="{{ csrf_token() }}">
   <input type="hidden" name="id" id="id" value="{{$value->id}}"> 
   <input type="hidden" name="MATNR" value="{{$value->MATNR}}">
   <button>Submit</button>
</form>

and my new ajax

$(".ajaxForm").submit(function(e) {
e.preventDefault();    
var formData = new FormData(this);
$.ajax({
    url: 'cart',
    type: 'POST',
    data: formData,
    success: function (data) {
        console.log(data)
    },
    cache: false,
    contentType: false,
    processData: false
});
});

Upvotes: 1

Adarsh Sojitra
Adarsh Sojitra

Reputation: 2219

I had the same problem. I solved it by replacing id with class. I don't know why this is a solution, but it worked in my case. To make it easier for you, here is what you have to do. Just try it, according to me, It must work!

  1. Replace every #ajaxForm with .ajaxForm.
  2. Replace <form name="ajaxForm" id="ajaxForm" class="form-horizontal" novalidate=""> with <form name="ajaxForm" class="form-horizontal ajaxForm" novalidate="">

Let me know if it works. It worked in my case. In my case, I was having the same error. I mean, only first button or submit button worked.

If you are JQuery expert or know the reason behind this, please let me know!

Upvotes: 0

Related Questions