I have the following AJAX script that I am using to return a random PIN number to a user when they register their email address:
HTML
<form class="form-inline" role="form" id="formRegister">
<div class="form-group">
<label class="sr-only" for="srEmail">Email address</label>
<input type="email" name="srEmail" class="form-control input-lg" id="srEmail" placeholder="Enter email">
</div>
<button type="button" name="srSubmit" onClick="getSubmitResponse();" class="btn btn-default btn-lg">Generate PIN</button>
</form>
JS
function getSubmitResponse(){
var emailId = $("#srEmail").val();
$.ajax({
type: "POST",
url: "register-ajax-call.php",
data: { srEmail: emailId, submiType: 'srSubmit'}
})
.done(function( html ) {
if(html.search('PIN:')!=-1){
window.location = "success.php?response="+html;
}else{
$( "#results").empty();
$("#results").append( html );
}
});
}
Question: how can I use button type="submit" rather than type="button" in this situation? My reasoning is that this is better markup for form validation and more consistent behaviours (eg when a user hits ENTER).
I am also using jQuery if that is a solution.
You can use .submit()
method of jQuery like this
$("#formRegister").submit(function(event) {
var form = $( this ),
url = form.attr( 'action' );
var posting = $.post( url, { srEmail: ("#srEmail").val() } );
posting.done(function( data ) {
$("#results").append( html );
});
});
However you should think of giving the validation in the Client side, before submitting it. Since you already use jQuery, I would suggest you to take a look a jQuery.validate
incase your form has more attributes.
You can do like this:
jQuery:
$("#formRegister").on("submit", function() {
$.ajax({
// Rest of code
});
return false;
});
Just use onsubmit event and not onclick event.
http://www.w3schools.com/jsref/event_form_onsubmit.asp
Then in your ajax function just return false; like that the form will not be send like usually and the browser will not refresh the page.
Hope it helps
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.