Insert Back Button in Form

I feel like this is simple but i'm not sure where to start.

I have a multi-page form that the user clicks 'next' through to get onto the next page. I would like to also give them a 'back' button so that they can go back and change their response if they need to. How do I insert a 'back' button that still keeps their data on previous pages?

I don't need to track what their response was before or anything like that, just the final response is all that's necessary.

My form has a lot of code, so if you need to see another example please let me know:

Code at the very start of form:

    <form action="surveysubmit.php" method="post" enctype="multipart/form-data">

Code to proceed to 'next' page and where I need the 'back' button:

<input class="submit-next" type="submit" name="submit_second" id="submit_second" value="" />

Code to submit final page (and entire form):

<input class="submit-end" type="submit" name="submit_ninth" id="submit_ninth" value="" />     

Answers


If on clicking the "next" button the user is redirected to a new page each time then you can use localStorage to store the values which the user entered in the previous page,

For this edit the submit button in your each page as follows,

<input class="submit-next" onclick="saveValues()" name="submit_second" id="submit_second" value="" />

Your JavaScript code,

function saveValues(){
    //fetch all the form values
    var name = document.getElementById("inputName").value;

    //Store it in the localStorage
    localStorage.setItem("name", name);

   //Now submit the form
   document.getElementById("myForm").submit();
}

Now on every page you have to check whether their are any set localStorage values,

window.document.onload = function(e){ 
    var name = localStorage.getItem("name");
    document.geteElementById("inputName").value = name;
}

To display back button,

<button onclick="goBack()">Go Back</button>

<script>
function goBack() {
    window.history.back();
}
</script>

Need Your Help

Ajax with MVC Partial Views - Ajax.ActionLink not working, while jQuery does

jquery ajax asp.net-mvc

I'm trying to render partial view with Ajax to fill the &lt;div id="AjaxDiv"&gt;&lt;/div&gt; element. I'm able to achieve this with jQuery:

ExtJS 4.2.1 - How can I toggle buttons in toolbar through keyboard commands?

javascript extjs extjs4

I want to be able to activate buttons in ext toolbar from keyboard.. so the user could keep the mouse on the center window without having to choose buttons.