XHTML strict, name vs. id

[masonbarge]

I have a jump navigation box that works great

Code: Select all

<form id="menu" name="menu" class="jump" action="jump.php" method="post">
<fieldset class="noborder">
<noscript>
<div><input class="gobutton" type="submit" value="Go" />
<input type="hidden" name="submitted" value="cassio" /></div>
</noscript>
<select class="fr jumpselect" name="list" size="1" 
 onchange="if (document.menu.list.selectedIndex != 0) 
window.open(url = document.menu.list.options[document.menu.list.selectedIndex].value,'_self'); 
else alert('Please choose from menu.')">
<option selected="selected" value="#">Other Pages</option>
<option value="http://collierhills.net/path.php">PATH</option>
... more options ...
</select>
</fieldset></form>

My problem is that I can't get it to work without the 'name="menu"' attribute which means, of course, it won't validate in XHTML strict, where the name attribute is fully deprecated for <form>.

I've tried using only id="menu" with the following code, but it didn't work:

Code: Select all

onchange="if (document.form['menu'].list.selectedIndex != 0) 
window.open
 (url = document.form['menu'].list.options[document.form['menu'].list.selectedIndex].value,'_self'); 
else alert('Please choose from menu.')"

Does anyone know how to fix this so it will work without a name attribute in the form tag?

[MikeHopley]

That's some pretty weird javascript you have there! You need to use a different way to reference your HTML elements.

The simplest way is to give everything an ID. For example, <select id="list">.

Then use document.getElementById to refer to it. For example, onchange="if (document.getElementById("list").selectedIndex != 0)

Not sure about that last bit (selectedIndex).

[masonbarge]

Thanks for the response.

I found a really elegant, long-term solution at http://abeautifulsite.net/notebook.php?article=28

Basically, you create a function that turns any "select" tag, which has an id tag, into a javascript jump link. Then you just put it in an external file.

This is nice, since you still have "name" attribute available for "select" tags in XHTML 1.0 Strict. And if you need the id tag in a select for something else, even a bare-amateur like myself can change the javascript.

Here's the function:

Code: Select all

function initJumpMenus() {
    var selectElements = document.getElementsByTagName("select");
    for( i = 0; i < selectElements.length; i++ ) {
        if( selectElements[i].className == "jumpmenu" && document.getElementById(selectElements[i].id) != "" ) {
            jumpmenu = document.getElementById(selectElements[i].id);
            jumpmenu.onchange = function() {
                if( this.options[this.selectedIndex].value != '' ) {
                    location.href=this.options[this.selectedIndex].value;
                }
            }
        }
    }
}

Then all you have to do is initialize it

Code: Select all

window.onload = function() {
    initJumpMenus();
}

[masonbarge]

PS -
I only know what selectedIndex is from trying to get this jump menu working right, but it's not a bad element to know.

"selectedIndex - The number (base 0) of the item that is selected in the select list"

It would be a nice way to do a css-switch from a dropdown list, for example.

All the usages I have seen have used some sort of "if" statement so that no action occurs if the first list item is selected, i.e. value=0, which is the base value of the element.