Jump to content

form with multiple steps


digitalgod

Recommended Posts

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?
Link to comment
https://forums.phpfreaks.com/topic/23774-form-with-multiple-steps/
Share on other sites

[quote author=digitalgod link=topic=111315.msg451040#msg451040 date=1160676492]
I already thought about that and it works but as you know most users will hit back on their browsers first.
[/quote]

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.
when a page is loaded check the session value. if it is lower than the one you want rewrite it example

[code]<?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;
}
?>[/code]

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
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

[code]
<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>
[/code]

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.