Forum Moderators: open
I have this JS code which converts select options into lists in order to make them look nice - as everyone knows select lists are ugly by default.
I only need to add this onchange function (which contains some php code) to the li elements:
onchange="if (this.selectedIndex > 0) location.href=this[this.selectedIndex].value;"I need to add the onchange function to give something to do to these lists because as they are they're currently useless.
Please help, any comments welcome - if you need more info please let me know.
thanks!
[edited by: coopster at 1:05 pm (utc) on Mar. 21, 2009]
[edit reason] removed code dump and urls [/edit]
Please take a moment to read the Javascript Forum Policies for Links and Code [webmasterworld.com].
Where exactly are you having difficulty? In the PHP code? Or are you wondering how to attach the onchange event handler?
I'm just having difficulty adding the onchange event to the JS file. Is it possible to do?
Any help is appreciated. Thanks
document.getElementById('myLI').onchange = function()
{
if (this.selectedIndex > 0) location.href = this[this.selectedIndex].value;
};
So in this case you mean I'd need to place this not in the JS file but in the file that has the markup or between the <head> tags? Sorry JS isn't my forte...
Furthermore, you can make this code anonymous so all you have to add is the relevant list to onload so any list can access it. So lets say you have two "jump" menus, (which is what you're building with window.href) one at the top of the page, one at the bottom:
<form method="post" action="yourscript.php" id="form1">
<select name="jump" id="jump_top">
<option value="">Select</option>
.....
</select>
<input type="submit" value="Go">
</form>
....
<form method="post" action="yourscript.php" id="form2">
<select name="jump" id="jump_bottom">
<option value="">Select</option>
.....
</select>
<input type="submit" value="Go">
</form>
Note that name is the same in both lists, so your php script only has to look for $_POST['jump']*, not two separate input values. Alternatively, you can make your selects more accessible: that is, if Javascript is disabled, location/href won't work at all. So instead, add a submit button and submit the form onchange of the lists.
Your javascript, whether external or in the head section, might look like this:
*By using post, you don't have the ugly query string in the address bar.
window.onload=function() { attachBehaviors(); }
function attachBehaviors() {
if (document.getElementById) {
document.getElementById('top_menu').onchange=function() { jumpMenu(this,this.form); }
document.getElementById('bottom_menu').onchange=function() { jumpMenu(this, this.form); }
document.getElementById('form1').onsubmit=function() { return selectList(this); }
document.getElementById('form2').onsubmit=function() { return selectList(this); }
}
}
function jumpMenu(selectObject, form) {
// if the top '' value is selected, do nothing.
// This allows the user to "reset" the list
var ind = selectObject.selectedIndex;
if (ind > 0) {
form.submit();
}
}
// If javascript is enabled, the form will submit
// onchange of the list. So if they hit submit
// when nothing is selected, just let 'em know.
// By returning false, this stops the form submit.
function selectList(form) {
alert('Please select an item from the list.');
return false;
}
This still has a "hole" in it - if the user is very fast, they could potentially select from the list and hit the submit, which would give them the alert. To eliminate this possibility, you could put the submit in a div or paragraph and set the innerHTML to '' onload.
