Home/ Questions/Q 8742315
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T11:28:43+00:00

i have an issue with a form on a jquery mobile site with two

  • 0

i have an issue with a form on a jquery mobile site with two or more pages.

one page contains a form and when clicking the submit button of this form, i want to submit the form data and then stay right on this page. so i added the id of that page to the form’s action attribute. (<form action="#two">).

but unfortunately this doesn’t seem to work. when submitting the form data, always the first page of the actual file is loaded, even if the browser’s url seems right (the correct id was appended to it).

and it’s getting even worse. because i added the id to the form’s action attribute, jqm loads the first page of the file but apparently thinks to be on the second page, so the link pointing to the page with the form won’t work anymore.

one thing resolved this issue: adding data-ajax="false" to the form element forces jqm to stop ajax-based page handling for this form and when clicking the submit button i end up on the right page, but i do not want to reload the entire page so that’s no solution.

does anyone know what’s going on here and has encountered the same issue? feel free to try the appended example, i hope someone can solve this.

<!DOCTYPE html> 
<html> 
<head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head> 
<body> 

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

    <div data-role="header">
        <h1>First page</h1>
    </div><!-- /header -->

    <div data-role="content">   
        <p>Hello world</p>
        <p><a href="#two">Link to second page</a></p>   
    </div><!-- /content -->

</div><!-- /page -->


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

    <div data-role="header">
        <h1>Second page</h1>
    </div><!-- /header -->

    <div data-role="content">   

        <form action="#two">
            <button type="submit">Submit</button>
        </form>

    </div><!-- /content -->

</div><!-- /page -->

</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Change your input submit tag to call a function.

    <input type="submit" onclick="submitThis()" />

    Add this logic to your submit function which will call the submit url through ajax and return false to avoid physically submitting form.

    var submitThis = function() {

// get form data using jQuery, and call the link using $.ajax()

return false; // This will avoid submitting the page
}

    –EDIT–
    Instead or returning false, you can also use preventDefault() method

            $("#submit").submit( function (e) {
                e.preventDefault();
               // do your task
        });
    • 0