Keeping cursor positioned after refreshing page

[lu_gsh]

Hi guys,

 

I have created a form, which has loads of text boxes and drop downs (dd) on it.

One of these text boxes allows you to enter which colour you would like to see the background colour of the page change to.

The idea behind it is, that when you enter "blue" into the text box (or select blue from the dd) you should be able to see the changes take effect on the page so you can get a 'feel' of what it looks like.

Now what i've got is something like this:

 

...

<?

 

$style=" style='background-color:{$background_colour};' ";

 

function colour_options(){

return "

<option selected='selected'></option>

<option >aqua</option>

<option >beige</option>

<option >black</option>

<option >blue</option>

<option >brown</option>

<option >chocolate</option>

<option >coral</option>

<option >crimson</option>

<option >cyan</option>

<option >darkblue</option>

<option >darkgreen</option>

<option >darkgrey</option>

<option >darkred</option>

<option >gold</option>

<option >green</option>

<option >grey</option>

<option >indigo</option>

<option >ivory</option>

<option >lavender</option>

<option >lightblue</option>

<option >lightgreen</option>

<option >lightgrey</option>

<option >lightpink</option>

<option >lime</option>

<option >magenta</option>

<option >maroon</option>

<option >mediumblue</option>

<option >navy</option>

<option >orange</option>

<option >pink</option>

<option >plum</option>

<option >purple</option>

<option >red</option>

<option >salmon</option>

<option >sienna</option>

<option >silver</option>

<option >tan</option>

<option >turquoise</option>

<option >violet</option>

<option >white</option>

<option >yellow</option>

";

}

?>

 

<form name="ess" ... >

 

...

 

<td>

<label for="background_colour" <?=$style?>><em>Background colour/em></label>

</td>

 

<td>

<input type="text" name="background_colour" id="background_colour" value="" size="10" onChange="document.ess.submit();" <?=$style?>/>

</td>

 

<td>

<label for="background_colour_picker"><select name="background_colour_picker" id="background_colour_picker" size="1" onchange="document.ess.submit();" <?=$style?>>

</td>

 

<? echo colour_options(); ?>

 

</select>

</label>

</td>

 

 

 

But my problem is that everytime i submit the page - from the onChnage - so that my changes can take effect, the 'cursor' goes all the way back to the start.

The reason i wanna get round this is that if someone is going through the form (e.g. using keyboard rather than a mouse), they'll have to navigate all the way back to the point at which they WERE.

 

So, my question is: how do i keep the cursor IN ITS PLACE after the page refreshes?

 

I'd appreciate any other ideas/way around this.

Someone mentioned using cookies or passing parameters back to the page in the URL, but that means nothing to me as i've never used cookies much.

 

Thanks alot,

G