I have been trying to fix this code for hours, and I still cannot make it work.
This is rather basic:
I am building an hybrid iOS app, and there is an area which requires the user to log into our system, and I use Hammer.js to handle touch events.
So, on the page, I have a form and a submit button. And in my JS app file, there is the ajax requests to my server to check credentials.
Though, it doesn't work: my form keeps reloading the page, whatever I do. And as it refreshes the window, my ajax request doesn't get any chance to work.
Here is the HTML form:
<div class="login-form-parent">
<div class="login-form">
<section>
<h2>Sign in to GraphiX Studios CPM</h2>
<form name="loginForm" id="login" method="post" submit="#" >
<fieldset>
<input type="text" name="login" id="loginEmail" placeholder="Username" autocapitalize="false" autocorrect="false" >
<input type="password" name="password" id="loginPass" placeholder="••••" >
<aside>
<label for="rememberLogin">Remember me</label>
<input type="checkbox" name="rememberLogin" id="rememberLogin" >
</aside>
<footer>
<input type="submit" name="submit" id="submitLogin" value="Login" >
</footer>
</fieldset>
</form>
</section>
</div>
</div>
The two <div>
, the <aside>
, <section>
and <footer>
tags are only here for styling purposes.
And here is the JS code:
var loginEl = document.getElementById('submitLogin');
Hammer(loginEl, {tap_max_touchtime: 1000}).on("tap", loginFunctions);
function loginFunctions() {
var usernameValidation = $("input#loginEmail").val();
if (usernameValidation == "") {
$("#login_error").show();
$("input#login").focus();
return false;
}
var passwordValidation = $("input#loginPass").val();
if (passwordValidation == "") {
$("#password_error").show();
$("input#password").focus();
return false;
}
if (usernameValidation != "" && passwordValidation != "") {
$.submit(function() {
var username = $('#loginEmail').val();
var password = $('#loginPass').val();
$.ajax({
url: 'loginProcessing.php',
type: 'POST',
data: {
user: username,
pass: password
},
success: function(response) {
if(response == '1') {
// Success
alert('Success');
} else {
// Error
alert('Failed');
}
}
});
return false;
});
}
return false;
}
I can't debug that on my own: I've been trying for hours different solutions and I've already searched among Google and Stack Overflow resources.
Feel free to clean up or improve the JS code.
try using:
event.preventDefault();
instead of return false, in the start of your $.submit function
将<input type="submit" name="submit" id="submitLogin" value="Login" >
的<input type="button" name="submit" id="submitLogin" value="Login" >
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.