how to prevent jquery mobile page refresh on form submit?

Question

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.

score 2 · Answer 1 · edited May 23 '17 at 12:05

2

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

edited May 23 '17 at 12:05

Community

1
1

answered Jul 03 '13 at 22:01

Gajotres

57,309
16
102
130

It still refreshes the page. It displays the text dynamically from the input, but then you see a quick "?" appended to the URL in the browser, and the page refreshes. – Joe's Ideas Jul 04 '13 at 00:48
Also tried the method in your ref'd answer, still refresh. Weird. Maybe it's a sign for me to use angular :) – Joe's Ideas Jul 04 '13 at 00:56

abdu · Accepted Answer · 2013-07-04T02:14:57.897

2

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

edited Jul 04 '13 at 02:14

answered Jul 04 '13 at 02:09

abdu

667
5
14

1

jquery mobile is a bit confusing, you should also get familiar with page transitioning in jq mobile, the – abdu Jul 04 '13 at 02:50
thx for the advice. This worked... but only after I embedded the script in the html, rather than ref'ing app.js. That is so strange to me. For some reason, it refreshes the screen if I have my js in an external file. – Joe's Ideas Jul 04 '13 at 02:51
if this solution worked then close the question by accepting an answer so other people can see it as answered – abdu Jul 04 '13 at 08:44

score 1 · Answer 3 · answered Feb 04 '14 at 18:35

1

try event.preventDefault();

instead of return false;

answered Feb 04 '14 at 18:35

This worked for me, but I had to be conscious of where I put it. The statement worked by being placed after the .post(); line, not within it. – Daydah Aug 31 '14 at 13:27

how to prevent jquery mobile page refresh on form submit?

3 Answers3