problem with select boxes - second options based on first selection

Question

Hello All,

I just posted a question about opening in a new window but if I use window.location it doesn't work?? is there a problem with my javascript?

    <script type="text/javascript">

function setOptions(chosen){

var selbox = document.formName.table;
selbox.options.length = 0;

if (chosen == " ") {
 selbox.options[selbox.options.length] = new Option('No diploma selected',' ');
 }
if (chosen == "1") {
 selbox.options[selbox.options.length] = new Option('first choice - option one','http://www.pitman-training.com');
 selbox.options[selbox.options.length] = new Option('first choice - option two','onetwo');
 }
if (chosen == "2") {
 selbox.options[selbox.options.length] = new Option('second choice - option one','twoone');
 selbox.options[selbox.options.length] = new Option('second choice - option two','twotwo');
 selbox.options[selbox.options.length] = new Option('second choice - option three','twothree');
 selbox.options[selbox.options.length] = new Option('second choice - option four','twofour');
 }
if (chosen == "3") {
 selbox.options[selbox.options.length] = new Option('third choice - option one','threeone');
 selbox.options[selbox.options.length] = new Option('third choice - option two','threetwo');
 }
}

</script>

Its a little messy I know...

<form name="formName" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">

<select name="optone" size="1" onchange="setOptions(document.formName.optone.options[document.formName.optone.selectedIndex].value);">
 <option value=" " selected="selected">Please select a diploma</option>
 <option value="1">First Choice</option>
 <option value="2">Second Choice</option>
 <option value="3">Third Choice</option>
</select>

<select name="table" size="1" >
 <option value=" " selected="selected">No diploma selected</option>
</select>

<input type="submit" onclick="ob=this.form.table;window.location(ob.options[ob.selectedIndex].value)"/>


</form>

to be honest I'm not happy with this anyway I want a way to hide the Submit button until the second selected box has been selected...but I'm no java expert! Can anyone point me in the right direction?

Answer 1

I can't tell if you're saying you want it in a new window or not, so...

If you want a new window then

window.open(ob.options[ob.selectedIndex].value)

If you want the same window then

window.location = ob.options[ob.selectedIndex].value

Answer 2

I have a few suggestions.

• You should capture the onsubmit event of your form rather than the onclick event of your submit button. Forms can be submitted without using the button (for example, pressing enter) so your onclick event would miss this.
• You can use the window.open(url) function to open a new window.
• Rather than hiding the input button (which won't stop keyboard users from submitting the form), in the onsubmit event ensure the options are selected and return false; if they aren't.
• You can neaten and speed up your code by not making so many lookups on element objects.
• Use this inside an event handler attribute to get a handle to the firing element e.g. <select name="optone" size="1" onchange="setOptions(this.options[this.selectedIndex].value);">

Example:

document.formName.table.onsubmit = function ()
{
    if (this.table.selectedIndex == 0 && this.optone.selectedIndex == 0)
    {
        // This is just an example. Showing a div would be better than alert();
        alert("You haven't filled in the required elements");

        // Cancel submission by returning false
        return false;
    }
    ob=this.table;

    // Open a new window and go to URL:
    window.open(ob.options[ob.selectedIndex].value);

    // Go to URL in current window:
    // window.location = ob.options[ob.selectedIndex].value;
}
function setOptions(chosen){       
    var selbox  = document.formName.table;
    var options = selbox.options;
    var cOpt    = options.length = 0; 

    if (chosen == " ") { 
        options[cOpt++] = new Option('No diploma selected',' '); 
    } 
    else if (chosen == "1") { 
        options[cOpt++] = new Option('first choice - option one','http://www.pitman-training.com'); 
        options[cOpt++] = new Option('first choice - option two','onetwo'); 
    } 
    else if (chosen == "2") { 
        options[cOpt++] = new Option('second choice - option one','twoone'); 
        options[cOpt++] = new Option('second choice - option two','twotwo'); 
        options[cOpt++] = new Option('second choice - option three','twothree'); 
        options[cOpt++] = new Option('second choice - option four','twofour'); 
    } 
    else if (chosen == "3") { 
        options[cOpt++] = new Option('third choice - option one','threeone'); 
        options[cOpt++] = new Option('third choice - option two','threetwo'); 
    } 
}

Always use else if where applicable and try to reduce lookups to DOM nodes and their properties (such as selbox.options.length). cOpt++ will let us use the current value of cOpt and then increment it by 1, so you don't need to keep checking the length of selbox.options.