0

I am creating multi page form on 4 different pages. I want to include a next and previous button to be able to navigate through the form. I have searched online but what i find is usually navigating <div>s on a page. How do I change this to do my bidding? Thank you in advance.

this is the code for the previous button i found online. .registration-form is the name of a form. I want to change this to navigate through my html pages.

$('.registration-form .btn-previous').on('click', function() {
    $(this).parents('fieldset').fadeOut(400, function() {
        $(this).prev().fadeIn();
    });
});

Forms on the different pages have names part1, part2, part3 and part4. Also when a user goes to a previous page and goes back the next page, the user should see what he/she entered before pressing the previous button.

Abdul
  • 49
  • 11

2 Answers2

0

You could create a button in html that links to a different page.

<input type="button" onclick="location.href='http://google.com';" value="Go to Google" />
Michael Melin
  • 13
  • 1
  • 4
  • and the data from the previous page where does it go? – madalinivascu May 26 '16 at 04:59
  • 1
    I have created session variables for it on the next page. it is a multi page form so page1 has it's session variables on page2, page2 on page3 and so on – Abdul May 26 '16 at 09:15
0

A static solution for you is that you can set next previous button to every page and set the respective links on that pages

for eg.

page1.html

<input type="button" value="Previous" onclick="window.location='page4.html'">
<input type="button" value="Next" onclick="window.location='page2.html'">

page2.html

<input type="button" value="Previous" onclick="window.location='page1.html'">
<input type="button" value="Next" onclick="window.location='page3.html'">

page3.html

<input type="button" value="Previous" onclick="window.location='page2.html'">
<input type="button" value="Next" onclick="window.location='page4.html'">

page4.html

<input type="button" value="Previous" onclick="window.location='page3.html'">
<input type="button" value="Next" onclick="window.location='page1.html'">
Kirankumar Dafda
  • 2,354
  • 5
  • 29
  • 56
  • 1
    this works but when i go to a previous a page and come back to the next page data inputted disappears – Abdul May 26 '16 at 08:19
  • 1
    I have made some changes to the question can you please help me with that one too – Abdul May 26 '16 at 08:20
  • Are you PHP into this ? then you can maintain this with session otherwise you have to set localStorage for this. – Kirankumar Dafda May 26 '16 at 09:25
  • 1
    I used php for the sessions but how do I use it so it maintains the sessions from the previous page – Abdul May 26 '16 at 09:50
  • You can refer [this question](http://stackoverflow.com/questions/3791414/storing-form-data-as-a-session-variable) for maintain session variables on form – Kirankumar Dafda May 26 '16 at 09:55
  • 1
    I have done that but when I use your solution. say if I am on page2 and I go back to page1 and then go back to page2 the form on page2 resets. how do I make it keep its values – Abdul May 26 '16 at 10:13
  • You have to set `` in your `input field value` then whenever you go back to that page session value will set again – Kirankumar Dafda May 26 '16 at 10:36
  • 1
    I did dis but how do I set the session variables of page2 on page1 – Abdul May 26 '16 at 12:49