e.preventDefault() does not work. AJAX / Laravel 5.4 - php

Question

I have an Ajax call which sends user form input to be processed in the back end. The controller in the back-end sends back result as JSON, when the form is submitted the page reloads and redirects to a blank page with raw JSON instead of the json being picked up by AJAX.
This is the Ajax call:
<script type="text/javascript">
$(document).ready(function(){
$('form').on('submit', '#topup-form', function(e){
e.preventDefault();
$.ajax({
url: $('form').attr('action'),
method: 'post',
data: $('form').serialize(),
success: function(result){
alert(result);
},
error: function(errorData){
alert(errorData);
}
});
});
$.ajaxSetup({
headers: {
'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
}
})
});
</script>
This is the Laravel controller, if the validation fails it sends Json, if the user is authenticated, it redirects the user, else it returns 401 asking user to login.
public function topupPost(Request $request) {
$validator = [
'topupAmount'=> 'required|integer|between:10,500',
'phonenumber'=> 'required|regex:/^05[602][0-9]{7}$/',
];
$inputs = $request->all();
Log::info($inputs);
$validator = Validator::make($inputs, $validator);
if($validator->fails()){
return Response::json([
'error' => true,
'message' => $validator->messages(),
'code' => 400
], 400);
}
elseif (Auth::check()) {
return view('pages.checkout', compact('inputs'));
}
return Response::json([
'error' => true,
'message' => "Please login first",
'code' => 401
], 401);
}
What happens is that nothing pops up as an alert but the user is redirected to a page with the raw JSON.

Answer 1

I had faced a similar issue
I solved it by changing the submit button type to "button" so that the form does not auto submit. my ajax code is below:
$(document).ready(function() {
$("#submit").click(function() {
var loginForm = $("#contactForm");
var formData = loginForm.serialize();
/*alert(formData);*/
$.ajax({
url: /*you URL*/,
type:'post',
data:formData,
success:function(data){
//alert(data); //for redirecting instead of alert try below code
if(data == "") { //True Case i.e. passed validation
alert('error')
}
else { //False Case: With error msg
alert(data); //$msg is the id of empty msg
}
},
error: function (data) {
/*console.log(data);*/
alert(data);
}
});
});
/*alert('Successfully Loaded');*/
});
also your php response handle seems fine. hope this helps