0

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.

Toni
  • 3
  • 1
  • 2

4 Answers4

4

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"
Nick Craver
  • 623,446
  • 136
  • 1,297
  • 1,155
  • Thank you very much Nick, your example is just great. – Toni Jul 13 '10 at 18:18
  • You won't get the expected result if your user prefixes their number with a zero (0), parseInt() treats leading-zero numbers as octal (base 8), so `parseInt("010")` returns `8`, `parseInt("011")` returns `9`, and so forth. `parseInt("08")` and `parseInt("09")` return `0`. – MightyE Jul 13 '10 at 18:23
1
<div>
    <input id="number" type="text" />

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

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

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

EDIT: yep, the comments are correct, and i've edited the code to reflect that

Scott Evernden
  • 39,136
  • 15
  • 78
  • 84
0
<option value="minus">
<option value="plus">

if the .val() of the element is 'minus' then do x, if its plus do y, etc.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434
0

If you want to support better than just addition and subtraction, you could do it as an eval() if you are careful about how data gets into #number:

<input id="number" />
<select id="Selection">
    <option value="+1">Plus 1</option>
    <option value="-1">Minus 1</option>
    <option value="*2">Times 2</option>
</select>
<input id="result"/>
<input type="button" onclick="$('#result').val(  eval($('#number').val() + $('#Selection').val()); );" value="Calculate" />

Do not let URL or FORM data be supplied as a default value for number though, or else you have opened yourself to a cross-site scripting vulnerability (XSS).

MightyE
  • 2,679
  • 18
  • 18
  • Never, ever, ever use `eval()` like this. If you can avoid it, never use it at all. There's absolutely no reason to do this, it's incorrect and is about the worst thing you could do in terms of performance. – Nick Craver Jul 13 '10 at 17:43
  • I never prefer to put code in the markup onclick. I much prefer it in separate files (or a Javascript section at the least). – Mark Schultheiss Jul 13 '10 at 17:47
  • @Nick: I'm not really a big fan of `eval()` either because of its *security* concerns in terms of XSS, but performance for something this miniscule is really not worth mentioning. – MightyE Jul 13 '10 at 18:18