I have a form with multiple tabs. Each tab has various items (textboxes, radio buttons, drop down boxes). I need the content to be saved after 15 seconds idle or when the user clicks on a different tab/item.
Currently I am saving when the user clicks on a button. This is giving the problem that if the user is on tab x and clicks the button, the form is taken back to the first tab.
I would prefer to have the save button on the last tab. When the user is filling in the data in the different tabs, it is automatically being saved. When the user clicks on the last tab, the command button is shown and then upon clicking another save is performed and the user is taken to the main screen with all the records.
Your advice and guidance please :)
Regards,
Babu
I'd say you want to submit each tabs content (form values) using an ajax call in background when another tab is selected. That way you can have the user navigate between tabs without having to reload the whole form. And the values are handed over to some ajax endpoint on your server where they can be stored.
You can do the same for an autosave feature: set a timer, when that triggers you use an ajax call to post the form values in background.
To make your life easy use jquery for the ajax calls and jquery-ui for the tabs.
You dont save the previous tab datas until you save the datas in last tab.. because if user is not willing to save the data after moving to last tab mean.. it is waste of saving previous data and deleting it..
So you can do it in SESSION... (i.e) you store the datas of each tab in session with one session ID as
$session[ID][fieldName1]
$session[ID][fieldName2]
$session[ID][fieldName3]
finally if the user click on that last button tab.. you get the datas from session and save in database USING AJAX and unset the session variables.... unset it if he clicks cancel also.....
You can also use Jquery tabs so that the complete form is on one page and the form can be saved on the last tab (with your button).
This way you don't have to worry about your data being saved until the last tab.
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 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 have a standard PHP form that has a series of checkboxes, radio, selects and text. The form works fine and proceeds to a search results page. My problem is that when you click Back browser in any browser the search page shows the previous selects. How do I ensure that the back button displays the form as if its the first time the visitor visits the page?
You can reset form on window.onload or $(document).ready(for jQuery)
function formReset()
{
document.getElementById("formId").reset();
}
you can do one thing.
Using jquery onReady function you can make form reset.
So, whenever user will press back button of browser page will be reload and onReady function your code for form reset will work.
$(document).ready(function() {
$('#myform').get(0).reset();
});
You shouldn't reset it automatically. Provide a reset button.
The back button returns the user to the previous page, in the state he left it. This includes the settings of any form. I'm relying heavily on this feature, cannot count the times this back button saved me from loosing my efforts that went into a textbox for answering questions...
It's a different game if the user is on your result page and clicks a link that takes him to the search page again, but does not use the back button.
I have a page with two forms that is generated with PHP.
The first part contains text boxes, a submit button and a clear button.
The second form is just a button called "Add more text boxes" so the user can add more to his form if he needs to.
The problem is when I click the "Add more rows" which loads another page which changes a value.
This value then affects the original page when it reloads causing more text boxes to get created.
The problem is that I lose all the data that was entered.
Is there any way to preserve the data when the user clicks "Add more rows"?.
Here's a screenshot of my page.
Thanks
If you want to do it without js than you put all in one form. When you click button to add row all entered data will be available in $_POST or $_GET so you can fill form with existing data and add a row when generating new page.
Ideally you should use javascript to dynamically add new rows w/out making new requests to the server and loading new pages. But if you want to keep it javascript free. If it's all the same php script just controlled by conditions, just use the $_POST['variable'] values as the value="$_POST['variable']" in your fields. If it's handled through multiple scripts, you can use a session variable to pass the data from one page to the next.
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