keeping data when refreshing web page

[jaco]

Hello everyone, I know this is probably an oft asked question but I have been struggling with it for quite some time. I have a web page that has select boxes for user input and of course select buttons that send the data to the server via url. I want the user to have the same page returned with new information based on his selection, see:

 

http://www.musiconguitar.com/chords.php

 

Everything works fine except when you use the REFRESH or BACK button of the browser, this causes the data to be lost.

 

What is the best way to solve this problem?

 

Cheers,

 

Jacques

[pernest]

My knowledge of this area is pretty limited, but as you haven't received an answer yet, you can have my answer until you get a better one.

 

HTTP is a stateless protocol, which means that your host is not keeping track of the visitors to your site. So when the page is reloaded, your script does not differentiate between this request and a brand new request from a different user. Similarly with clicking back, the script does not know that the user has already visited the site.

 

You could use cookies to save user state information, but I can't see how this will solve your problems. If someone was filling the page in, then clicked reload, the details they have filled in cannot be submitted to your script.

 

I can see an ugly way around this using ajax and cookies. You could use the browser onunload event to trigger an ajax request that would send the page state to your script, that would be saved with the appropriate cookie. Then when the user revisits that page (reload) they will see the information they were in the middle of submitting.

[TapeGun007]

This may not be the answer that you want to hear, but you can simply create buttons "back" and "forward" such that would repost the information you need.

[IER506]

I think I have some code to do the job. Check this small example:

 

<?php

//a function to add a value to a variable in case the variable is not defined anywhere
function isset_or(&$check, $alternate = NULL) 
{ 
    return (isset($check)) ? $check : $alternate; 
} 
//Get the order value or set it to default 					   
$order				= isset_or($_POST['order'], 1);	 

//get the $order value ang generate a menu with "memory"
switch($order) {

case 0:
$ = ' selected';
$o1 = '';
$queryorder = ' ASC';
break;
case 1:
$o1 = ' selected';
$ = '';
$queryorder = ' DESC';
break;
}

$ordermenu 	  = '<select name="order" onchange="this.form.submit();">
			 <option value="0"'.$.' >Ascending</option>
			 <option value="1"'.$o1.' >Descending</option>
			 </select>';

//display the menu				 
echo $ordermenu;

?>

 

This is a small example of a drop down menu to select ASC/DESC order of a query. As you can see, when something changes, the php script

posts the new value to itself and refreshes the page. Now, in the new page via the switch, the menu is regenerated but with "memory". It may

seems complex but it is not. Just try it with this small example in order to understand the philosophy and then you can proceed with advanced menus!Hope I helped!

 

[jaco]

Very ingenious, thank you very much. The key seems to be that the select will POST it's data if there are any changes. However, I am not quite sure I understand how the function works, can you elaborate a bit.

[jaco]

I got it, it's a condensed if else statement used in Perl/PHP. It means if $check exists return it's value otherwise return the value of $alternate.

 

Thanks, again very ingenious code.

[jaco]

If this works I should be able to refresh the web page and keep the selection value of the select.

 

In other words, the page comes up for the fist time, I change the selection in the drop-down, this causes the select form to submit it's value to the server.

 

When I hit the refresh button it checks to see if there is a value on the server and then provides that value to the select thereby preserving the memory of the change, is that correct?

[TOA]

If that doesn't work for you, look into sessions and then "sticky forms"

[jaco]

Yep, it's  not working for me, I have to use a submit button to make sure the user knows what to do and this screws things up.

 

I will try using the SESSION var. to keep the memory of the form selection.

[IER506]

Let me explain you some things. First of all I use this function in the beggining because if a value is not set then you have a problem!

 

For example when a user performs a login and he is redirected to the main page of the website the value of the variable $order is not defined and this can cause an error. That's why I use this small function, just to pre-define a value for $order .

 

Now, when the user performs a login the default value of $order is 1 . This value is passed to the switch clause and then the code generates a menu with the 'ASC' selected.

 

I hope it's more clear now! In case you still have questions I'm at your disposal!

 

PS: I think you can combine my technique with sessions to obtain your result!

[pernest]

I don't think that the solutions given above will really help the OP.

 

If you fill in a form, then until the form is submitted only the client knows about the data in the form. Doesn't matter what server side scripting you implement, the server doesn't get the data until the client sends it.

 

When you refresh a page in the browser the client throws away all data and requests the page from the server, without submitting the form.

 

Your problem is to get the data to the server as the data is entered, and not wait for the user to submit the form. As I said before, I think that you will need to use ajax to transmit this data. Use something like the onblur event attached to each field in your form to trigger an ajax request to your server, sending it the form data bit by bit as the user enters it.

[IER506]

I don't mean to offend you, but ajax is not always the way of doing things!

 

As you've noticed in my code I'have the onchange="this.form.submit();" attribute, so when a value changes everything is automatically updated and via the switch the page has "memory". Try the code for your self to understand this philosophy.

[pernest]

I'm sorry IER506, I apologise completely. I hadn't spotted the JS onchange event in your code. Once again, I'm sorry for posting first and properly reading your code second.

 

I don't mean to offend you, but ajax is not always the way of doing things!

 

As you've noticed in my code I'have the onchange="this.form.submit();" attribute, so when a value changes everything is automatically updated and via the switch the page has "memory". Try the code for your self to understand this philosophy.

[barrettj1971]

That's a very clever piece of code. Congrats. I'll have to give this a try the next time I run in to a similar situation.