Reset a select box using Javascript

cdemott33
cdemott33 used Ask the Experts™
on
I trying to learn Javascript and could use a bit of help with a problem I'm having.

I have a link that, when clicked will past the name of the select box to a function that should reset the selectedIndex to zero, however it's not passing the name of the select box to the function.

Have a look at my code if you would.

The error I'm getting is:  document.forms.0.box is null or not an object.

I want to pass the name of my select box, which in this case is "master2", to my function, but it's not being passed?  Any help would be great.


// My Javascript function

function resetLocationSelect( box ) {	
	document.forms[0].box.selectedIndex = 0;
}

// and here's my link in my HTML code.

<a href="javascript:void(0)" onclick="resetLocationSelect('master2');">Reset this select box</a></div>

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Try this instead
// My Javascript function 
 
function resetLocationSelect( box ) {    
       // document.forms[0].box.selectedIndex = 0; 
       document.getElementsByName(box)[0].selectedIndex = 0;
} 
 
// and here's my link in my HTML code. 
 
<a href="javascript:void(0)" onclick="resetLocationSelect('master2');">Reset this select box</a></div>

Open in new window

Personally though I would recommend to use the "id='master2" attribute inside the <SELECT> and in the javascript I would use getElementById('master2') instead of getElementsByName('master2') because getElementById() will always send back only one element, but getElementsByName can send back more than 1 element if there is more <SELECT>s with the same name.

Commented:
box is ur variable, not the id of the combo, you need to do this:

  document.forms[0][box].selectedIndex = 0;

but you can have some poblems with that, if you want your combo to reset to no option is -1, 0 will pick up the first choice, -1 will leave it with nothing choosed.

I dont think ur problem is that the value is not being passed, to make sure you can write alert() in your function like this:
function resetLocationSelect( box ) {  
        alert(box);
        document.forms[0].box.selectedIndex = 0;
}

that will alert you the value of the box variable when ur function is called.

also I recommend you to do something like this instead:

<script type="text/javascript">

function resetLocationSelect( boxId ) {  
        document.getElementById(boxId).selectedIndex = -1;
}

</script>

<select id="myCombo" ><option>a</option><option>b</option></select>
<input type="button" value="Restart Combo" onclick="resetLocationSelect( 'myCombo' ) "/>
// Try this JS Function

function resetLocationSelect( box ) {  
        var select = document.getElementsByName(box) == null ? document.forms[0][box] : document.getElementsByName(box);

        if(select != null){
               select.selectedIndex = 0;
        }
}

Author

Commented:
Thank you.  Worked perfectly.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial