php multiple page form

@phpnewbie08Aug 03.2010

Hi I am trying to create a multipage php form that will use javascript to validate each page before moving to the next page. I also wants to allow the user to go back to the previous page if they need to make correction. I have tried using javascript but does not turn out the way I want it to be. If anyone can give me some direction or direct me to some sample it will be great.

to post a comment

PHP

7 Comments(s) _↴

@JeroenHoekstraAug 03.2010 — #I have used hidden tables to mimic the feeling of multiple pages, while in fact the user remains on the same page. The tables all exist within one form element and as such all input values are parsed together. The code is as follows:

head:

[CODE]
 <script type="text/javascript">
 <!--
 function moveto(id, current, check)
 {
 valid = true;
 
   if (check == 1) 
   {
   object = document.getElementById(current);
   valid = validate(object);
   }
 
   if(valid == true) 
   {
   document.getElementById(current).style.display = "none";
   document.getElementById(current).getElementsByTagName("span")[0].innerHTML = "";
   document.getElementById(id).style.display = "block";
   }
   else
   {
   document.getElementById(current).getElementsByTagName("span")[0].innerHTML = "Warning: form incomplete.";
   }
  }
 
  function validate(id)
  {
   input = id.getElementsByTagName("input");
   valid = true;
 
   for(i = 0; i < input.length; i++)
   {
   if(input[i].value == "")
   {
   valid = false;
   } 
   }
 
   return valid;
  }
  -->
 </script>
 [/CODE]

body:

[CODE]
 <form action="" method="post" onsubmit="return validate(document.getElementById('form3'));">
 <table id="form1" border="0">
 <tr>
 <td>name</td>
 <td><input type="text" name="name" /></td>
 </tr>
 <tr>
 <td>surname</td>
 <td><input type="text" name="surname" /></td>
 </tr>
 <tr>
 <td colspan="2"><button type="button" onmouseup="moveto('form2','form1',1);">Next -&gt;</button></td>
 </tr>
 <tr>
 <td colspan="2"><span></span></td>
 </tr>
 </table>
 
  <table id="form2" style="display: none;" border="0">
   <tr>
   <td>username</td>
   <td><input type="text" name="username" /></td>
   </tr>
   <tr>
   <td>password</td>
   <td><input type="password" name="password" /></td>
   </tr>
   <tr>
   <td>repeat password</td>
   <td><input type="password" name="repeatPassword" /></td>
   </tr>
   <tr>
   <td><button type="button" onmouseup="moveto('form1','form2',0);">&lt;- Back</button></td>
   <td><button type="button" onmouseup="moveto('form3','form2',1);">Next -&gt;</button></td>
   </tr>
   <tr>
   <td colspan="2"><span></span></td>
   </tr>
  </table>
 
  <table id="form3" style="display: none;" border="0">
   <tr>
   <td>E-mail address</td>
   <td><input type="text" name="email" /></td>
   </tr>
   <tr>
   <td><button type="button" onmouseup="moveto('form2','form3',0);">&lt;- Back</button></td>
   <td><input type="submit" name="submit" value="submit" /></td>
   </tr>
   <tr>
   <td colspan="2"><span></span></td>
   </tr>
  </table>
 </form>
 [/CODE]

The code is a bit unconventional but it works and has been validated as xhtml 1.0 strict, so it seems to be clean html. Hope this helps.

@tirnaAug 03.2010 — #Hi I am trying to create a multipage php form that will use javascript to validate each page before moving to the next page. I also wants to allow the user to go back to the previous page if they need to make correction. I have tried using javascript but does not turn out the way I want it to be. If anyone can give me some direction or direct me to some sample it will be great.[/quote]

All that can be done with javascript.

You can validate all the inputs on page 1 of the form and if they are all correct transfer them to page 2 of the form using a query string appended to the url for page 2 or cookies. You repeat this process for each page in your form.

On the last page of your form, you transfer all the inputs from the previous pages (transfered via a query string or cookies) to hidden inputs and then when the user clicks the submit button, all the hidden inputs along with any additional inputs on the last page are sent to the form processing script.

Each page on your form could have a simple set of links to either just the next or previous page or to any page in your form.

@JeroenHoekstraAug 04.2010 — #Tirna what you suggest might work, but I think the way I did it is much less complicated and does the same thing. Unless there is something that's not quite the way it should be i'm always open for suggestions.

@tirnaAug 04.2010 — #No problem.

To be honest, I didn't look closely at your code. I am assuming you tested it before posting, that it works and that it does what the OP requires. If that is so, I have no issue with that at all.

I was just offering a possible way of setting up a multi-page form based on how I would do it.

I am not saying my suggestion is the only way or is the best way for the OP.

[B]note:[/B] I deliberately say in my signature below each of my posts that anything I post is only my opinion and strictly general in nature.

@JeroenHoekstraAug 04.2010 — #I think both approaches will work. The only difference is that my approach requires people to have Javascript turned on, while you're way doesn't. So in a way you're approach is a little bit better in terms of compatibility. The code I posted has indeed been tested and validated using the W3C validator.

@Inferno_str1keAug 04.2010 — #That is the one issue though - requiring JavaScript is a dangerous game to play as you have no idea whether the user will have JS turned on. If they don't and your validation requires it then the best case is that the form won't submit, worst case is that they submit and bypass all your validation.

The best way to design it would be as three PHP functions that generate the forms, each inserting data from previous forms as hidden elements with the same element names. Then write another three functions to validate each set of inputs. Each time you submit the form, run the necessary validation functions and then run the function for the next form. You'll now have a way that works without JavaScript.

From this point you can write JS in to take over the forms. Simply write a function that submits all the data in a form to a PHP script via an XmlRequest (or do the sensible thing and just use jQuery). If it validates, another XmlRequest can fetch the HTML for the next form and write it over the first form, with the extra data included. This way you'll get the full JS experience whilst having a good way to fall back and a much better structure to your code.

As a final note, passing the validator shows that your code works according to XHTML specs - things like accessibility (use of forms without JavaScript) and semantics (not using tables for things that aren't tables) won't be considered. If you want that table to be semantic use the following structure:
[code=html]<label for="input">Input description</label><input type="text" name="input"/><br/>[/code]
Coupled with the following CSS:

[CODE]label {float: left; width: 200px; text-align: right}
 input {float: left; width: 200px; margin-left: 10px;}
 br {clear: left;}[/CODE]

This creates a nicely aligned form whilst still using proper semantic markup. If you don't like the BR tag you can stick each one in a DIV and display them as blocks, but BR is harmless if used properly.

@tirnaAug 04.2010 — #That is the one issue though - requiring JavaScript is a dangerous game to play as you have no idea whether the user will have JS turned on........[/quote]

I agree that catering for javascript disabled browsers might have to be considered by some developers but I'm not convinced it is true to say you have no idea whether the user will have js on or not.

According to the w3schools browser stats in 2008, 95% of users had javascript enabled and imo that figure is much higher nowadays.

So from my point of view, rather than say you have no idea of whether js is turned on or not, it is fairer to say that in the absence of any other data, it is reasonable to expect that there is at least a 95% probability that a user's browser will have js enabled.

Also in #PHP _↴

help replacing split() please.Define an Array PHP script for translation quote calculation

Success!

Help @phpnewbie08 spread the word by sharing this article on Twitter...

Tweet This

php multiple page form

7 Comments(s) _↴

Also in #PHP _↴

Success!

Social

Version

php multiple page form

7 Comments(s) ↴

Also in #PHP ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

7 Comments(s) _↴

Also in #PHP _↴