Reputation: 1593

php/jquery-mobile: Second page not running validation on two page form

I'm new to php and am trying to make a very simple two page form. Any help or guidance would be very appreciated!

Problem:

The second page does not run error validation when coming to it from the first page.
Both pages run error validation correctly URL's entered directly

Setup:

Page 1 one is HTML. It POSTS to Page2.
Page 2 is php and the data from Page 1 is stored in an input field

Live example:

http://www.linplusg.com/page1.html

In IE the Page 2 URL after coming from Page 1 looks to be incorrect: http://www.linplusg.com/page1.html#/page2.php

In FF and Chrome the URL looks fine but I think there's a flicker/refresh happening.

Does something else happen besides just opening the page when doing a POST to a page? Does something value get stored the new fields? Am I doing the form action wrong? Dazed and confused...

Thank you so much for any help or suggestions. I've been searching around for answers all night and my brain feels like jello. It seems like I'm missing something simple?!

Page1 Code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="css/my.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
        </script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js">
        </script>
        <script>
          $(document).ready(function(){
            $("#initialForm").validate();
            });
        </script>
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-role="content">
              <form id="initialForm" method="post" action="page2.php">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput3">
                            Zip Code
                        </label>
                        <input name="zip" id="zip" maxlength=5  value="" type="text" class="required" />
                    </fieldset>
                </div>
                <input type="submit" data-theme="e" value="Submit" />
              </form>  
            </div>
        </div>
    </body>
</html>

Page 2 code

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title>
        </title>
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
        <link rel="stylesheet" href="css/my.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
        </script>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery.mobile/1.2.0/jquery.mobile-1.2.0.min.js">
        </script>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js">
        </script>    
        <script>
          $(document).ready(function(){
            $("#fullForm").validate();
            });
        </script>
    </head>
    <body>
        <!-- Home -->
        <div data-role="page" id="page1">
            <div data-role="content">
              <form id="fullForm" method="get" action="">
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <input name="zip" id="zip"  value="<?php echo $_POST["zip"]; ?>" type="" />
                    </fieldset>
                </div>
                <div data-role="fieldcontain">
                    <fieldset data-role="controlgroup" data-mini="true">
                        <label for="textinput3">
                            First Name
                        </label>
                        <input name="first_name" id="first_name" placeholder="" value="" type="text" class="required"/>
                    </fieldset>
                </div>
                <input type="submit" data-theme="e" value="Submit" />
              </form>  
            </div>
        </div>
    </body>
</html>

Upvotes: 1

php/jquery-mobile: Second page not running validation on two page form

Answers (3)

Related Questions