Jump to content


Photo

form with multiple steps


  • Please log in to reply
8 replies to this topic

#1 digitalgod

digitalgod
  • Members
  • PipPipPip
  • Advanced Member
  • 374 posts

Posted 12 October 2006 - 05:42 PM

hey guys was just wondering what would be the best way to creating a form that has multiple steps.

right now I'm using sessions so when a user clicks next it simply adds the step number to that session, so if a user is on step 1 and clicks next (After filling up everything) $_SESSION['form_step'] will be equal to 2.

Only problem with that is if a user clicks on back in his browser it won't take him back to step 1...

any suggestions on what I can do?

#2 komquat

komquat
  • Members
  • PipPipPip
  • Advanced Member
  • 130 posts
  • LocationHoughton, MI

Posted 12 October 2006 - 06:00 PM

Put a button in to go back that will reset $_SESSION['form_step'] to what you want it to?

May be a fix

#3 digitalgod

digitalgod
  • Members
  • PipPipPip
  • Advanced Member
  • 374 posts

Posted 12 October 2006 - 06:08 PM

I already thought about that and it works but as you know most users will hit back on their browsers first.

#4 komquat

komquat
  • Members
  • PipPipPip
  • Advanced Member
  • 130 posts
  • LocationHoughton, MI

Posted 12 October 2006 - 06:14 PM

I am not good enough for aquick fix, I would do an intermediate page that tells them to use you button, or have the intermediate page ask if they are sure they want to start over when that happens?

#5 dayo

dayo
  • Members
  • PipPip
  • Member
  • 10 posts

Posted 12 October 2006 - 06:34 PM

I already thought about that and it works but as you know most users will hit back on their browsers first.


Why not try adding a discrete message telling them not to use the back button on the browser? I have been on site with such messages.

#6 digitalgod

digitalgod
  • Members
  • PipPipPip
  • Advanced Member
  • 374 posts

Posted 12 October 2006 - 07:43 PM

I will do all that but I'd really like finding a fix for this.

#7 craygo

craygo
  • Staff Alumni
  • Advanced Member
  • 1,973 posts
  • LocationRhode Island

Posted 12 October 2006 - 08:01 PM

when a page is loaded check the session value. if it is lower than the one you want rewrite it example

<?php
session_start();
// page number and the session value you want
$session_page = 2;
if($_SESSION['session_value'] < $session_page){
$_SESSION['session_value'] = $session_page;
}
?>

put this at the top of all your pages and give values to $session_page and it will set it. If the person goes back to a page the session value will remain the same.

Ray

#8 digitalgod

digitalgod
  • Members
  • PipPipPip
  • Advanced Member
  • 374 posts

Posted 12 October 2006 - 08:40 PM

thanks craygo but it's only 1 page

I used a switch statement to determine what step the user is at

switch($_SESSION['form_step']) {

case "1"
//prints 1st step
//etc

#9 Barand

Barand
  • Moderators
  • Sen . ( ile || sei )
  • 18,021 posts

Posted 13 October 2006 - 10:38 PM

Here's a way to emulate multiple form pages in a single HTML page  using CSS and javascript. Although it looks like several forms, all the fields are POSTed in single form

<html>
<head>
<meta name="generator" content="PhpED Version 4.5 (Build 4513)">
<title>sample multipage form</title>
<STYLE type='text/css'>
DIV {
    width: 500;
    border: 1px solid silver;
    padding: 8px;
    position: absolute;
    top: 240;
}
DIV.formpage {
    height: 100;
    visibility: hidden;
    position: absolute;
    top: 110;
}
</STYLE>

<script language='javascript'>

         var page = 1;
         
         function changepage(incval) {
             var oldid = "F" + page;
             page += incval;
             if (page < 1) page = 1;
             if (page > 3) page = 3;
             var newid = "F" + page;
             var oldpage = document.getElementById(oldid);
             var newpage = document.getElementById(newid);
             oldpage.style.visibility = "hidden";
             newpage.style.visibility = "visible";
         }
         
</script>
</head>
<body>
<FORM method='POST'>
        <DIV class='formpage' id='F1' style='visibility: visible; background-color:#FCC'>
            Page 1 <br />
            Field 1  <input type="text" name="field1" size="20">
        </DIV>
        <DIV class='formpage' id='F2' style='background-color:#CFC'>
            Page 2 <br />
            Field 2  <input type="text" name="field2" size="20">
        </DIV>
        <DIV class='formpage' id='F3' style='background-color:#CCF'>
            Page 3 <br />
            Field 3  <input type="text" name="field3" size="20">
        </DIV>
        
        <DIV>
            <input type="button" name="back" value="&laquo; Back" onclick="changepage(-1)">
            <input type="button" name="next" value="Next &raquo;" onclick="changepage(1)">
            <input type="submit" name="action" value="Submit">
            <?php
                if (isset($_POST['action'])) {
                    echo '<pre>', print_r($_POST, true), '</pre>';
                }
            ?>
        </DIV>
</FORM>


</body>
</html>

If you are still using mysql_ functions, STOP! Use mysqli_ or PDO. The longer you leave it the more you will have to rewrite.

Donations gratefully received






moon.png

|baaGrid| easy data tables - and more
|baaChart| easy line, column and pie charts




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users