The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Drop down list with submit button, <form> with "submit" button
Sadiq
post Feb 24 2017, 01:42 AM
Post #1





Group: Members
Posts: 2
Joined: 24-February 17
Member No.: 26,327



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>
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Feb 24 2017, 10:44 AM
Post #2


.
********

Group: WDG Moderators
Posts: 7,727
Joined: 10-August 06
Member No.: 7



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Sadiq
post Feb 25 2017, 09:33 AM
Post #3





Group: Members
Posts: 2
Joined: 24-February 17
Member No.: 26,327



That worked perfect for me. Thank you so much for your rapid reply.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 17th November 2017 - 11:30 PM