Question

I have this code:

<div>
    <input id="number" type="text" />

    <select id="Selection" name="D1"> 
    <option>Plus 1</option>
    <option>Minus 1</option>
    </select>

    <input id="result" type="text" />
    </div>

How could I calculate any number entered into the input “number” based on the value chosen from the select control using jQuery?
For example I would like to enter 5 in the input “number” and if I choose “Plus 1” then add 1 to the number and show the result in the “result” input. If I choose “Minus 1” then I will do a substraction and show the new result.
thank you.

Answer 1

You can do it like this:

$('#Selection').change(calc); //update result when changing the number
$("#number").keyup(calc);     //update result when select changes

function calc() {
  $('#result').val(
    parseInt($('#number').val(), 10) + parseInt($("#Selection").val(), 10)
  );
}

Give it a try here, the important part is the parseInt() your input (you should also add a numbers-only filter, etc.) Otherwise .val() from either input is a string, think of it this way:

• 1 + 1 == 2
• "1" + "1" = "11"