how to send data from ajax to controller in lalravel? the keys form doesn't send from ajax 422 (Unprocessable Content)?
I make CRUD operation by using laravel, ajax and the blade form is (modal), the (create method) works fine, but the (update method) doesn't work, in spite of its functionality is the same of (update method) I Think the issue is:
- the form kyes (name atrribute) doesn't send to the controller, In spite of the keys contain values and their names are the same in controller request.
- when press Edit button the modal and inputs values appear like that:
- when press save changes, it says that there are no requests come from ajax:
Routes:
Route::get('/register',[RegisterController::class,'index']);
Route::post('/register-create',[RegisterController::class,'store'])->name('register.create');
Route::get('/register-edit/{id}',[RegisterController::class,'edit'])->name('register.edit');
Route::post('/register-update/{id}',[RegisterController::class,'update'])->name('register.update');
Blade page the issue begging of ( "Modal for edit" comment") :
<!DOCTYPE html>
<html lang="en">
<head>
<title>Ajax CRUD Modal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
{{--jquery and ajax--}}
<script src="https://code.jquery.com/jquery-3.1.1.min.js">
{{--jquery and ajax--}}
{{--Bootstrab --}}
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
{{--Bootstrab --}}
{{--validate jquery --}}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/jquery.validate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.0/additional-methods.min.js"></script>
{{-- validate jquery --}}
</head>
<body>
<div class="container">
<div id="msg-succ" style="display: none" class="mt-5 row mr-2 ml-2">
<button type="text" class="btn btn-lg btn-block btn-outline-success mb-2"
id="type-error">Registered Successfully</button>
</div>
<div style="margin-bottom: 60px"></div>
<table id="userTable" class="table">
<button class="btn btn-success mr-2" data-toggle="modal" data-target="#addUser">Add New User</button>
<thead>
<tr>
<th scope="col">First Name</th>
<th scope="col">Middle Name</th>
<th scope="col">Last Name</th>
<th scope="col">Email</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
@if(isset($users) && $users->count()>0)
@foreach($users as $user)
<tr>
<td>{{$user-> firstName}}</td>
<td>{{$user-> middleName}}</td>
<td>{{$user-> lastName}}</td>
<td>{{$user-> email}}</td>
<td>
<div class="btn-group" role="group"
aria-label="Basic example">
<button id="getUser" data-id="{{ $user->id }}" class="btn btn-primary" data-toggle="modal" data-target="#editUser">Edit User</button>
</div>
<div class="btn-group" role="group"
aria-label="Basic example">
<a user_id = "{{$user -> id}}" class="delete btn btn-danger" href="">Delete</a>
</div>
</td>
</tr>
@endforeach
@endif
</tbody>
</table>
</div>
<!-- Modal for create -->
<div class="modal fade" id="addUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add New User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="userForm">
@csrf
<div class="form-group">
<label for="exampleInputEmail1">First Name</label>
<input type="text" onblur="" name="firstName" class="form-control" id="firstName" placeholder="Enter First Name">
<small id="firstName_error" class="form-text text-danger"></small>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Middle Name</label>
<input type="text" name="middleName" class="form-control" id="middleName" placeholder="Enter Middle Name">
<small id="middleName_error" class="form-text text-danger"></small>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Last Name</label>
<input type="text" name="lastName" class="form-control" id="lastName" placeholder="Enter Last Name">
<small id="lastName_error" class="form-text text-danger"></small>
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" name="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<small id="email_error" class="form-text text-danger"></small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
<small id="password_error" class="form-text text-danger"></small>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" name="password_confirmation" class="form-control" id="exampleInputPassword1" placeholder="Confirm Your Password">
<small id="password_confirmation_error" class="form-text text-danger"></small>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="save_user" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Modal for edit -->
<div class="modal fade" id="editUser" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add New User</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form id="editForm">
@csrf
<div class="form-group">
<label for="firstNameEdit">First Name</label>
<input type="text" onblur="" name="firstNameUpdate" class="form-control" id="firstNameEdit" placeholder="Enter First Name">
<small id="firstName_edit_error" class="form-text text-danger"></small>
</div>
<div class="form-group">
<label for="middleNameEdit">Middle Name</label>
<input type="text" name="middleNameUpdate" class="form-control" id="middleNameEdit" placeholder="Enter Middle Name">
<small id="middleName_edit_error" class="form-text text-danger"></small>
</div>
<div class="form-group">
<label for="lastNameEdit">Last Name</label>
<input type="text" name="lastNameUpdate" class="form-control" id="lastNameEdit" placeholder="Enter Last Name">
<small id="lastName_edit_error" class="form-text text-danger"></small>
</div>
<input type="hidden" id="userIdEdit" name="userIdEdit" value="">
<div class="form-group">
<label for="emailEdit">Email address</label>
<input type="email" name="emailUpdate" class="form-control" id="emailEdit" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
<small id="email_edit_error" class="form-text text-danger"></small>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="update_user" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).on('click', '#save_user', function(e){
e.preventDefault();
$('#firstName_error').text('');
$('#middleName_error').text('');
$('#lastName_error').text('');
$('#email_error').text('');
$('#password_error').text('');
$('#password_confirmation_error').text('');
var formData = new FormData($('#userForm')[0]);
console.log(formData)
$.ajax({
type: 'post',
enctype: 'multipart/form-data',
url: "{{route('register.create')}}",
data: formData,
processData: false,
contentType: false,
cache: false,
success: function (response){
if(response){
$("#userTable tbody").prepend('<tr><td>'+response.firstName+'</td><td>'+response.middleName+'</td><td>'+response.lastName+'</td><td>'+response.email+'</td></tr>')
$('#userForm')[0].reset();
$('#addUser').modal('hide');
$('#msg-succ').show();
}
}, error: function (reject){
var response = $.parseJSON(reject.responseText);
$.each(response.errors, function(key, val){
$("#" + key + "_error").text(val[0]);
});
}
});
});
$('body').on('click', '#getUser', function (event) {
event.preventDefault();
var user_id = $(this).data('id');
console.log(user_id)
$.get('register-edit/' + user_id, function (data) {
$('#firstNameEdit').val(data.firstName);
$('#middleNameEdit').val(data.middleName);
$('#lastNameEdit').val(data.lastName);
$('#emailEdit').val(data.email);
$('#userIdEdit').val(user_id);
})
});
$(document).on('click', '#update_user', function(e){
e.preventDefault();
$('#firstName_edit_error').text('');
$('#middleName_edit_error').text('');
$('#lastName_edit_error').text('');
$('#email_edit_errorr').text('');
// var formData = new FormData($('#editForm')[0]);
var firstName = $("#firstNameEdit").val();
var middleName = $("#middleNameEdit").val();
var lastName = $("#lasttNameEdit").val();
var email= $("#emailEdit").val();
var user_id = $("#userIdEdit").val();
console.log(firstName)
console.log(middleName)
console.log(user_id)
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: 'post',
enctype: 'multipart/form-data',
url: "{{url('register-update')}}" +'/'+ user_id,
data: {
firstNameUpdate:firstName,
middleNameUpdate:middleName,
lastNameUpdate:lastName,
emailUpdate:email,
},
processData: false,
contentType: false,
cache: false,
success: function (response){
if(response){
$("#userTable tbody").prepend('<tr><td>'+response.firstName+'</td><td>'+response.middleName+'</td><td>'+response.lastName+'</td><td>'+response.email+'</td></tr>')
$('#userForm')[0].reset();
$('#editUser').modal('hide');
$('#msg-succ').show();
}
}, error: function (reject){
var response = $.parseJSON(reject.responseText);
$.each(response.errors, function(key, val){
$("#" + key + "_edit_error").text(val[0]);
});
}
});
});
</script>
</body>
</html>
controller:
<?php
namespace App\Http\Controllers;
use App\Http\Requests\RegisterRequest;
use App\Http\Requests\RegisterRequestUpdate;
use App\Models\User;
use Illuminate\Support\Facades\Request;
class RegisterController extends Controller
{
public function index(){
$users = User::get();
return view('pages.register',compact('users'));
}
public function store(RegisterRequest $request){
$user = User::create([
'firstName' => $request->firstName,
'middleName' => $request->middleName,
'lastName' => $request->lastName,
'email' => $request->email,
'password' => $request->password,
]);
if($user)
return response()->json($user);
else
return response()->json([
'status' => false,
'msg' => 'SomeThing Error Try Again',
]);
}
public function edit($id){
$userData = User::find($id);
return response()->json($userData);
}
public function update(RegisterRequestUpdate $request, $id){
$user = User::find($id);
if (!$user)
return response()->json([
'status' => false,
'msg' => 'SomeThing Error Try Again',
]);
else
$user->update([
'firstName' => $request->firstNameUpdate,
'middleName' => $request->middleNameUpdate,
'lastName' => $request->lastNameUpdate,
'email' => $request->email,
]);
return response()->json($user);
}
}
Request:
<?php
namespace App\Http\Requests;
use Illuminate\Foundation\Http\FormRequest;
class RegisterRequestUpdate extends FormRequest
{
/**
* Determine if the user is authorized to make this request.
*
* @return bool
*/
public function authorize()
{
return true;
}
/**
* Get the validation rules that apply to the request.
*
* @return array
*/
public function rules()
{
return [
'firstNameUpdate' => ['required', 'string', 'max:255'],
'middleNameUpdate' => ['required', 'string', 'max:255'],
'lastNameUpdate' => ['required', 'string', 'max:255'],
'emailUpdate' => ['required', 'string', 'email', 'max:255', 'unique:users'],
];
}
}
Solution 1:
Simply remove the processData: false from your ajax request and it should be working fine.
You can simply do an ajax request with the following code
$.ajax({
type: 'post',
url: "{{url('register-update')}}" +'/'+ user_id,
data: {
firstNameUpdate:firstName,
middleNameUpdate:middleName,
lastNameUpdate:lastName,
emailUpdate:email,
},
success: function (response){
if(response){
$("#userTable tbody").prepend('<tr><td>'+response.firstName+'</td><td>'+response.middleName+'</td><td>'+response.lastName+'</td><td>'+response.email+'</td></tr>')
$('#userForm')[0].reset();
$('#editUser').modal('hide');
$('#msg-succ').show();
}
}, error: function (reject){
var response = $.parseJSON(reject.responseText);
$.each(response.errors, function(key, val){
$("#" + key + "_edit_error").text(val[0]);
});
}
});
You can read more about the processData property here.