Issue
When I call ajax to submit form data it reloads the window. how can I stop it?
This is a registration code for customer. I am using a modal to submit data. Please give me some solution for this problem.
My HTML
<form id="newregister">
<div class="form_content clearfix">
<div class="form-group">
<label for="firstname">First Name</label>
<input type="text" class="form-control" " id="firstname_page" name="firstname_page" required>
</div>
<div class="form-group">
<label for="lastname">Last Name</label>
<input type="text" class="form-control" " id="lastname_page" name="lastname_page" required>
</div>
<div class="form-group">
<label for="compnay_name">Company Name</label>
<input type="text" class="form-control" id="compnay_name" name="compnay_name" required>
</div>
<div class="form-group">
<label for="country_name">Country Name</label>
<input type="text" class="form-control" id="country_name" name="country_name" required>
</div>
<div class="form-group">
<label for="email_create">Email address</label>
<input type="text" class="form-control" id="email_create" required name="email_address_page" >
</div>
<div class="form-group">
<label for="phone_no">Phone No</label>
<input type="number" class="form-control" id="phone_no" required name="phone_no" >
</div>
<div class="form-group">
<label for="passwd">Password</label>
<input class="form-control" type="password" id="password_page" name="password_page" >
</div>
<div class="form-group">
<button class="btn btn-default button button-medium exclusive" id="SubmitCreates" onclick="newRegister()"> <span>
<i class="icon-user left"></i>Create an account </span>
</button>
</div>
</div>
</form>
My Javascript
function newRegister()
{
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url:'{{ route('web.new.register') }}',
data:$("#newregister").serialize(),
type:'post',
success:function(response)
{
alert(response);
}
});
}
My Controller
public function newregister(Request $request)
{
return response()->json('true');
}
I also used this jquery method.
My HTML
<div class="form-group">
<button class="btn btn-default button button-medium exclusive" type="submit" id="SubmitCreate" onclick="DoLogin()"> <span>
<i class="icon-user left"></i>Login </span>
</button>
</div>
My Jquery
$(document).ready(function(){
$('#SubmitCreates').on('click', function(){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url:'{{ route('web.new.register') }}',
data:$("#newregister").serialize(),
type:'post',
success:function(response)
{
alert(response);
return false;
}
});
});
});
but this also not working. Please give me some hint or solution to solve this problem.
Solution
You need to prevent default button behavior: https://developer.mozilla.org/ru/docs/Web/API/Event/preventDefault
function newRegister(clickEvent)
{
clickEvent.preventDefault();
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url:'{{ route('web.new.register') }}',
data:$("#newregister").serialize(),
type:'post',
success:function(response)
{
alert(response);
}
});
}
Answered By - zlodes Answer Checked By - Katrina (PHPFixing Volunteer)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.