Question

I have just started to work with jquery mobile, and things are going swimmingly, but I have hit a wall. I have a form that I am trying to submit (post), and upon form submission, I would like the phone to behave just as a browser would behave. I want it to actually go to the page that I specify.

Here is the scenerio

I’m on the intro page. this intro page has 2 different “jquery mobile pages” on it. By “jquery mobile pages”, I am talking about 2 different

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

The first of these two pages is a teaser page. It shows some of the information that the user wants to see, but not all. The url (the div id) to the first page is: bla.com/intro.php#first

The second of these 2 pages is a simple registration page. This registration page contains a form. The url (or div id) to the second page is: bla.com/intro.php#second The form looks similar to the following:

 72  <form data-ajax="false" action="#" id="signup" method="post">
 73     <input type="hidden" name="leadID" id="leadID" value="<?=$_GET['id']?>" />
 74     <input type="hidden" name="action" id="action" value="validate" />
 75     <input type="hidden" name="blaID" id="blaID" value="<?=$propertyID?>" /    >
 77     <ul id="regList" style="margin: 15px 2px 17px;">
 78        <li>
 79            <input type="text" placeholder="First Name*" id="firstName"
 80          </li>
 81     </ul>
 82   </form>

The form does submit, and it is a post submission, and the post data is present. I know this because I am using the chrome dev tools to inspect the post submission.

Here is the jquery mobile code that I am using to validate, and (attempt to) forward the page upon validation:

 10     $('.submit').click(function(e){
 11 
 12     var isValid;
 13     isValid = validateSignupFields($(this).attr('entry'));
 14 
 15     if( isValid === true )
 16     {
 17         //$('#signup').submit();
 18         $.mobile.changePage(
 19         {
 20             url: "fullInformation.php",
 21             changeHash: true,
 22             reloadPage: true,
 23             type: "post",
 24             data: $("signup").serialize()
 25         });
 26     }
 27     
 28     }); // end signupBtn click

As I said earlier, the page does submit, and the next page does load, but the url does not change. The animation occurs, and the address bar still says bla.com#second. Further, the fullInformation.php page is all jumbled up, and there is no styling. I am wondering how I can submit the page, and have it act like the browser and just go to the following url instead of staying on the same url. Thanks!

Answer 1

You are missing the required to argument (the first argument):

$.mobile.changePage( "fullInformation.php", {
    type: "post", 
    data: $("signup").serialize()
});

Also, replace url with dataUrl

see docs