How to Create (Insert) Operation in Laravel Without Refresh Page Using JQuery?

Hello friends, today I will tell you through experts tool tutorial how you submit data to database using jquery without laravel without refreshing the page. Friends, I will try to understand this topic in only 4 steps. Let’s say

Overview

Step 1:- Now first you create a form.
Step 2:- Add Javascript Code.
Step 3:- Add URL into Route File.
Step 4:- Insert Code add into Controller File.

Step 1:- Now first you create a form.

In the first step you are told that first of all you create a form. You can name the form anything. Below you have been told as the code example of the form.

index.blade.php

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>CURD Operation laravel without refresh page Using Jquery OR Javascript.</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<!-- font awesome-->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.1/css/all.css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- bx-slider--> 
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bxslider/4.2.12/jquery.bxslider.css">
<!-- google font-->
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div class="s-f-mid-sec">
<div class="container">
<div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12">
<div class="s-f-inner-sec">
<div class="s-f-form-sec">
<form id="myform">
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
<div class="form-group">
<label>1. First Name <span>*</span></label>
<input type="text" class="form-control" name="firstname" placeholder="Enter full first name of the applicant/ student">
</div>
<div class="form-group">
<label>2. Last Name <span>*</span></label>
<input type="text" name="secondname" class="form-control" placeholder="Enter surname of the applicant/ student">
</div>
<div class="form-group">
<label>4. Address <span>*</span></label>
<textarea class="form-control" name="address" placeholder="Enter Your address"></textarea>
</div>
<button id="btn-moreqq" class="submit_btnqq class="btn">SUBMIT</button>
<p id="display_info"></p>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

Step 2:- Add Javascript Code.

In the second step you are given the code of javascript. In which you are told how to get the value of the form in javascript by post. The code of javascript is given below.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$(".submit_btnqq").click('#btn-moreqq',function(e){
e.preventDefault();
var _token = $("input[name='_token']").val();
var firstname = $("input[name='firstname']").val();
var secondname = $("input[name='secondname']").val();
var address = $("textarea[name='address']").val();
if (firstname == "") {
alert('First Name is Required');
} else if (secondname == "") {
alert('Last Name is Required');
} else if (address == "") {
alert('Address is Required');
} else {
$.ajax({
url: "www.website.com/insertdata",
type:'POST',
data: {_token:_token, firstname:firstname, secondname:secondname, address:address},
success: function(data) {
$('#btn-moreqq').html("Register");
$('#display_info').html('Successfully Form is Submitted.');
$("#myform")[0].reset(); 
}
});
}
}); 
});
</script>

Step 3:- Add URL into Route File

In the third step, you have to tell how to pass the url in the route file. These are told. Anyway, in the new version of laravel route.php is now named web.php.

Route::post('insertdata', 'insertcontroller@insertdata');

Step 4:- Insert Code add into Controller File.

In the fourth step, you have to insert query and how to insert data. These are explained well.

insertcontroller.php

<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Requests;
use DB;
use Redirect;
use View;
use File;
class insertcontroller extends Controller
{
public function insertdata(Request $request)
{
$firstname = $request->firstname; 
$secondname = $request->secondname;
$address = $request->address;
DB::table('blog')->insert([
'firstname' => $firstname,
'secondname' => $secondname,
'address' => $address
]);
}
}