I am trying to insert data to database through Ajax And Laravel. But when I click the submit button, nothing happens at all. I tried to see if the javascript is reachable at the first using "Alert" and yes it is. But the part of $ajax is not reachable at all.

Here is the code:

Html:

  <div >
    <input type="hidden" name="_token" id="csrf" value="{{Session::token()}}">
    <label for="email">Name:</label>
    <input type="text"  id="name" placeholder="Enter Name" name="name">
  </div>
  <div >
    <label for="email">Email:</label>
    <input type="email"  id="email" placeholder="Enter Email" 
   name="email">
  </div>
  <div >
       <label for="email">Phone:</label>
        <input type="text"  id="phone" placeholder="Enter Phone" 
        name="phone">
  </div>
   <div >
      <label for="email">City:</label>
      <input type="text"  id="city" placeholder="Enter City" name="city">
    </div>
   <button type="submit"  id="butsave">Submit</button>
   </div>

Javascript:

$(document).ready(function() {

$('#butsave').on('click', function() {
    alert("hello");
  var name = $('#name').val();
  var email = $('#email').val();
  var phone = $('#phone').val();
  var city = $('#city').val();
  var password = $('#password').val();
  if(name!="" && email!="" && phone!="" && city!=""){
    /*  $("#butsave").attr("disabled", "disabled"); */
      $.ajax({
          url: "/userData",
          type: "POST",
          data: {
              _token: $("#csrf").val(),
              type: 1,
              name: name,
              email: email,
              phone: phone,
              city: city
          },
          cache: false,
          success: function(dataResult){
              console.log(dataResult);
              var dataResult = JSON.parse(dataResult);
              if(dataResult.statusCode==200){
                window.location = "/userData";              
              }
              else if(dataResult.statusCode==201){
                 alert("Error occured !");
              }
              
          }
      });
  }
  else{
      alert('Please fill all the field !');
  }
   });
   });

for the controller code:

 public function create()
     {
    return view('userData');
     }
  
 public function store(Request $request)
  {
    $request->validate([
        'name' => 'required',
        'email' => 'required',
    ]);
    UserData::create($request->all());
    return json_encode(array(
        "statusCode"=>200
    ));
   }

The browser debugging shows this error:

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

CodePudding user response：

First remove type submit and replace type button to prevent page refresh,

<button type="button"  id="butsave">Submit</button>

And place your JavaScript code inside the same blade file between <script> </script> tags.

For better,

Give your route a name like this,

Route::post('/userData', [ControllerHere::class, 'method_name_here'])->name('userData');

After that change your ajax request url to something like this,

$.ajax({
    url: '{{ 'userData' }}', //put your route name here

CodePudding user response：

You can try this method. It always works for me.

Step 1: Add a meta tag for CSRF

<meta name="csrf" content="{{ csrf_token() }}" />

Step 2: Create a route:

Route::post('/userData', [ControllerHere::class, 'store'])->name('userData');

Step 3: Run the ajax request:

var csrf_token = $("meta[name='csrf']").attr('content');

var name = $('#name').val();
var email = $('#email').val();

$.ajax({
    url: '/userData',
    type: 'POST',
    data: {
        _token: csrf_token,
        name: name,
        email:email
    },
    success: function(res)
    {
        console.log(res);
    }
})

Step 4: Check controller:

public function store(Request $request)
{
    return $request;
}

Check your browser console for the response. I hope it will help!