Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

event.preventDefault() not preventing form submit on jQuery Mobile .live() event

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>
like image 492
Jamon Holmgren Avatar asked Sep 15 '11 23:09

Jamon Holmgren


1 Answers

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>
like image 114
Jamon Holmgren Avatar answered Nov 02 '22 14:11

Jamon Holmgren