Reload page when select box is changed

PHP
1

HI,

Ive googled this to death…i thought there would be lots of info on it but it seems not. I have a select box with options such as sort by price, sort by brand etc…i want to reload the page when the user chooses a new sort option from the drop down. So i dont want them to have to push a submit button or anything…the page just reloads as soon as they select…maybe this involves javascript but i think its a php related question so i posted here.

Thanks :slight_smile:

2

See the following complete code page and feel free to ask if you don’t understand anything


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" type="text/javascript">
function doReload(catid){
	document.location = 'samepage.php?catid=' + catid;
	
	/* But if you want to submit the form just comment above line and uncomment following lines*/
	//document.frm1.action = 'samepage.php';
	//document.frm1.method = 'post';
	//document.frm1.submit();
}
</script>
</head>
<body>
<form name="frm1" id="frm1">
    <select name="catid" id="catid" onChange="doReload(this.value);">
        <option value="" selected="selected">---All Category---</option>
        <option value="1">Category One</option>
        <option value="2">Category Two</option>
    </select>
</form>
</body>
</html>
3

hello rajug, thanks for the reply…

Thats great – thats plenty of info :slight_smile:

4

You are most welcome. But be careful that to run this the browser must have JavaScript enabled.

5

Before you do anything, be aware this is a bad thing from a usability point of view. Some browsers fire the onchange event when the mousewheel changes the selection, or the user moves up and down through the options with their cursor keys. If your page refreshes every time they do this, they’ve going to quickly get frustrated and go elsewhere.

If you are going to do it, make it unobtrusive. Give non-JS users a fully working form (with submit button) and then use javascript to modify your form to suit JS-users. AJAX might be a nice way of stopping the whole page from refreshing (although that comes with it’s own set of usability/accessibility gotchas).

6

Add this before the closing form tag.

<noscript>
<input type='submit'>
</noscript>
7