Sticky Select Box

HTML & CSS
1

How do you make an HTML Select/Drop-down Box “sticky”??

I have an entry form, and all of my text Boxes are “sticky” in case a user makes a mistake and the screen refreshes, but my Select Boxes keep re-setting which is annoying!

This is as much a PHP question as HTML, but my confusion is more so with the HTML syntax and where to put my code.

Thanks,

Amy
:slight_smile:

2

If the page reloads, the select box will go back to its default <option>, which is the first one, unless you use the selected attribute:

<select>
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
</select>

The third one will now be selected by default when the page loads. You can set whichever one you want to be the selected one with PHP by simply echoing out selected=“selected” in the appropriate <option>.

3

Okay, right, but I’m not sure how to write the PHP code?! :-/

For my States field, there are - of course - 50 different choices… I’m drawing a blank what code i would need to write to let the Select Box pick up where the user left off on a page refresh?!

Thanks,

Amy

4

If the user reloaded the page that’s their problem. You should only worry about this if they pressed the Submit button and they’ve made a mistake in the filling out of the form. Then you can just use the $_POST array to find out what they submitted, and fill out the form with these values.

5

That is what I meant… How do I keep the values a user selected if they make a mistake filling out the form.

Again, can you please provide a code example? :-/

Thanks,

Amy

6

Simple example using PHP to select the current option.


<?php
$options = array('output'=>array('one','two','three','four'),'values'=>array(1,2,3,4));
$selected = isset($_POST['select']) && in_array($_POST['select'],$options['values'])?$_POST['select']:null;
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8">
	<title>Untitled</title>
</head>
<body>
	<?php echo $selected!==null?'<p><strong>Current Option</strong>&nbsp;'.$selected.'</p>':''; ?>
	<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="POST">
		<fieldset>
			<legend>Example</legend>
			<select name="select">
				<option value="0">--</option>
				<?php 
				foreach($options['values'] as $index=>$option) {
					echo '<option value="'.$option.'"'.($selected !== null && $selected == $option?' selected="selected"':'').'>'.$options['output'][$index].'</option>';
				}
				?>
			</select>
			<input type="submit" name="save" value="Submit">
		</fieldset>
	</form>
</body>
</html>
7

Here’s how I do it:


<label>Choose A Drink</label>
  <select id="drink_choice" name="drink_choice">
  <option value="no drink"><?php if (isset($_POST['drink_choice'])) {print "You Chose: $drink_choice";} else {print 'Choose a Drink!';}?></option>
  <option value="Tea">Tea</option>
  <option value="Coffee">Coffee</option>
  <option value="Water">Water</option>
  <option value="Beer">Beer</option>
  </select>

In this example, before a selection is made the user sees Choose a Drink!, but if an error is made and the user is directed back to the form, they then see displayed the option they chose.

EDIT:
Actually, cancel that. I just tested my code, and it remembers the selection made, but doesn’t then send it on. I’ll have to explore oddz’ solution.

8

ok this can look complicated at the first time but i think it is what u r looking for…if it non database drop down…database dd is even easier…

i could just come up with this


<select name="value">

            <?php
			
echo '<option value="0"'; if (isset($_POST['value'])) {$selected=(($_POST['value']==0)) ? 'Selected' : ""; echo $selected; } echo '>No</option>';
echo '<option value="1"'; if (isset($_POST['value'])) {$selected=(($_POST['value']==1)) ? 'Selected' : ""; echo $selected; } echo '>Yes</option>';	
?>
        </select>

what it does is check post[value] is set or not (if form is posted it will be else no)
if is it set,check if the option was earlier selected one by using ternary operator
$selected=(($_POST[‘value’]==0)) ? ‘Selected’ : “”;
the $selected will be “selected” if it was the one causing value to be selectd again other wise will be empty

so look complicated but is simple…
hope it helps…

downpart:it is static… and own need to do same for each option…

good news:tweak bit more even that may not be required…