Help - Search - Members - Calendar
Full Version: Drop down list with submit button
HTMLHelp Forums > Programming > Client-side Scripting
Sadiq
Hi there,
I was looking for a drop down list with a "submit" button. After selecting when you submit, it will execute. So far I was able to make the drop down list WITHOUT submit button. It executes immediately as you select. Can anyone integrate "submit" button to it?
CODE

<form name="departments">
<div align="center">
<select name="departments" id="departments">
                <option value="departments" selected disabled>Select Your Department</option>
           <option value="mysite.com/AEE">Department of Aerospace Engineering</option>
            <option value="mysite.com/ARCH">Department of Architecture</option>
</select>
</div>
<script type="text/javascript">
var urlmenu = document.getElementById( 'departments' );
urlmenu.onchange = function() {
      window.open(  this.options[ this.selectedIndex ].value );
};
</script>
</form>
Christian J
Here's a version where the button is disabled until the user has selected a value other than the first:

CODE
<select id="departments">
<option selected disabled>Select Your Department</option>
<option value="mysite.com/AEE">Department of Aerospace Engineering</option>
<option value="mysite.com/ARCH">Department of Architecture</option>
</select>
<input type="button" id="button" disabled value="Go">

<script type="text/javascript">
var urlmenu = document.getElementById( 'departments' );
var button=document.getElementById('button');

urlmenu.onchange=function()
{
    if(this.selectedIndex>0)
    {
        button.disabled=false;
    }
}

button.onclick=function() {
      window.open(urlmenu.value);
};
</script>
<noscript><p>The above navigation menu requires javascript in order to work.</p></noscript>

But usually SELECT menus are not a good choice for navigation, especially if there are just a few entries and if they require javascript to work. See also http://www.cs.tut.fi/~jkorpela/forms/navmenu.html#ben
Sadiq
That worked perfect for me. Thank you so much for your rapid reply.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2018 Invision Power Services, Inc.