CODEWITHSUNDEEP
phphtmlforms
IVCatalina
IVCatalina

Reputation: 356

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="" />

Upvotes: 0

Views: 2568

Answers (1)

Saumil
Saumil

Reputation: 2517

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>

Upvotes: 1

Related Questions