Page 1 of 1

Multi-page Form Question

Posted: Fri Jul 11, 2014 3:32 am
by Vishal1R
Hi Sir/Mam,

I have been facing problem for past weeks.

My Problem is :

I have three tabs in on same page. Value on 1st page and last 3rd page is retain or you may say preserved not vanish but middle tabs variables got vanishes. How and Why it happens ?

Here is my code:

Code: Select all

<?php
//session_start();

error_reporting(0);

?>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

<script>
 
function sub(){
if(document.getElementById("nom").value != "" && document.getElementById("addr").value != ""){
document.forms['frm1'].submit();
 }
}
function sub1(){
 if(document.getElementById("tel1").value != "" && document.getElementById("gen").value != ""){
 document.forms['frm2'].submit();
 }
}

$(document).ready(function(){

$( "#tabs" ).tabs();
 
/* $("#frm2").mouseover(function(){
  var yo = document.getElementById("t2");
  yo.style.background = "";
 });
 $("#frm3").mouseover(function(){
  var yo = document.getElementById("t3");
  yo.style.background = "";
 });
 $("#frm1").mouseover(function(){
  var yo = document.getElementById("t1");
  yo.style.background = "";
 });
 $("#tabs-1").mouseover(function(event){
  $("#t2").hide(".lalu");
  $("#t3").hide(".lalu");
 });
 $("#tabs-2").mouseover(function(){
  $("#t3").hide(".lalu");
 });
 $("#t1").click(function(){
  $("#t2").show(".lalu");
  $("#t3").show(".lalu");
  $("#tabs-1").unbind("mouseover");
 });
 $("#t2").click(function(){
  $("#tabs-2").unbind("mouseover");
 });
 */
});

</script>

</head>
<body>

<div id="tabs">

<ul>
<li><a href="#tabs-1" id="t1">Step 1</a></li>
<li><a href="#tabs-2" id="t2">Step 2</a></li>
<li><a href="#tabs-3" id="t3">Finish</a></li>
</ul>

<div id="tabs-1">
<form method="post" action="#tabs-2" id="frm1">
Enter Name:<input type="text" id="nom" name="name" value="<?php echo $_COOKIE['name']; ?>"><br>
Enter Address:<textarea rows="2" cols="10" name="address" id="addr"><?php echo $_COOKIE['address']; ?></textarea><br>
<input type="button" name="submit1" id="sub1" value="Continue>>" onclick="sub()">
</form>
</div>

<div id="tabs-2" class="lalu">
<form method="post" action="#tabs-3" id="frm2">
<?php
print_r($_COOKIE);
setcookie('name',$_POST['name'], time()+3600);
setcookie('address',$_POST['address'], time()+3600);
?>
Enter Telephone: <input type="text" id="tel1" name="tel" value="<?php echo $_COOKIE['tel']; ?>"><br>
Enter Gender: <input type="text" id="gen" name="gender" value="<?php echo $_COOKIE['gender']; ?>"><br>
<input type="button" name="submit2" id="sub2" value="Continue>>" onclick="sub1()">

</form>
</div>

<div id="tabs-3" class="lalu">
<form method="post" action="" id="frm3">
<?php
print_r($_COOKIE);
setcookie('tel',$_POST['tel'], time()+3600);
setcookie('gender',$_POST['gender'],time()+3600);
?>
Enter Email: <input type="email" name="text" value="<?php echo $_COOKIE['email']; ?>"><br>
Enter Age: <input type="text" name="age" value="<?php echo $_COOKIE['age']; ?>"><br>
<input type="button" name="submit3" id="sub3" value="Finish">
</form>
</div>

</div>

</body>
</html>

Regards,
Vishal Sharma

Re: Multi-page Form Question

Posted: Fri Jul 11, 2014 6:15 am
by Celauran
I have moved this topic to its own thread. Please don't hijack other threads.

Re: Multi-page Form Question

Posted: Fri Jul 11, 2014 1:16 pm
by Christopher
I think the problem is that your three table are three different forms. Maybe wrap them in one form?