Creating dynamic button with Jquery

Question

Hey guys I'm trying to create a dynamic button from a drop down list. for example, in the HTML code below...

function dropdownbutton(){
    var make = document.getElementById("makelist");
    var answer = make.options[make.selectedIndex].value;

    alert("answer")

}

<div class="make">
    <label>Make</label>
    <select name="make" id="makelist" onchange="getId(this.value);">
        <option value="">Select Make</option>
        <option value="">1</option>
    </select>
</div>

<div id="model">
    <label>Model</label>
    <select name="model" id="modellist" onchange="getId2(this.value);">
        <option value="">Select Model</option>
        <option value="">1</option>
        <option value="">2</option>
    </select>
</div>

<div id="year">
    <label>Year</label>
    <select name="year" id="yearlist" onchange="getId3(this.value);">
        <option value="">Select Year</option>
        <option value="">1</option>
        <option value="">2</option>
    </select>
</div>

<button id="dropdownbutton" onclick="dropdownbutton()" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-3d vc_btn3-color-success">Dropdown</button>

I'm open to trying it in different languages but I would prefer to do it in php, I simply don't know how to get the values from each dropdown.

because your script have errors, check the console of the browser — Masivuye Cokile
– Masivuye Cokile, Commented Apr 26, 2017 at 12:45
great i got it to work. im able to get the values for each line after i updated the code for each makelist modellist and yearlist — Charles Park
– Charles Park, Commented Apr 26, 2017 at 12:49

ankit verma · Accepted Answer · 2017-04-26 13:15:03Z

I have taken help of Jquery here, inside the dropdownbutton() function i call all the select box element.

And using .each function extracted the value selected value of dropdowns. i check those value if not empty then created a button inside element having Id #append_new_button

Please check the below code it might solve your issue

Thanks

function dropdownbutton() {
  jQuery('#append_new_button').html('');
  jQuery('select').each(function(){
      var select_value = jQuery(this).val();
      var select_label = jQuery("#"+jQuery(this).attr('id')+" option[value='"+select_value+"']"). text();
      if(select_value != ''){
          jQuery('#append_new_button').append('<input type="button" id="'+select_value+'" value="'+select_label+'"></button>')
      }

  });
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="make">
  <label>Make</label>
  <select name="make" id="makelist">
    <option value="">Select Make</option>
    <option value="make_1">Make 1</option>
    <option value="make_2">Make 2</option>
  </select>
</div>

<div id="model">
  <label>Model</label>
  <select name="model" id="modellist" >
    <option value="">Select Model</option>
    <option value="model_1">Model 1</option>
    <option value="model_2">Model 2</option>
  </select>
</div>

<div id="year">
  <label>Year</label>
  <select name="year" id="yearlist" >
    <option value="">Select Year</option>
    <option value="year_1">year 1</option>
    <option value="year_2">year 2</option>
  </select>
</div>

<button id="dropdownbutton" onclick="dropdownbutton()" class="vc_general vc_btn3 vc_btn3-size-md vc_btn3-shape-rounded vc_btn3-style-3d vc_btn3-color-success">Dropdown</button>

<div id="append_new_button">

</div>

Please add a description with your answer - while this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

Charles Park · Accepted Answer · 2017-04-26 12:52:27Z

0

I updated that code to find the values for each drop down

    function dropdownbutton(val){
    var make = document.getElementById("makelist");
    var answer = make.options[make.selectedIndex].value;
    var model = document.getElementById("modellist");
    var answer2 = model.options[model.selectedIndex].value;
    var year = document.getElementById("yearlist");
    var answer3 = year.options[year.selectedIndex].value;

    alert(answer2);
    }

Now i need to figure out how to pass these variables to a link for example, mydomain.com/answer/answer2/answer3

answered Apr 26, 2017 at 12:52

Charles Park

637 bronze badges

1 Comment

Agam Banga Over a year ago

Use this window.location.href = 'mydomain.com/' + answer + '/' + answer2 + '/' + answer3;

VikingCode · Accepted Answer · 2017-04-26 13:15:36Z

0

i think that this code is more dynamic.

$("button").click(function() { // if button is clicked

  var arr = $('select').map(function() { // run through all selects and get value
    return this.value
  }).get();

  var url = "http://exp.com"; // base for the url

  arr.forEach(function(item) {
            url = url + '/' + item; // append all options to the base url
        });

  window.location.href(url); // redirect to base url + all options
});

Don't forget to add value to your options. <option value="1">1</option>

Please look at jsfiddle for a working example

answered Apr 26, 2017 at 13:15

VikingCode

1,0521 gold badge8 silver badges21 bronze badges

Collectives™ on Stack Overflow

Creating dynamic button with Jquery

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related