0

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="" />
IVCatalina
  • 348
  • 7
  • 23

1 Answers1

1

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>
Saumil
  • 2,521
  • 5
  • 32
  • 54
  • what if JS is disabled? serverside's much better and as a Plan-B. personally, I'd go with sessions. – Funk Forty Niner Jul 23 '15 at 02:01
  • @Fred-ii- yea serverside should be considered as Plan-B, but server side just doubles the work. According to this thread http://stackoverflow.com/questions/9478737/browser-statistics-on-javascript-disabled about 99% of the browsers have JavaScript enables hence it is not much of a risk. Moreover, this is not a critical functionality which should be validated on server side. For Eg, You can't operate Facebook with all thee functionalities if JavaScript is disabled on your browser. – Saumil Jul 23 '15 at 02:07
  • I'm part of the 1%ers who has JS disabled by default. Too many bad things can happen nowadays from unknown/untrusted sites. The ones I trust, I load the JS. I'm not saying that the OP can't be trusted, am just saying this in general. – Funk Forty Niner Jul 23 '15 at 02:10
  • doubling the work, well you know the saying: *"An ounce of prevention is worth a pound of cure."* - and it doesn't take much to do that and most sites have a Plan-B ;-) – Funk Forty Niner Jul 23 '15 at 02:12
  • @Fred-ii- Well if OP has the time then ofcourse he/she can implement the plan B. But my friend this is not a critical functionality like form validation so it is okay to neglect 1% of the population(sorry for you ;) ). One can always display a message using tag to inform users if they want to experience all the functionalities of the website then enable JavaScript like Facebook and many other well established websites do. – Saumil Jul 23 '15 at 02:17
  • Thank you for your response. When they go to the next page they are taken to a new page in terms of content, but the URL remains the same. – IVCatalina Jul 23 '15 at 02:18
  • @IVCatalina I believe you can implement this solution even if the URL remains the same – Saumil Jul 23 '15 at 02:20
  • Also, what type of coding do I use for the 'back' button itself? – IVCatalina Jul 23 '15 at 02:23
  • @IVCatalina Do you want to display a button through which the user can visit previous page? – Saumil Jul 23 '15 at 02:24
  • Yes, please! Ideally so. – IVCatalina Jul 23 '15 at 02:29
  • When I click the button it just does the same as it does if I press the 'back' button, and takes me back to the previous URL I was on (i.e. out of the questionnaire entirely). Do I need to change anything in the code that you sent me - i.e. 'myForm' etc? Sorry, new to all this! – IVCatalina Jul 23 '15 at 17:10
  • @IVCatalina I thought this is what you wanted, give me the HTML for entire questionnaire including all the forms – Saumil Jul 23 '15 at 17:12
  • I want it to go back to the previous page of the multi-page form, not out of the questionnaire altogether. – IVCatalina Jul 23 '15 at 17:39