获取下拉框的值并将其添加

Question

I currently have two dropdown boxes and I want to make it so that when the user selects the second box, it runs an onChange method and adds the value with the value of the first dropdown box.

Example:

<select class="form-control" id="dropbox1" changeHiddenInput()">
<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>
</select>

<select class="form-control" id="dropbox2" changeHiddenInput()">
<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>
</select>
<input id="submitbutton" type="submit" class="btn btn-primary" style="margin-top: 5px" name="btnLogin" value="" />

This is what I have in my javascript and it's not working.

    function changeHiddenInput() {
    var dropdown1 = document.getElementById('dropdown1').value;
    var dropdown2 = document.getElementById('dropdown2').value;
    console.log(dropdown1);
    console.log(dropdown2);
    var var1 = parseInt(dropdown1);
    var var2 = parseInt(dropdown2);
    var a = var1+var2;
    document.getElementById('submitbutton').value= a;
}

If 1 and 2 are selected. It'll change the button's value to 3.

Thanks!

Answer 1

document.getElementById('dropbox2').onchange= function(){
    var val1=document.getElementById('dropbox1').value;
    var val2=document.getElementById('dropbox2').value;
    document.getElementById('submitbutton').value=parseInt(val1)+parseInt(val2);
}

Answer 2

Use the following HTML and Script

<select class="form-control" id="dropbox1" >
<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>
</select>

<select class="form-control" id="dropbox2" onchange="addDb()">
<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>
</select>

<input id="submitbutton" type="submit" class="btn btn-primary" style="margin-top: 5px" name="btnLogin" value="" />

<script>
function addDb() {
     var val1=document.getElementById('dropbox1').value;
    var val2=document.getElementById('dropbox2').value;
    document.getElementById('submitbutton').value=parseInt(val1)+parseInt(val2);
}
</script>

Here is a FiddleDemo

Answer 3

the error is in your html code only. call changeHiddenInput function with onchange event in dropdown

html

<select class="form-control" id="dropbox1" >
<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>
</select>

<select class="form-control" id="dropbox2" onchange ="changeHiddenInput();">
<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>
</select>
<input id="submitbutton" type="submit" class="btn btn-primary" style="margin-top: 5px" name="btnLogin" value="" />

Java Script

<script>
    function changeHiddenInput()
    {
      var val1 = document.getElementById('dropbox1').value;
      var val2 = document.getElementById('dropbox2').value;
      document.getElementById('submitbutton').value=parseInt(val1)+parseInt(val2);
    }
</script>