JQuery Variables for Arithmetic being treated as strings

Question

I am trying to get the month that is 3 months from a selected month using a html select box and jquery in the below code. The code is not adding two variables together instead its treating them as two strings. Could anyone assist me to get this right?

<body>
    <form role="form" class="form-inline">
        <div class="form-group">
            <label class="control-label" for="Q1Month">
                Quarter 1 Month
            </label>
            <select class="form-control" id="Q1Month">
                <option selected value=''>--Select Month--</option>
                <option value='1'>January</option>
                <option value='2'>February</option>
                <option value='3'>March</option>
                <option value='4'>April</option>
                <option value='5'>May</option>
                <option value='6'>June</option>
                <option value='7'>July</option>
                <option value='8'>August</option>
                <option value='9'>September</option>
                <option value='10'>October</option>
                <option value='11'>November</option>
                <option value='12'>December</option>
            </select>
        </div>
    </form>
    <script src="js/jquery.js"></script>
    <script>
    $(function() {
        $('#Q1Month').change(function() {
            var month = $(this).val();
            $('#Q2Month').val(month);
            var advanceby = 3;
            var newmonth = month + advanceby;
            window.alert(newmonth);
        });
    });
    </script>
</body>

score 2 · Accepted Answer · answered Oct 10 '15 at 11:47

When any value is read from the DOM, it is string. To convert it to the Number you can use unary + operator.

Add + in front of the value

var month = +$(this).val();

+ is also the concatenation operator in Javascript, so when any one of the operand is string + is used for string concatenation.

$(function() {
  $('#Q1Month').change(
    function() {
      var month = $(this).val();
      $('#Q2Month').val(month);
      var advanceby = 3;
      var newmonth = month + advanceby;
      window.alert(newmonth);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form role="form" class="form-inline">
  <div class="form-group">
    <label class="control-label" for="Q1Month">
      Quarter 1 Month
    </label>
    <select class="form-control" id="Q1Month">
      <option selected value=''>--Select Month--</option>
      <option value='1'>January</option>
      <option value='2'>February</option>
      <option value='3'>March</option>
      <option value='4'>April</option>
      <option value='5'>May</option>
      <option value='6'>June</option>
      <option value='7'>July</option>
      <option value='8'>August</option>
      <option value='9'>September</option>
      <option value='10'>October</option>
      <option value='11'>November</option>
      <option value='12'>December</option>
    </select>
  </div>
</form>

score 0 · Answer 2 · answered Oct 10 '15 at 11:51

0

Because the value that you have fetched is a string! What You need is the option index and the actual value, so try accessing the current selected options index instead of value and then add 3 and reset your required element. Hope I helped

answered Oct 10 '15 at 11:51

Shambhavi

51
5

Rolwin Crasta · Answer 3 · 2015-10-10T12:09:38.513

val() always returns string, so use parseInt() to convert string to integer before adding

$(function() {
  $('#Q1Month').change(
    function() {
      var month = parseInt($(this).val(),10);
      $('#Q2Month').val(month);
      var advanceby = 3;
      var newmonth = month + advanceby;
      window.alert(newmonth);
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form role="form" class="form-inline">
  <div class="form-group">
    <label class="control-label" for="Q1Month">
      Quarter 1 Month
    </label>
    <select class="form-control" id="Q1Month">
      <option selected value=''>--Select Month--</option>
      <option value='1'>January</option>
      <option value='2'>February</option>
      <option value='3'>March</option>
      <option value='4'>April</option>
      <option value='5'>May</option>
      <option value='6'>June</option>
      <option value='7'>July</option>
      <option value='8'>August</option>
      <option value='9'>September</option>
      <option value='10'>October</option>
      <option value='11'>November</option>
      <option value='12'>December</option>
    </select>
  </div>
</form>

Code-dumps are not helpful, add some explanation – Tushar Oct 10 '15 at 12:08 — Tushar, Oct 10 '15 at 12:08

JQuery Variables for Arithmetic being treated as strings

3 Answers3