CODEWITHSUNDEEP
javascripthtml
Ceejay
Ceejay

Reputation: 7277

How can i get the drop down selected values and form an number

Here i have a 3 drop-down list which holds number ranging from 0 to 9, this is actually for the cost input.for example if i select 4 in 1st dropdown and 5in second dropdown and 0 in third dropdown, then the cost should be 450. now what i am trying to do is, Once i input the values and click submit,i should capture the value 450 in one variable and convert it to integer. How can i do that?

here's what i have tried

<select id="cost1" class="cost-block-add">
    <option value="0">0</option>
    <option value="1">1</option>
    ...  
</select>

<select id="cost2" class="cost-block-add">
    <option value="0">0</option>
    <option value="1">1</option>
    ...
</select>

<select id="cost3" class="cost-block-add">
    <option value="0">0</option>
    <option value="1">1</option>
    ...
</select>

<button class="submit-button minimal-padding" onclick="getCost()"> submit </button>

JS:

function getCost(){
    var str;
    var num_arr = [];
    var elems = document.querySelectorAll('.cost-block-deduct');
    elems.forEach(function(el){          
        var nums = el.options[el.selectedIndex].text                
        num_arr.push(nums)
    })
}

Upvotes: 0

Views: 87

Answers (4)

Akshay
Akshay

Reputation: 805

Reduce method to acheive the solution

var a = document.querySelectorAll('.cost-block-add');

var b = Array.from(a);

var abc = b.reduce(function(a,b){a.push(b[b.selectedIndex].innerHTML);return a},[]).join('');

parseInt(abc)

Upvotes: 0

HenryDev
HenryDev

Reputation: 4983

Here's a working solution. No need to use an array. You can simply concatenate the values. Hope it helps!

function getCost()
{
        var convertedNumber = "";
        var elems = document.querySelectorAll('.cost-block-add');
        elems.forEach(function(el){          
              var nums = el.options[el.selectedIndex].text                
              convertedNumber += nums;

        });
       alert(parseInt(convertedNumber));
}
<form>
  <select id="cost1" class="cost-block-add">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>

    <select id="cost2" class="cost-block-add">
       <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>

    <select id="cost3" class="cost-block-add">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
        <option value="9">9</option>
    </select>
<button onClick="getCost()">Click</button>
</form>

Upvotes: 1

Hezron
Hezron

Reputation: 352

JQuery

function getCost(){
    var cost = "";
    $("select.cost-block-add").each(function(index, elem){
      var val = $(elem).val();
      cost = cost.concat(val);
    });

    var costInt = parseInt(cost);
}

Upvotes: 0

Sandeep Nayak
Sandeep Nayak

Reputation: 4757

You have used wrong class name. It should be .cost-block-add

You can try this:

function getCost() {
    var str;
    var num_arr = [];
    var elems = document.querySelectorAll('.cost-block-add');
    elems.forEach(function(el) {

      var nums = el.options[el.selectedIndex].value;
      num_arr.push(nums)
    });
    console.log(num_arr);
    //alert(num_arr.join("")); this is string
    alert((Number.parseInt(num_arr.join("")))); // convert to number
    }
<select id="cost1" class="cost-block-add">
  <option value="0">0</option>
  <option value="1">1</option>

</select>

<select id="cost2" class="cost-block-add">
  <option value="0">0</option>
  <option value="1">1</option>

</select>

<select id="cost3" class="cost-block-add">
  <option value="0">0</option>
  <option value="1">1</option>

</select>
<button onClick="getCost()">Click</button>

Upvotes: 2

Related Questions