1
votes

Am working on a Laravel application and I have got some data in my blade file which I want to post to the backend via AJAX. In the AJAX code below, the inputs variable carry a a JSON object (converted from PHP) while the other variables contain data that I carry from the form.. The problem is when I hit submit button and log the results in console tab I get an error of

Failed to load resource: the server responded with a status of 500 (Internal Server Error).

Layout of the form

@if (!empty($plans_benefits))
    <div class="container">
        <div class="PLAN">
            <main class="top">
                <div class="row">
              @foreach ($plans_benefits as $plan_benefits)
                @php
                  $plan_data = $plan_benefits[0];
                  $benefits = $plan_benefits[1];
                  // dd($benefits);
                  $plan_name = $plan_data->Calculation_TravelPlan->TravelPlan->Name;
                @endphp   
                  <div class="card plan">
                        <h5 class="card-title plan"> {{$plan_name}} </h5>
                            <img class="card-img-top plan" src="{{asset('assets/images-new/superior.svg')}}" alt="Card image cap">
                    <div class="card-body">
                      <div class="travel-plan">
                  <div class="superior-content">
                        <table class="table">
                          <tbody>
                            @foreach($benefits as $benefit)
                                <tr>
                                  <td class="plan-title">{{$benefit->name}}</td>
                                    @if($benefit->value == 'true')
                                        <td class="plan-worth"><i class="fas fa-check"></i></td>
                                    @elseif ($benefit->value == 'false')
                                        <td class="plan-worth"><i class="fas"></i></td>
                                    @else
                                        <td class="plan-worth"> {{$benefit->value}} </td>
                                    @endif
                                </tr>
                             @endforeach
                           </tbody>
                        </table> 
                  </div>
                </div>
                    <!-- Hiden-->
                    <input type="hidden" value="{{$plan_data->CalculationId}}"" class ="calc_id" name="calc_id" id="calc_id{{$plan_data->CalculationId}}"/>

                    <input type="hidden" value="{{$plan_name}}" class ="travelplan" name="travelplan" id="plan{{$plan_data->CalculationId}}"/>
                    <!--Hidden-->

                      <p class="card-text plan">TOTAL
                        <span class="amount">$  {{round($plan_data->TravelBasicPremium,2)}} 
                        </span>
                      </p>
                      <!-- AJAX call (public/Js/App.js) line 31936-->
                       <a id ="{{$plan_data->CalculationId}}" class="plan-quote get_quote" style="cursor:pointer;"><span>Get Quote</span></a>
                    </div>
                     </div>
    @endforeach
      </div>
            </main>
        </div>
  </div>
@endif

AJAX code to post data from the above form to a Laravel backend via post request

$('.PLAN').on('click', '.plan-quote', function () {
                //Inputs variable below carry a JSON object converted from PHP
                var inputs =  {!!$form!!};
                // console.log(inputs);
                var calc_id = $(this).attr('id');
                var c_id = $('#calc_id' + calc_id).val();
                 //console.log(c_id);
                var plan_name = $('#plan' + calc_id).val();
                // console.log(plan_name);
                $.ajax({
                  //URL from routes file
                    url: 'getquote',
                    //POST request
                    type: 'post',
                    contentType: 'application/json',
                    data: inputs + '&calc_id=' + c_id + '&travelplan=' + plan_name,
                    success: function success(response) {
                        console.log(response);
                    },
                    error: function error(data) {
                        console.log(data);
                    }
                });
                //END AJAX REQUEST
            });

Routes file

Route::post( '/getquote', 'B2CController@createQuote')->name('b2c.getquote');

Laravel Controller to handle the post request

 public
        function createQuote(Request $request)
        {
            dd($request->all());

            $data = [
                'DobPrincipalTraveller' => $request->dob,
                'TravelStartDate' => $request->departure_date,
                'TravelEndDate' => $request->return_date,
                'CoverOption' => $request->cover,
                'WithSpouse' => 0,
                'FirstName' => $request->FirstName,
                'MiddleName' => $request->MiddleName,
                'LastName' => $request->LastName,
                'ClientEmail' => $request->email,
                'ContactNumber' => $request->phone,
                'CalculationId' => $request->calc_id,
                'TravelPlan' => $request->travelplan,
                'Children' => $request->childdob,
            ];

            /*Posts data to an API via Curl*/
            $quote = $this->global_Curl(
                $data, 'api/travel/create-quote')->data;

            dd($quote);
    }
1
Possible duplicate of How do I get PHP errors to display?miken32

1 Answers

0
votes

when u using ajax by post method in laravel you must send "X-CSRF-TOKEN" on header request!! such as:

     $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
     });
     $.ajax({

            type: 'post',           // POST Request
            url: 'url',            // Url of the Route (in this case user/save not only save)
            data: form_data,         // Serialized Data
            dataType: 'json',       // Data Type of the Transmit
            processData: false,
            contentType: false,

            success: function (data) {


            },
            error: function (data) {

            }
        });