I cannot explain the following:
I have the following code. This code works fine in Firefox and Chrome, but in IE, users have to press the submit button twice to login.
file example1.js
$(document).ready(function(){
$('body').on("submit", "#signinForm", function( event ) {
event.preventDefault();
target = (event.currentTarget) ? event.currentTarget : event.srcElement;
bp_ajax(callback_login_succes, target);
});
var callback_login_succes = function(data, textStatus, xhr) {
$(jQuery.parseJSON(JSON.stringify(data))).each(function() {
if (this.code !== 'success') {
// give the response to a validate function
bp_validate(data);
} else {
// success so redirect
setTimeout("document.location.href='/"+lang+"/index/';",0);
}
});
}
});
In a seperate js file I have:
var bp_ajax = function(cb, form) {
$.ajax({
type: 'post',
url: '/ajax/validation.php',
data: $(form).serialize(),
success: cb
});
}
HTML
<form id="signinForm" action="#" role="form" autocomplete="off" method="post" enctype="application/x-www-form-urlencoded">
<input name="login_usernameemail" id="login_usernameemail" class="form-control" placeholder="Username">
<input type="password" name="login_pass" id="login_pass" class="form-control" placeholder="Password">
<button id="btnSignin" type="submit" class="btn btn-primary">Login</button>
</form>
Not sure exactly why this is happening, but a few suggestions may help clean it up
click
on#btnSignin
instead ofsubmit
type="submit"
on your button withtype="button"
(won't try to submit the form, so you don't have to cancel the event)This way you are not writing a button that submits a form, then coding to make it not do that - you are just writing a button that fires an event when it's clicked.