I have a multi-page form.
I'd like to have a "prev" and "next" button on page 2, 3 and 4 so that if an user in the middle of filling out page 2 can decide to return to page 1 to edit/enter something and be able to still see values on page 2 where he left off.
Is this possible? any pointers/links would be immensely helpful.
(Yes, I have sessions and I can see the sessions after printr but if Im in the middle of page 2 and click backwards, I still dont see these sessions).
Thanks in advance.
Start the session when the user hits page 1. Each page should look in the session to see if there's any data there for that page, and if so, render the form with those values pre-filled. When the user hits either PREV or NEXT, process the form as if they hit submit, but instead of saving the values to (for example) a database, save them to the session. Then redirect to the requested NEXT/PREV page. When the user hits DONE (or whatever) on the last page, pull all the values from the session and process them to your database (or whatever.)
For a simple approach to a "multi-step" form, simply use Javascript. That is what I do.
However, if you want to have a stateful form that remembers data in between pages, you will have to use a session array to track the values entered.
When you fill out a page, the POST array is populated on page2. Serialize the array of post data and store it in a session array. Back on page1, if that session array is set, unserialize the data and echo the values into the right form element.
You can save all of the data in a database as they move to a different page as well as print these values out when the page is loaded. This would still have to be sent to the server via AJAX in the case of a "Previous" link click.
You can put all pages in one html page, then just hide/show the correct pages when they navigate using javascript.
Save all entered data in a session, which would have to be sent to the server via AJAX if it is not submitted through a form the traditional way.
Related
I have a web page that loads all the data from a mysql database called datalist.php
From this page I can edit record by record with a button that redirects you to an editdata.php page adapted to the fid of the record.
Once edited as they want to see the changes, I don't redirect them to the main one letting them see the changes and simply clicking back or with a button they return to the datalist.php without any problem.
The button is this
echo "<p id='parrafo'><a style='padding:1px 20px'class='button rounded-0 primary-bg text-white w-0 btn_1 boxed-btn' href='javascript:history.back() '><--</a></p>";
PROBLEM
I added a search engine where the displayed data can be filtered.
When they use the search engine from datalist.php, I direct them to a page called search engine.php where, through a post method, I store what they are looking for in a variable and the data that users want appears.
But when they edit a filtered record, it is edited without problems, but when they go back, they return to the search engine.php and the message appears:
"Confirm form resubmission In order to display correctly, this web page needs the data you entered earlier. You can submit that data again, but that will cause the page to repeat all previous actions. Press Reload to submit the data and display the page.
Hit the page refresh button to resubmit the data needed to load the page."
Of course, if they update, they come back when the filtered data comes out.
Isn't there any way to store the variable used in the search so that when I go back I don't get this error or any solution??
simple! when user will submit form for that variable instead of making post request
option1: just use get request __url__?variable=... but this will not remember the variable when you go back
option2: store the variable in the cookie and just go to next page (eg. window.location.href = '...';). and in next page access the cookie from php.
If you are wanting to show the form to the user as a confirmation, but without the possibility of another post, then remove the form element and the button. Display all other boxes as they are (with the values populated from the POST array).
And display another message telling them that it has been successful.
You are using PHP, you can achieve this easily with it. If you are unsure, then post a short version of your code in a separate question.
I want to pass my values to the page that won't be on next page but on another page. For example I have inputs in Page1, but this page goes to Page2. And I need the values on Page3. I used to use session and cookies but my REST API resets them and I need to use another method to pass the varaibles. I searched for AJAX but couldn't find the right method to do that.
i got 4 pages which are company details, job requirements, job responsibilities and design. so im gonna update the data from these pages. so i retrieve the data from database to be display into form for these 4 pages. after i edit the values on first page, then i go to next page for next update. but when i go back to previous page, the data wont keep the edited value but display the old data that i retrieved from database. so how to prevent this to happen ? same goes if i refresh the pages. i know i can use the session to store edited value but still i think that form will display the old data. help me give the idea how to do this pls ! thanks
You need to follow below steps
Go to next page by submit & action attribute
In next page hold all the post value into hidden fields
Use a back button to go back.
when go button will be pressed submit the form which is holding the hidden fields
Now you are in first page and simply use $_REQUEST or $_POST to get the previous value.
Hope you under stand.
N.B: If you use browser back button browser will ask you to confirm to resubmit the form. If you confirm then no problem but if you didn't confirm then you lost your values.
I am trying to develop a registration page which involves three separate information.
First Page will get contact details
Second page - working details
Third page - study details.
How to keep the form data of the previous pages before posting the form?
You could do it with Ajax - multiple divs and hide/show the appropriate ones.
Or you could POST each page and save the data in the $_SESSION global variable until all pages are complete. Then save it all to the database.
While the other answers are certainly good ideas, you may also want to consider persisting the intermediate data to your database between each page. So, submitting the first page would create the new row, with the columns relating to contact details populated, and a status column set to a value indicating that the submission is not yet complete.
The second page would update that record in the database. The third page would also update the record, as well as the status flag to indicate the submission is complete.
The main benefit to this is that the user can walk away after the first (or second) page, and then return to it later, even if he had closed his browser and his session had expired. (As long as he has a unique URL to return).
This approach might not have a lot of benefit if you are only collecting three pages of data, but if you had many pages, the ability to leave and return later might be more important.
You should take a look at http://jqueryui.com/demos/tabs/, it should be able to do what you need.
While shifting to another page, you just put the values of first page variable in sessions, then you can access the value of previous page at any page, then post the value to the database query. In this way, you can use the use the value of first page at third page, up to when browser is open. As the browser close then variable lost their values.
Back in the day, I would've put hidden fields for all of the previous pages in each subsequent page, so the final submit would have everything... i.e.
Now, I would probably only have one actual page.. with multiple steps implemented by showing/hiding div's and collecting all of the data in one big form, broken up visually for the user... and if I was feeling especially frisky, with frequent validation and final submission through ajax.
I thought hours about that problem but I didn't come to any conclusion. My problem here is that I need a 'Previous' Button added to a form. The user should fill out a formular that is splitted up in 13 parts. Every part is an own formular having a 'Next' button for submitting everything to a database and redirecting to the next page.
How do I integrate a 'Previous' button there? ...
I don't if it might be usefull for you to know that I'm using cakePHP, and well I'm pretty new to it.
Store the POST data of each form and the current form index in your session.
When clicking the back button, open form (currentForm - 1) (if that's a valid form index) and populate the fields with formData[currentForm] (assuming currentForm is now the form the back button redirected to)
The question really is, do you want to store each stage of the formula in a record? or do you want to store every stage of the formula in the "transaction"? The difference here is important. What is your relationship with the user? Do they login? are they anonymous? How do you associate their answers from one form entry to the next? If you store each entry in the database, in some chronological way, then simply populate the previous form with the previously entered values; when they click previous. If you do not store the entries and instead utilize a session to retain values between "next" clicks then populate the "previous" form with those values.
I've coded a similar form in classical ASP, see if you can make it work in CakePHP:
I had a 7 step form, step 2-7 have previous buttons. Each step consists of one asp script. All scripts post back to themself. I check the REQUEST_METHOD upon every invocation of the script to see if it was called by GET method or POST. If POST then data is validated, if validated then it is saved. There are three submit buttons on forms that allows user to choose whether he wants to just save the data, save and move to next step or save and move to previous step. Depending on which button was clicked, the user is "redirected" to the previous/next page. This post specifies how to add and handle the previous/next buttons:
Multiple Submit Buttons — Specifying default button