How to add multiple dropdown form with submit button combine value and go to url

Question

I want the submit button to act on the combined values in the two didferent dropwdown menu's in the form.

For example... west and winter is a different URL then west and summer

I'm struggeling for days to make this work. I feel some how this must be possible. Please help!

This is the code I use. When I replace the value to a URL. The URL will be loaded on submit (go). I want the values of the first dropdown and second dropdown to be counted and the result should be a URL on submit. Finaly there should be 16 different URLs.

$(document).ready(function () {
$(".go-btn").click(function () {
location = $("#selection option:selected").val();
});
});

<div class="selCont">
<h2>pick an option</h2>

<select id="selection" name="selection">
<option value="1">West</option>
<option value="2">East</option>
<option value="3">North</option>
<option value="4">South</option>
</select>

<select id="selection" name="selection">
<option value="1">Winter</option>
<option value="2">Spring</option>
<option value="3">Summer</option>
<option value="4">Fall</option>

</select>
<button class="go-btn" type="submit">Go</button>
</div>

Hey, is your URL going to contain the values (i.e., 1, 2, etc...) or do you need the text (i.e., West, East, etc...)? — versalle88
– versalle88, Commented Dec 4, 2014 at 15:24
I'm just finding code online and this was the closest but if anyone can help out would be great. I need to have 2 dropdowns. Dropdown 1 will have eg: 1. I am working with my hands, 2. I am working with my feet, 3. I am working with my body. Dropdown 2 will have eg: 1. Acne, 2. Dry Skin, 3. Redness, 4. Sensitive Skin. I need to be able to do the following: If user selects eg: from Dropdown 1: I am working with hands and Dropdown 2: Dry Skin ... when the user clicks submit it will take them to a URL eg: www.google.ca — Marcelo Parra
– Marcelo Parra, Commented Dec 4, 2014 at 15:30
@MarceloParra There are a couple of answers now that should give you a good starting point. — versalle88
– versalle88, Commented Dec 4, 2014 at 15:39

versalle88 · Accepted Answer · 2014-12-04 15:41:00Z

2

Try this code:

jQuery( document ).ready(function( $ ) {
    $( ".go-btn" ).click(function() {
        // Grab text from select boxes
        var firstSelection = $( "#selection1 option:selected" ).text();
        var secondSelection = $( "#selection2 option:selected" ).text();

        // Set URL, change as necessary
        var url = "http://www.example.com/" + firstSelection + "/" + secondSelection;

        // Redirect
        window.location.href = url;
    });
});

Also, change the IDs on your select boxes:

<select id="selection1">
    <option value="1">Hands</option>
    <option value="2">Feet</option>
    <option value="3">Body</option>
</select>
<select id="selection2">
    <option value="1">Acne</option>
    <option value="2">Dry Skin</option>
    <option value="3">Redness</option>
    <option value="4">Sensitivity</option>
</select>

Thanks,

Andrew

edited Dec 4, 2014 at 15:41

answered Dec 4, 2014 at 15:33

versalle88

1,1471 gold badge7 silver badges19 bronze badges

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

Comments

KooiInc · Accepted Answer · 2014-12-04 15:34:18Z

0

Try giving both selector elements a unique id. Here's a working snippet:

(function () {
  
  $(".go-btn").on(
    'click', 
     function (e) {
       // within this function you should figure out the url
       // to redirect to, depending on the selected values
       // the next line only shows the text of selected values
       $('#selected').html([$('#select1 option:selected').text(), 
                            $('#select2 option:selected').text()].join('/'));
  });
  
}());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="selCont">
  
  <h2>pick an option</h2>

  <select id="select1">
    <option value="1" selected>West</option>
    <option value="2">East</option>
    <option value="3">North</option>
    <option value="4">South</option>
  </select>

  <select id="select2">
    <option value="1" selected>Winter</option>
    <option value="2">Spring</option>
    <option value="3">Summer</option>
    <option value="4">Fall</option>
  </select>

  <button class="go-btn" type="submit">Go</button>
  
</div>
<div id="selected"></div>

answered Dec 4, 2014 at 15:34

KooiInc

124k32 gold badges145 silver badges181 bronze badges

1 Comment

Marcelo Parra Over a year ago

I'm just finding code online and this was the closest but if anyone can help out would be great. I need to have 2 dropdowns. Dropdown 1 will have eg: 1. I am working with my hands, 2. I am working with my feet, 3. I am working with my body. Dropdown 2 will have eg: 1. Acne, 2. Dry Skin, 3. Redness, 4. Sensitive Skin. I need to be able to do the following: If user selects eg: from Dropdown 1: I am working with hands and Dropdown 2: Dry Skin ... when the user clicks submit it will take them to a URL eg: www.google.ca

Marcelo Parra · Accepted Answer · 2014-12-04 16:40:40Z

So what I need to do now is for example: If a user selects:

I am: "Someone who works with my hands" and I need: "UV Protection"

Once they click Go it will take them eg: http://glysomed.bydecosta.com/portfolio-item/hand-cream-frag-free/

or

If user clicks: I am: "Someone who works with my feet" and I need: "Acne"

Once they click Go it will take them eg: http://glysomed.bydecosta.com/portfolio-item/foot-balm/

jQuery( document ).ready(function( $ ) {
    $( ".go-btn" ).click(function() {
        // Grab text from select boxes
        var firstSelection = $( "#selection1 option:selected" ).text();
        var secondSelection = $( "#selection2 option:selected" ).text();

        // Set URL, change as necessary
        var url = "http://www.example.com/" + firstSelection + "/" + secondSelection;

        // Redirect
        window.location.href = url;
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="selCont">
  
  <h2>Me Time</h2>

I Am:
  <select id="select1">
  	<option value=" " selected="selected">- Select -</option>
    <option value="1">Someone who works with my hands</option>
    <option value="2">Someone who works wit my feet</option>
    <option value="3">Someone who works with my body</option>
  </select>

and I need:
  <select id="select2">
    <option value=" " selected="selected">- Select -</option>
    <option value="1">UV Protection</option>
    <option value="2">Acne</option>
    <option value="3">Dry Skin</option>
    <option value="4">Eczema</option>
    <option value="5">Itchy Relief</option>
    <option value="6">Redness</option>
    <option value="7">Sensitive Skin</option>
  </select>

  <button class="go-btn" type="submit">Go</button>
  
</div>
<div id="selected"></div>

Collectives™ on Stack Overflow

How to add multiple dropdown form with submit button combine value and go to url

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related