X + Y gives HTMLObject (Select/option)

Question

I'm trying to add 2 sums, that are getting fetched by an select option.

All I want is to calculate X + Y, but i get a weird error.

Code:

$( document ).ready(function() {
    var id1 = $("#one").val();
    $("#final_value").val(id1);

    var id2 = $("#two").val();
    $("#final_value").val(id2);

    $("#final_value").val(this + parseInt(id1) + parseInt(id2));    
});

https://jsfiddle.net/xpvt214o/957709/

Answer 1

You have this in your #final_value element. I've also added a change event to your code so it will update when one of the options change:

$(document).ready(function() {
    $("#one, #two").on("change", () => {
        var id1 = $("#one").val();
        var id2 = $("#two").val();

        $("#final_value").val(parseInt(id1) + parseInt(id2));
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
    <select class="full-width select2" name="" id="one" data-placeholder="" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</td>
<td>
    <select class="full-width select2" name="" id="two" data-placeholder="" >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
    </select>
</td>
<label for="final_value">Result:</label>
<input type="text" value="" id="final_value">