I have a multi step form. In step 1 the user needs to insert info like his name, surname, etc. When the user clicks in "go to step 2" is send an ajax post request to the controller method storeUserInfo to validate the information introduced by the user.
But the ajax is not working, the ajax part of the code is not executing do you know where is the issue?
step1 html:
<div class="tab-pane fade show active clearfix" id="step1" role="tabpanel" aria-labelledby="home-tab">
<h6>User Info</h6>
<form method="post" id="step1form" action="">
{{csrf_field()}}
<div class="form-group font-size-sm">
<label for="name" class="text-gray">Name</label>
<input type="text" required class="form-control" value="{{ (\Auth::check()) ? Auth::user()->name : old('name')}}">
</div>
<!-- other form fields -->
<input type="submit" id="goToStep2" href="#step2"
class="btn btn-primary btn float-right next-step" value="Go to step 2"/>
</form>
</div>
jQuery:
$('#goToStep2').on('click', function (event) {
event.preventDefault();
var custom_form = $("#" + page_form_id);
$.ajax({
method: "POST",
url: '{{ route('products.storeUserInfo',null) }}',
data: custom_form.serialize(),
success: function (data, textStatus, jqXHR) {
setTimeout(function () {
window.location.reload();
}, 3000);
},
error: function (data) {
var errors = data.responseJSON;
$.each(errors['message'], function (index, value) {
});
}
});
});
});
PaymentController method:
public function storeUserInfo(Request $request, $id, $slug = null){
//dd($request);
$request->validate([
'buyer_name' => 'required|max:1|string',
'buyer_surname' => 'required|max:255|string',
'buyer_email' => 'required|max:255|email',
'name_invoice' => 'required|max:255|string',
'country_invoice' => 'required|max:100|string',
]);
return redirect(route('products.presentPaymentMethods',['id' => $id, 'slug' => $slug]));
}
Route for the post request:
Route::post('/product/{id}/{slug?}/payment/storeUserInfo', [
'uses' => 'PaymentController@storeUserInfo',
'as' =>'products.storeUserInfo'
]);