Create a back button for form - php

Question

I've created a 2 step form with the following code:
<form class="form" method="POST" action="<?php bloginfo('url'); ?>/contact-us/">
<? if (!$_POST['step']) { ?>
<h1>Step 1 of 2</h1><br />
<input type="hidden" name="step" value="1" />
<table border="0" width="100%">
<tr>
<td>
<input type="text" name="title" id="title" value="Title*" />
</td>
</tr>
</table>
<button class="continue-button" type="submit" name="submit">Continue</button>
<? } else if ($_POST['step'] == 1) {
foreach($_POST as $name => $value) {
if ($name <> "step") { echo "<input type=\"hidden\" name=\"$name\" value=\"$value\" />"; }
} ?>
<h1>Step 2 of 2</h1><br />
<input type="hidden" name="step" value="2" />
<table border="0" width="100%">
<tr>
<td>
<input type="text" name="name" id="name" value="Name*" />
</td>
</tr>
</table>
<button class="continue-button" type="submit" name="submit">submit</button>
<? } else if ($_POST['step'] == 2) { //do stuff
echo "Do stuff here";
} ?>
</form>
How can I add a back button on step 2? There will be several steps added not just 2 so the user needs to be able to move forward and back through the steps whilst keeping what they've filled in.

Answer 1

Try this
<form class="form" method="POST" action="<?php bloginfo('url'); ?>/contact-us/">
<? if (!$_POST['step']) { ?>
<h1>Step 1 of 2</h1><br />
<input type="hidden" name="step" value="1" />
<table border="0" width="100%">
<tr>
<td>
<input type="text" name="title" id="title" value="<?= $_REQUEST["title"]?>" placeholder="Title*" />
</td>
</tr>
</table>
<button class="continue-button" type="submit" name="submit">Continue</button>
<? } else if ($_POST['step'] == 1) {
$field ="";
foreach($_POST as $name => $value) {
if ($name <> "step") { echo "<input type=\"hidden\" name=\"$name\" value=\"$value\" />"; $field .= $name."=".$value."&";}
} ?>
<div><a href="<?php bloginfo('url'); ?>/contact-us/?<?= $field ?>" >Back</a></div>
<h1>Step 2 of 2</h1><br />
<input type="hidden" name="step" value="2" />
<table border="0" width="100%">
<tr>
<td>
<input type="text" name="name" id="name" value="Name*" />
</td>
</tr>
</table>
<button class="continue-button" type="submit" name="submit">submit</button>
<? } else if ($_POST['step'] == 2) { //do stuff
echo "Do stuff here";
} ?>
</form>

Answer 2

First add it on top of your page
// keep the data
$_SESSION['data'] = $_POST;
$_SESSION['step'] = $_REQUEST['step'];
Also replace the if statement to something like this:
if ($_REQUEST['step'] == 1) {
// continue
Write dynamic values on your form
<input type="text" name="title" id="title"
value="<?php echo $_SESSION['data']['title']; ?>" />
Use a link for Back and Next:
Back
Next
I guess it would works for you! :)

Answer 3

To navigate back and forwards you will want to pass the data from the previous form back to it again so you would need to store the value of each form somewhere. Your best bet would be to create a session and store each form info in a session variable. Then when you load each form you should check to see if the data is already stored in a session.
Then you could add a jquery button to change the value of the step and submit the form.
To do this you would need to the 'step' hidden input an id like 'step'
<input type="hidden" name="step" id="step" value="2" />
and then add a button like
<button class="back-button" type="submit" name="back" onclick="$('#step').val('1');">Back</button>
This would change the value of the step input and then submit the form taking you back to the previous form.
You would need to have another hidden input to tell the form where it came from so it would know whether to look at the session data (is you're going backwards) or the POST data (if youre going forwards).