CODEWITHSUNDEEP
phpjquery
Charles Park
Charles Park

Reputation: 63

Creating dynamic button with Jquery

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.

Upvotes: 1

Views: 70

Answers (3)

VikingCode
VikingCode

Reputation: 1052

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

Upvotes: 0

ankit verma
ankit verma

Reputation: 616

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>

Upvotes: 1

Charles Park
Charles Park

Reputation: 63

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

Upvotes: 0

Related Questions