Form Submit Using Laravel Ajax Example
=> Today , we learn how to submit form data using laravel ajax jquery in database.Follow these steps :
1. Make route in route folder in web.php.
2. Make model & migration files.
3. Make controller.
4. Make blade for ajax request.
Step : 1
Add two routes in your route->web.php file.
--> routes/web.php
Route::get('user-form', 'UserController@user');
Route::post('user-form-submit', 'UserController@userSubmit');
Step : 2
Run command and generate a model and migration file.
php artisan make:model User -m
After running this command you a User Model in your app directory (app/User.php) and migration file in database/migration folder.
database/migrations/2019_09_02_161223_create_user_table.php
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateUsersTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('users', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('name')->nullable();
$table->string('email')->nullable();
$table->string('contact_no')->nullable();
$table->string('subject')->nullable();
$table->text('message')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('users');
}
}
Step : 3
Run this command to create controller .
php artisan make:controller UserController
after creating controller showing in your app/Http/Controllers directory add below code on it.
app/Http/Controllers/UserController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\User;
class UserController extends Controller {
public function user() {
return view('user_form');
}
public function userSubmit(Request $request) {
$user = new User;
$user->name = $request->name;
$user->email = $request->email;
$user->subject = $request->subject;
$user->contact_no = $request->mobile_number;
$user->message = $request->message;
$user->save();
return response()->json(['success'=>'Form is successfully submitted!']);
}
}
Step : 4
Create a user_form blade file in your resources>views directory. Create and put below code on it.
resources/views/user_form.blade.php
<html lang="en">
<head>
<title>Laravel Ajax Form Submit</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
</head>
<body>
<div class="container panel panel-default ">
<h2 class="panel-heading">Laravel Ajax Form Submit</h2>
<form id="userForm">
<div class="form-group">
<input type="text" name="name" class="form-control" placeholder="Enter Name" id="name">
</div>
<div class="form-group">
<input type="text" name="email" class="form-control" placeholder="Enter Email" id="email">
</div>
<div class="form-group">
<input type="text" name="mobile_number" class="form-control" placeholder="Enter Mobile Number" id="mobile_number">
</div>
<div class="form-group">
<input type="text" name="subject" class="form-control" placeholder="Enter subject" id="subject">
</div>
<div class="form-group">
<textarea class="form-control" name="message" placeholder="Message" id="message"></textarea>
</div>
<div class="form-group">
<button class="btn btn-success" id="submit">Submit</button>
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script type="text/javascript">
$('#userForm').on('submit',function(event){
event.preventDefault();
let name = $('#name').val();
let email = $('#email').val();
let mobile_number = $('#mobile_number').val();
let subject = $('#subject').val();
let message = $('#message').val();
$.ajax({
url: "/user-form-submit",
type:"POST",
data:{
"_token": "{{ csrf_token() }}",
name:name,
email:email,
contact_no:mobile_number,
subject:subject,
message:message,
},
success:function(response){
console.log(response);
},
});
});
</script>
</body>
</html>
0 Comments