How to submit a popup form with ajax request in laravel - php

Question

My Ajax Code
Query(document).ready(function(){
jQuery('#password_form').click(function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
jQuery.ajax({
url: "{{ url('/changepassword') }}",
method: 'post',
data: {
password: jQuery('#password').val(),
new_password: jQuery('#new_password').val(),
password_confirmation: jQuery('#password_confirmation').val()
},
success: function(result){
console.log(result);
}});
});
});
My Controller:
public function changepassword(Request $request){
$user = Auth::guard()->user();
$request_data = $request->All();
$validator = $this->admin_credential_rules($request_data);
if($validator->fails()) {
$errors = $validator->errors();
$errors = json_decode($errors);
return response()->json([
'success' => false,
'message' => $errors
], 422); } else {
$current_password = $user->password;
if(md5($request_data['password']) == $current_password) {
$user_id = $user->id;
$obj_user = User::find($user_id);
$obj_user->password = md5($request_data['new_password']);
$obj_user->save();
return \Illuminate\Support\Facades\Redirect::to('mujucet')
->with("modal_message_success", "Password has been changed successfully");
} else {
return \Illuminate\Support\Facades\Redirect::to('mujucet')
->with("modal_message_danger", "wong old password");
}
}
}
I am have a popup a there is three fields
1- password
2- new_password
3- password_confirmation
Before ajax my form was submitting but i want to submit form with ajax so my page should not be reload and my success and error message should be shown on my popup form but here when i hit button its reload and also values are not submitted.
I dont know what is wrong with my ajax request.
Your help will be highly appreciated!
Thanks in advance please need your help.

Answer 1

$("#myform").submit(function(e){
e.preventDefault();
//put your ajax here
});
You need to prevent the form from submitting using the code above.

Answer 2

Your popup submit button should be button not submit
<button type="button" class="btn btn-primary" title=""
id="btn_submit">add</button>
<script>
$('#btn_submit').click(function () {
var type = $('#contain-type').val(); // take your all values you want to send
/*ajax call*/
$.post(baseUrl + '/admin/confirmation-mail(your route)',{"_token": "{{
csrf_token() }}", id: parameter, subject: parameter},
function (data, status) {
alert(data);
});
)};
</script>
Controller
public function name(Request $request){
dd(request->all()); //add your php code
}