Select drop downs, refresh page onChange

Hello, I am trying to refresh the page when a user clicks an option in a <select> using onChange. I can’t figure out how to keep the option selected once the page has refreshed though.

Probably best done at the server. You can use the select to submit its form:


<select....onchange="this.form.submit()">

…or to tack on querystring data without submitting:


<select....onchange="self.location=self.location+'?idx='+this.selectedIndex">

…and then analyze the data at the server, adding selected=“selected” to the indicated option.

Here’s a client-side hack, if you don’t have access to a server-based solution:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<script type="text/javascript">

onunload = function()
{
	var foo = document.getElementById('foo');
	self.name = 'fooidx' + foo.selectedIndex;
}

onload = function()
{
	var idx, foo = document.getElementById('foo');
	foo.selectedIndex = (idx = self.name.split('fooidx')) ?	idx[1] : 0;
}

</script>
</head>
<body>
<form>
<select id="foo" onchange="options[selectedIndex].value&&self.location.reload(true)"><!-- thank you, [color=teal]stereofrog[/color] -->
<option value="" selected="selected">choose</option>
<option value=""></option>
<option value="something">blah 1</option>
<option value="something">blah 2</option>
<option value="something">blah 3</option>
<option value="something">blah 4</option>
<option value="something">blah 5</option>
</select>
</form>
</body>
</html>

That first example is exactly what I was looking for sweet thanks and I actually had it right anyways cool thanks

Hi,

I am using this in my form and it works fine. Except I have more than one select menu in my form. The page refreshes when one of them changes. How would I use the above principle in sending the selected value of the other menu as well.


<select....onchange="self.location=self.location+'?province='+this.options[this.selectedIndex].value">

i.e., if my refreshing menu is called “name=province” and the other menu is called “name=country” how would both $country and $province be passed in the querystring.

Any help would be great!
Glenn Jackson

Panorama Intrenet Publishing
www.panorama-publishing.com

Try:


<select....onchange="self.location=self.location+'?province='+this.options[this.selectedIndex].value+'&country='+country.options[country.selectedIndex].value">

Assuming they’re in the same form. :slight_smile:

I’ve hit a snag

I used the first option as above and it was fine. But now when I’m editing a record from the database it and change the option in the drop down box the page is submitted but it returns with the values from the database and not with the changes I made.

How do I get around this? Do I need to put everything in the url now?

Thanks adios…much appreciated.

Both menus are in the same form however I can’t get the page to refreash at all now. The error in IE is:

‘type.options’ is nulll or not an object

‘type’ is the name of the other dropdown variable. I’m using:

<select name=“jurisdiction” id=“jurisdiction” onchange=“self.location=self.location+‘&jurisdiction=’+this.options[this.selectedIndex].value+‘&type=’+type.options[type.selectedIndex].value”>

any ideas anyone?

Thanks,
Glenn

I’ve done what you want before I just need to find the code.

I think i used focus or something.

Glenn - which one are you? :goof: Getting confused here.

It’s not working because of that select name “type”. Select.type is a object property (usually ‘select-one’) so the script is getting confused. Also, you put a & at the start of the querystring instead of an ?. Try this instead:


<script type="text/javascript">

function buildQuery()
{
	var loc = location.href.replace(/\\?.*$/, '') + '?';
	var a = 0, s, v;
	for (a; a < arguments.length; ++a)
	{
		s = arguments[a];
		v = s.options[s.selectedIndex].value;
		if (!v)
			return;
		else loc += ((a != 0) ? '&' : '') + s.name + '=' + v;
	}
	if (loc != '')
		self.location = loc;
}

</script>


<select name="jurisdiction" id="jurisdiction" onchange="buildQuery(this,this.form.type)">
<option value="">pick</option>
.........

Always provide a ‘dummy’ option, to insure the onchange handler will be fired.

Thanks Adios,
Works like a charm…

There are two amendments I’d need though, If anyone can help with the following that would be great:

  1. when that page refreshes, the GET variables that are in the URL originally (before any answers are selected) dissappear and I need them to display the page correctly, and

  2. is they any modification I can add to pass, what could be, numerous values to the URL? For example, I may have a form that has ten questions, all of which must be passed.

If anyone can help, that would be great!

Thanks,
Glenn


<script type="text/javascript">

function buildQuery()
{
	var loc = location.href.replace(/\\?.*$/, '') + '?';
	var a = 0, s, v;
	for (a; a < arguments.length; ++a)
	{
		s = arguments[a];
		v = s.options[s.selectedIndex].value;
		if (!v)
			return;
		else loc += ((a != 0) ? '&' : '') + s.name + '=' + v;
	}
	if (loc != '')
		self.location = loc;
}

</script>

Glenn…

Have to ask the obvious:

Why not just submit the form, using method=get? :confused:

Yea, I know. Its a registration form where the client wants a price tracker on the left hand side. When an item is selected from a menu, the price needs to change automatically without the form being submitted. However he doesn’t mind having the form refresh (the prices are PHP session variables, so if it refreshes the prices can be retrieved from the session). Its just that the price needs to be added as soon as its selected not after a submit.

What I’m trying to work out is how the values (answers) in the other form fields (other than the one calling the refresh function) are saved.

life is fun isn’t it??

:agree: :agree: :agree: :agree: :agree:

What I’m trying to work out is how the values (answers) in the other form fields (other than the one calling the refresh function) are saved.
What type of fields are they?

Could be anything…selects, checkboxes, radio buttons…

Could be anything…selects, checkboxes, radio buttons…
:cold:

Swamped at the moment…check out gatherFormData() here, maybe you can cobble it all together.

Thanks adios,

I’ll take a look…unfortunately I can’t get any of their examples to work in IE6 or Moz 1.0

Thanks for the help,
Glenn

Hi Glenn. And the drama continues… :cold:

See if this is close. Not much time to test it, unfortunately…

[color=indigo]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>untitled</title>
<script type="text/javascript">

function buildQuery(sForm_id, f)
{
	if (f = document.getElementById(sForm_id))
	{
		var grp, opt, i = 0, j, Q = '?', els = f.elements;
		while (el = els[i++])
		{
			switch (el.type)
			{
				case 'text' :
				case 'textarea' :
				case 'hidden' :
					if (!/^\\s*$/.test(el.value))
						Q = Q.concat(el.name, '=', el.value, '&');
				break;
				case 'checkbox' :
				case 'radio' :
					grp = els[el.name], j = 0;
					if (undefined == grp[0])
						grp = [el];
					if (!grp[0].done)
					{
						grp[0].done = true;
						while (el = grp[j++])
							if (el.checked)
								Q = Q.concat(el.name, '=', el.value, '&');
					}
				break;
				case 'select-one' :
				case 'select-multiple' :
					j = 0;
					while (opt = el.options[j++])
						if (opt.value && opt.selected)
							Q = Q.concat(el.name, '=', opt.value, '&');
				break;
			}
		}
	}
		return (/[^^?$]/.test(Q)) ? Q.replace(/&$/, '') : '';
}

function buildAndGo(s)
{
	var v = s.options[s.selectedIndex].value;
	if (v)
		self.location = self.location.href.replace(/\\?.*$/, '') + buildQuery('main');
}

</script>
</head>
<body>
<hr />
<form id="main" action="hah.php" method="get"">
<div align="center">
<select name="province" onchange="buildAndGo(this)">
<option value="" selected="selected">- choose -</option>
<option value=""></option>
<option value="Tadzhikistan">Tadzhikistan</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Icantstandstan">Icantstandstan</option>
</select><strong>______Province</strong>
</div>
<br /><br /><hr />

<input type="hidden" name="hidden1" value="hidden value" />
<input type="text" name="text1" value="" /><strong>___text</strong><br /><br />
<textarea name="textarea1" rows="3" cols="15"></textarea><strong>___textarea</strong><br /><br />
<input type="checkbox" name="soup" value="yes" /> <strong>soup</strong><br />
<input type="checkbox" name="salad" value="yes" /> <strong>salad</strong><br /><br />
<input name="temperature" type="radio" value="hot" /> <strong>hot</strong><br />
<input name="temperature" type="radio" value="cold" /> <strong>cold</strong><br /><br />
<select name="president">
<option value="" selected="selected">dummy</option>
<option value=""></option>
<option value="Reagan">Reagan</option>
<option value="Clinton">Clinton</option>
<option value="Nixon">Nixon</option>
</select><strong>___president</strong><br /><br />
<select name="first-lady" multiple="multiple" size="5">
<option value="" selected="selected">dummy</option>
<option value=""></option>
<option value="Barbara_Bushie">Barbara Bushie</option>
<option value="Eleanor_Roosevelt">Eleanor Roosevelt</option>
<option value="Betty_Ford">Betty Ford</option>
</select><strong>___first lady</strong>
</form>
</body>
</html>
[/color]