jquery mobile form submit resets form when trying to prevent submission

Question

so I have a form and if certain fields are empty of invalid, it doesn't submit the form, and it spits out an alert() telling them to fix it. The problem I am facing is that it resets the form and all the data the user has added disappears. Since my form is too big, I'll just show you my jQuery function:

$('#microForm').live('submit', function(){
                if ($('#barcode').val() != '') {
                    insertForm();
                } else {
                    alert('Insert Barcode');
                    return false;
                }
});

<form id="microForm">

I am trying this on an android app, with phonegap - inserting a form to a local database table (i.e sqlite).

Any help would be appreciated. Thanks.

I didn't use jQuery mobile for a while so I'm not sure: can the problem be that "return false" force the page to reload? Can you try to remove it? (just an idea) — Ciack404, Feb 07 '13 at 11:19
@Ciack404 using either `e.preventDefault` and `return false` still makes the page reload — SNpn, Feb 07 '13 at 11:22
You should use JQM popup or simpleDialog instead of alert. I don't know if that will fix the problem but that's the right way to show messages. — Ciack404, Feb 07 '13 at 11:35

score 1 · Answer 1 · answered Feb 07 '13 at 11:55

This should work, take a look at an example I made for you: http://jsfiddle.net/Gajotres/bGdM6/

You should use on instead of live:

$('#microForm').on('submit', function(event){
    if ($('#barcode').val() != '') {
        alert('Submit');
    } else {         
        alert('Insert Barcode');
        return false;
    }
});

Change between live and on to see how it works.

score 1 · Accepted Answer · answered Feb 07 '13 at 14:08

I made a small adjustment to @Gajotres jsFiddle:

http://jsfiddle.net/bGdM6/1/

Instead of using the submit on the form you can check the submit button click/tap event and then submit the form if all values you need are there

JS:

$('#submit-btn').on('click', function(event) {
    if ($('#barcode').val() != '') {
        alert('Submit');
        $('#microForm').submit(); // <-- submit the form
    } else {
        alert('Insert Barcode');
        event.preventDefault();
        return false;
    }
});

HTML

<div data-role="page" id="index">
    <div data-theme="a" data-role="header">
        <h3>
            First Page
        </h3>
        <a href="#second" class="ui-btn-right">Next</a>
    </div>

    <div data-role="content">
        <form id="microForm">
            <input type="text" value="" id="barcode"/>
            <input type="submit" id="submit-btn" value="Submit"/>
        </form>
    </div>

    <div data-theme="a" data-role="footer" data-position="fixed">

    </div>
</div>

sweet that worked! is there a difference between `e.preventDefault` and `return false`? — SNpn, Feb 07 '13 at 23:18
@SNpn http://stackoverflow.com/questions/2017755/whats-the-difference-between-e-preventdefault-and-return-false — Phill Pafford, Feb 08 '13 at 13:12
Sorry to dig this back up, but when you remove the 'submit' event, you won't be able to submit the form by pressing the 'go' button an a smartphone. Is there an alternative for this? — Jordec, May 12 '16 at 11:02

jquery mobile form submit resets form when trying to prevent submission

2 Answers2