Cannot send data to database using Ajax and Laravel

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 class="form-group">
    <input type="hidden" name="_token" id="csrf" value="{{Session::token()}}">
    <label for="email">Name:</label>
    <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">
  </div>
  <div class="form-group">
    <label for="email">Email:</label>
    <input type="email" class="form-control" id="email" placeholder="Enter Email" 
   name="email">
  </div>
  <div class="form-group">
       <label for="email">Phone:</label>
        <input type="text" class="form-control" id="phone" placeholder="Enter Phone" 
        name="phone">
  </div>
   <div class="form-group">
      <label for="email">City:</label>
      <input type="text" class="form-control" id="city" placeholder="Enter City" name="city">
    </div>
   <button type="submit" class="btn btn-primary" id="butsave">Submit</button>
   </div>

JavaScript
​x
 
  <div class="form-group">    <input type="hidden" name="_token" id="csrf" value="{{Session::token()}}">    <label for="email">Name:</label>    <input type="text" class="form-control" id="name" placeholder="Enter Name" name="name">  </div>  <div class="form-group">    <label for="email">Email:</label>    <input type="email" class="form-control" id="email" placeholder="Enter Email"    name="email">  </div>  <div class="form-group">       <label for="email">Phone:</label>        <input type="text" class="form-control" id="phone" placeholder="Enter Phone"         name="phone">  </div>   <div class="form-group">      <label for="email">City:</label>      <input type="text" class="form-control" id="city" placeholder="Enter City" name="city">    </div>   <button type="submit" class="btn btn-primary" 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 !');
  }
   });
   });

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

JavaScript
 
 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)

Answer

Try this one…

First of all set meta tag in your blade file’s html head tag.

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

JavaScript
 
<head>  <meta name="csrf-token" content="{{ csrf_token() }}"></head>​

Define ROUTES like this

Route::get('/userData', [YourControllerHere::class, 'create'])->name('userData.get');
Route::post('/userData', [YourControllerHere::class, 'store'])->name('userData.post');

JavaScript
 
Route::get('/userData', [YourControllerHere::class, 'create'])->name('userData.get');Route::post('/userData', [YourControllerHere::class, 'store'])->name('userData.post');​

Then change your button type if you are not using FORM to submit the data.

<button type="button" class="btn btn-primary" id="butsave">Submit</button>

JavaScript
 
<button type="button" class="btn btn-primary" id="butsave">Submit</button>​

Then add this script.

<script>
  $(document).ready(function () {
    var getUserDataUrl = {!! route('userData.get') !!};
    var postUserDataUrl = {!! route('userData.post')!!};
    $('#butsave').on('click', function () {
      alert("click");
      var csrf_token = $('meta[name="csrf-token"]').attr('content');
      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 != "") {
        $.ajax({
          url: postUserDataUrl,
          type: "POST",
          data: {
            _token: csrf_token,
            type: 1,
            name: name,
            email: email,
            phone: phone,
            city: city
          },
          cache: false,
          success: function (dataResult) {
            console.log(dataResult); // to view your response from controller in webbrowser's console
            if (dataResult.statusCode == 200) {
              window.location.href = getUserDataUrl; // if you want to show console data comment this line
            }
            else if (dataResult.statusCode == 400) {
              alert("Error occured!");
            }
          }
        });
      } else {
        alert('Please fill all the field !');
      }
    });
  });
</script>

JavaScript
 
<script>  $(document).ready(function () {    var getUserDataUrl = {!! route('userData.get') !!};    var postUserDataUrl = {!! route('userData.post')!!};    $('#butsave').on('click', function () {      alert("click");      var csrf_token = $('meta[name="csrf-token"]').attr('content');      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 != "") {        $.ajax({          url: postUserDataUrl,          type: "POST",          data: {            _token: csrf_token,            type: 1,            name: name,            email: email,            phone: phone,            city: city          },          cache: false,          success: function (dataResult) {            console.log(dataResult); // to view your response from controller in webbrowser's console            if (dataResult.statusCode == 200) {              window.location.href = getUserDataUrl; // if you want to show console data comment this line            }            else if (dataResult.statusCode == 400) {              alert("Error occured!");            }          }        });      } else {        alert('Please fill all the field !');      }    });  });</script>​

Now change your controller’s store function.

public function store(Request $request) {
  $request -> validate([
    'name' => 'required',
    'email' => 'required',
  ]);
  $userObj = UserData::create($request->all()); 
  //the create method only create user in database when there are fileds match in UserData model and request->all() otherwise you have to manipulate request data
  $data = [];
  if(!empty($userObj)){
    $data['statusCode'] = 200;
    $data['userObj'] = $userObj;
  } else {
    $data['statusCode'] = 400;
  }
  return response()->json($data);
}

JavaScript
 
public function store(Request $request) {  $request -> validate([    'name' => 'required',    'email' => 'required',  ]);  $userObj = UserData::create($request->all());   //the create method only create user in database when there are fileds match in UserData model and request->all() otherwise you have to manipulate request data  $data = [];  if(!empty($userObj)){    $data['statusCode'] = 200;    $data['userObj'] = $userObj;  } else {    $data['statusCode'] = 400;  }  return response()->json($data);}​

Advertisement

Answer