I'm trying to prevent a login form submittal so I can query a server, verify a username and password, and only then move on to the home page.
Here's the relevant code:
In login.html:
<form id="login-form">
<input type="text" name="login-username" id="login-username" value="" placeholder="Username" />
<input type="password" name="login-password" id="login-password" value="" placeholder="Password" /><br />
<button id="cab-submit" type="submit" data-theme="a" data-inline="true">Log In</button>
</form>
In app.js:
$("#login-form").live("submit", function(event) {
event.preventDefault();
$.mobile.changePage("main.html", {
transition: "fade"
});
});
I'm an experienced jQuery programmer but have never run into this. The changePage() does work but only happens after the form submits which causes an unnecessary page load.
EDIT: Found the solution.
I had to add data-ajax="false" to the form if I want to handle the form submittal myself. This worked fine.
New markup:
<form id="login-form" data-ajax="false">
<input type="text" name="login-username" id="login-username" value="" placeholder="Username" />
<input type="password" name="login-password" id="login-password" value="" placeholder="Password" /><br />
<button id="cab-submit" type="submit" data-theme="a" data-inline="true">Log In</button>
</form>
Answered my own question. I had to add data-ajax="false" to the form if I want to handle the form submittal myself. This worked fine.
New markup:
<form id="login-form" data-ajax="false">
<input type="text" name="login-username" id="login-username" value="" placeholder="Username" />
<input type="password" name="login-password" id="login-password" value="" placeholder="Password" /><br />
<button id="cab-submit" type="submit" data-theme="a" data-inline="true">Log In</button>
</form>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With