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>
To prevent this you need to specify data-ajax=”false” in the form element in page1.
see http://jquerymobile.com/test/docs/forms/forms-sample.html for more information.