Dropdown form with submit button

Question

I have a dropdown with links in them, when I select the option it will go to the page, but I want to use a button instead but not sure how to change the javascript to make this happen:

   <select name="form" onchange="location = this.options[this.selectedIndex].value;"class="form-control">
          <option>Choose a Service</option>
          <option value="http://www.google.com">Option 1</option>
          <option value="http://www.google.com">Option 2</option>
          <option value="http://www.google.com">Option 3</option>
          <option value="http://www.google.com">Option 4</option>
          <option value="http://www.google.com">Option 5</option>
        </select>

What you want is unclear. Could you please post an example of what you would want it to look like? — musically_ut
– musically_ut, Commented Nov 24, 2013 at 23:43

Seth McClaine · Accepted Answer · 2013-11-24 23:58:38Z

1

Instead of putting location = this.options[this.selectedIndex].value in unChange, move it to a button onClick event:

<select id="dropdown" name="form" class="form-control">
  <option>Choose a Service</option>
  <option value="http://www.google.com">Option-1</option>
  <option value="http://www.google.com">Option-2</option>
  <option value="http://www.google.com">Option-3</option>
  <option value="http://www.google.com">Option-4</option>
  <option value="http://www.google.com">Option-5</option>
</select>

<input type="button" value="Go!" onClick='location = document.getElementById("dropdown").options[document.getElementById("dropdown").selectedIndex].value'>

edited Nov 24, 2013 at 23:58

Seth McClaine

10.1k7 gold badges44 silver badges67 bronze badges

answered Nov 24, 2013 at 23:44

Charles

4,5489 gold badges44 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Seth McClaine · Accepted Answer · 2013-11-24 23:46:07Z

0

   <select id="dd" name="form">
      <option>Choose a Service</option>
      <option value="http://www.google.com">Option 1</option>
      <option value="http://www.google.com">Option 2</option>
      <option value="http://www.google.com">Option 3</option>
      <option value="http://www.google.com">Option 4</option>
      <option value="http://www.google.com">Option 5</option>
    </select>

    <button onClick="launchPage" >

    <script>
      var launchPage = function() {
        var e = document.getElementById("dd");
        var url = e.options[e.selectedIndex].value;
        window.open(url);
      };
    </script>

answered Nov 24, 2013 at 23:46

Seth McClaine

10.1k7 gold badges44 silver badges67 bronze badges

2 Comments

TJXStyles Over a year ago

This worked as well, I am not sure which one I should use though. Is it just a matter of preference or maybe convention?

Seth McClaine Over a year ago

Mostly preference. A lot of people would choose this one over the other because it is easier to maintain as your code expands. First one is the quick and dirty way, this one is the longer and cleaner maintenance way

Collectives™ on Stack Overflow

Dropdown form with submit button

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related