CODEWITHSUNDEEP
jquery-mobile
Joe's Ideas
Joe's Ideas

Reputation: 540

how to prevent jquery mobile page refresh on form submit?

Update: abdu's answer worked, but only if I embedded the script in my index.html file (rather than including it in a linked app.js file like I had)...

I'm creating some simple mobile apps in jquery mobile and angularjs (not together), to see which I want to build on...

I'm having a problem in jquery mobile. When you submit the form, instead of simply dynamically updating the list, it refreshes and clears the page:

<div id="home" data-role="page">

<div data-role="content">
    <form id="form1"> 
        <input id="list-text" type="text" placeholder="enter text here...">
        <button id="button1" onclick="addToList()" >Add</button>
    </form>

    <ul id="the-list" data-role="listview"></ul>
</div>


function addToList() {
    var newText = $('#list-text').val();
    $('#the-list').append('<li>' + newText + '</li>');
    // will be updating localStorage here

    $('#list-text').val(' ');

}

I've tried researching this and still don't understand why.... Maybe I need more understanding of forms and jquery.

Upvotes: 1

Views: 4617

Answers (3)

user1522451
user1522451

Reputation:

try event.preventDefault();

instead of return false;

Upvotes: 1

abdu
abdu

Reputation: 667

You can either move the button out of the form or stop form from submitting at all, example

$("#form1").on('submit',function(){return false;});

That will stop the refresh.

Also I would recomend using jquery for handling click events, instead of onclick. example

$("#button1").on('vclick',function(){});

If you use click handlers on mobile devices that will delay the click for 200ms, which is a lot, so use vclick, you can read about vclick here

Upvotes: 2

Gajotres
Gajotres

Reputation: 57309

Add this attribute :

data-ajax="false"

to your form. It will prevent jQuery Mobile from hijacking form handling.

Also read my other answer on how form should be handled with jQuery Mobile: https://stackoverflow.com/a/15205612/1848600

And a link to an official documentation: http://jquerymobile.com/demos/1.2.0/docs/forms/forms-sample.html

Upvotes: 2

Related Questions