Form Dropdown Select Link

Question

I have a select drop down, once user specifies the brand I want it to link over in 2 new tabs for the 2 URLs. How can I do this, is it best to do onclick event for submit and then run a function with "if and else" through the selects..any suggestions? Here is my current code.

     <fieldset>

      <legend><span class="number">1</span>Select a Brand</legend>

      <label for="Brand">Brand:</label>
      <select id="brandSelect" name="brand_select">
        <optgroup label="Grills">
          <option value="http://site1.com", "http://site1A.com">DCS</option>
          <option value="http://site2.com", "http://site2A.com">Alfresco</option>
          <option value="http://site3.com", "http://site3A.com">Viking</option>
          <option value="http://site4.com", "http://site4A.com">Fire Magic</option>
          <option value="http://site5.com", "http://site5A.com">Lynx</option>
          <option value="http://site6.com", "http://site6A.com">Coyote</option>
        </optgroup>
      </select>

    </fieldset>

    <button type="submit">Sign Up</button>
    <script type="text/javascript">
       var urlmenu = document.getElementById( 'brandSelect' );
       urlmenu.onchange = function() {
            window.open( this.options[ this.selectedIndex ].value );
       };
    </script>

How will you put two different URLs as one option choice in your select list? e.g. will it be two space separated URLs as the value of the option, or what? Modify your question code/markup above so it has an example of what you're trying to do. — Stephen P, Feb 26 '15 at 18:19
So `value="http://site6.com", "http://site6A.com"` is illegal — an attribute such as value must be set to a single quoted string. This would be legal: `value="http://site6.com, http://site6A.com"` or simply with a space `value="http://site6.com http://site6A.com"` — Stephen P, Feb 27 '15 at 18:36

score 0 · Answer 1 · answered Feb 25 '15 at 20:53

0

 window.open( this.options[ this.selectedIndex ].value, "window_"+Math.round(Math.random()*9999) );

Give each window a unique name should do the trick. http://jsfiddle.net/qx2ppssn/

answered Feb 25 '15 at 20:53

Mouser

13,132
3
28
54

Im looking for the browser to open 2 tabs with different URLs at the same time. – Luis Feb 26 '15 at 13:54
Just use this piece of code twice in a function and set different URLs. – Mouser Feb 26 '15 at 18:34

Anton Y. Reuchenko · Answer 2 · 2015-02-26T08:12:16.520

0

try to define window name:

this code for generation randomize number from 0 to 10000

Math.round(Math.random()*10000)

concatenation randomize number and word "window" for name like "window777", uniq for each time call event handler function.

"window"+Math.round(Math.random()*10000)

As name s uniq for each call, method window.open will create new window (tab in current case)

add in in window.open call

window.open( this.options[ this.selectedIndex ].value, "window"+Math.round(Math.random()*10000));

that's all

edited Feb 26 '15 at 08:12

answered Feb 25 '15 at 20:55

Anton Y. Reuchenko

443
3
5

please attempt to explain what you've done instead of just throwing code on the page. – castis Feb 25 '15 at 23:14
explanation had added – Anton Y. Reuchenko Feb 26 '15 at 08:13
You don't need to generate unique names, just use `"_blank"`. If you need to refer to the window later, save the return value of _window.open_ ... `var myWindow = window.open( url, "_blank" );` – Stephen P Mar 03 '15 at 17:47

score 0 · Accepted Answer · answered Feb 27 '15 at 18:45

Assuming you have two URLs for you option values, such as this:

<label for="Brand">Brand:</label>
<select id="brandSelect" name="brand_select">
    <optgroup label="Grills">
        <option value="http://site1.com http://site1A.com">DCS</option>
        <option value="http://site2.com http://site2A.com">Alfresco</option>
        <option value="http://site3.com http://site3A.com">Viking</option>
    </optgroup>
</select>

You can extract the two urls from the value by splitting them, then open a window/tab for each. Something like

<script type="text/javascript">
   var urlmenu = document.getElementById( 'brandSelect' );
   urlmenu.onchange = function() {
        var urls = this.options[ this.selectedIndex ].value.split(' ');
        urls.forEach( function(url) {
            window.open( url /*, '_blank'*/); // add a window name if desired
        });
   };
</script>

Use whatever parameters you need for window.open(...)

Thanks for your help this worked! If I wanted to change it so that when they hit a submit button or call to action could I do that just by creating a onClick event attached to a function? — Luis, Mar 03 '15 at 16:47
@CodeWeaver ... if this worked I'd appreciate it if you would accept the answer (and maybe upvote too!) — Stephen P, Mar 03 '15 at 17:33
@CodeWeaver - yes you can add an "onsubmit" handler to a form or add an "onclick" handler to anything. Don't use `
`, prefer [addEventListener](http://stackoverflow.com/q/2657182/17300) or a framework such as [jQuery](http://api.jquery.com/click/) — Stephen P, Mar 03 '15 at 17:36

Form Dropdown Select Link

3 Answers3