Selecting the First Option from Onchange Dropdown

[DaveRich]

Hello,

I have run into a bit of a logic problem, that I feel is fairly common.

I have a dropdown list created inside a form with the following code:

<form name="chooseProv" action="" method="get">
	
	Select a province:
	<select name="prov" onChange="document.chooseProv.submit();">
		<option value="1">British Columbia</option>
		<option value="2">Alberta</option>
                ...
	</select>
</form>

Now on change it should refresh the page and have appended ?prov=XX to the URL which then gets used in a second form.

However, my problem is that since the form is set to use "onchange" if a user wants to select the FIRST element in the list (ex: British Columbia) it won't let them, they have to select a different element first and then go back to British Columbia.

Now, I have been reading up on this and it seems like it's a quite common beginner flaw, yet I haven't been able to find one thread anywhere where this problem is addressed and actually solved.

Is there an easy workaround to this?


Thanks for all your help!

[Michael_G]

I have a suggestion for your dropdown select form element, a good best practice for websites and web applications is to make sure that you have a default option with a null value as the first option that appears in the select control, this way if a user submits the form without selecting an option, they dont get an actual data item being selected by default. A short message in the option like "Please Select" informs the user they must select an option from the dropdown list. One thing you could do is have the form like this with a null value option as the first option:

<select name="prov" onChange="document.chooseProv.submit();">
<option value="">Please Select</option>
<option value="1">British Columbia</option>
<option value="2">Alberta</option>
</select>

You can validate with Javascript and also server side with whatever web programming language you are using, such as ASP.NET, PHP, or ColdFusion, writing the code so that no action is taken if the value of the PROV form element is null, or equals ""

Michael G. Workman
michael.g.workman@gmail.com

[DaveRich]

Thanks, yeah I just came across a similar solution, I did the following:

	<select style="margin-left: 26px" name="prov" id="cProv" onChange="handleProvInput();">
		<option value="00">Select Province...</option>
		<option value="59">British Columbia</option>
		<option value="48">Alberta</option>

And then I wrote a javascript function to check to see what the input was using:

function handleProvInput()
{
	var Index = document.chooseProv.prov.selectedIndex;
  	
  	if (Index != 0) 
  	{
  		document.chooseProv.submit();  
  	}
  	
  	else
  	{
  		alert("You have to choose a valid province!");
  	}
}

Which seems to work fine now.

[jamesbcox1980]

No need to process that after the submit...

<select name="prov"onChange="if (this.selectedIndex !== 0) document.chooseProv.submit();">
        <option>Select Province...</option>
        <option value="59">British Columbia</option>
        <option value="48">Alberta</option>
        ....

[DaveRich]

That's a lot nicer than what I had written! Thanks.

[5happy]

i looked at what you did and thought... doh!

simple, smart, and how come i didn't think of it! 8-)

thanks.

No need to process that after the submit...

<select name="prov"onChange="if (this.selectedIndex !== 0) document.chooseProv.submit();">
        <option>Select Province...</option>
        <option value="59">British Columbia</option>
        <option value="48">Alberta</option>
        ....