X + Y gives HTMLObject (Select/option)

2

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/

javascript jquery html html5

share|improve this question

edited Nov 22 '18 at 12:18

Peter B

13.3k52044

asked Nov 22 '18 at 12:11

BGHBGH

132

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  this on your final line of code is casing the issue - remove it and you should be okay?
  
  – Christheoreo
  Nov 22 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To do: Stop trying to “add” numbers onto this …
  
  – misorude
  Nov 22 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why you try to like that "this + parseInt(id1) + parseInt(id2)", why you wanna to add this to smth?
  
  – Konstantin Kudelko
  Nov 22 '18 at 12:14
  

  
  
  
  

add a comment | 

2

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/

javascript jquery html html5

share|improve this question

edited Nov 22 '18 at 12:18

Peter B

13.3k52044

asked Nov 22 '18 at 12:11

BGHBGH

132

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  this on your final line of code is casing the issue - remove it and you should be okay?
  
  – Christheoreo
  Nov 22 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To do: Stop trying to “add” numbers onto this …
  
  – misorude
  Nov 22 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why you try to like that "this + parseInt(id1) + parseInt(id2)", why you wanna to add this to smth?
  
  – Konstantin Kudelko
  Nov 22 '18 at 12:14
  

  
  
  
  

add a comment | 

2

2

2

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/

javascript jquery html html5

share|improve this question

edited Nov 22 '18 at 12:18

Peter B

13.3k52044

asked Nov 22 '18 at 12:11

BGHBGH

132

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/

javascript jquery html html5

javascript jquery html html5

share|improve this question

edited Nov 22 '18 at 12:18

Peter B

13.3k52044

asked Nov 22 '18 at 12:11

BGHBGH

132

share|improve this question

edited Nov 22 '18 at 12:18

Peter B

13.3k52044

asked Nov 22 '18 at 12:11

BGHBGH

132

share|improve this question

share|improve this question

edited Nov 22 '18 at 12:18

Peter B

13.3k52044

edited Nov 22 '18 at 12:18

Peter B

13.3k52044

edited Nov 22 '18 at 12:18

Peter B

13.3k52044

13.3k52044

asked Nov 22 '18 at 12:11

BGHBGH

132

asked Nov 22 '18 at 12:11

BGHBGH

132

asked Nov 22 '18 at 12:11

BGHBGH

132

132

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  this on your final line of code is casing the issue - remove it and you should be okay?
  
  – Christheoreo
  Nov 22 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To do: Stop trying to “add” numbers onto this …
  
  – misorude
  Nov 22 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why you try to like that "this + parseInt(id1) + parseInt(id2)", why you wanna to add this to smth?
  
  – Konstantin Kudelko
  Nov 22 '18 at 12:14
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  2
  

  
  
  
  
  
  

  
  
  this on your final line of code is casing the issue - remove it and you should be okay?
  
  – Christheoreo
  Nov 22 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  To do: Stop trying to “add” numbers onto this …
  
  – misorude
  Nov 22 '18 at 12:13
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Why you try to like that "this + parseInt(id1) + parseInt(id2)", why you wanna to add this to smth?
  
  – Konstantin Kudelko
  Nov 22 '18 at 12:14
  

  
  
  
  

2

2

this on your final line of code is casing the issue - remove it and you should be okay?

– Christheoreo
Nov 22 '18 at 12:13

this on your final line of code is casing the issue - remove it and you should be okay?

– Christheoreo
Nov 22 '18 at 12:13

To do: Stop trying to “add” numbers onto this …

– misorude
Nov 22 '18 at 12:13

To do: Stop trying to “add” numbers onto this …

– misorude
Nov 22 '18 at 12:13

Why you try to like that "this + parseInt(id1) + parseInt(id2)", why you wanna to add this to smth?

– Konstantin Kudelko
Nov 22 '18 at 12:14

Why you try to like that "this + parseInt(id1) + parseInt(id2)", why you wanna to add this to smth?

– Konstantin Kudelko
Nov 22 '18 at 12:14

add a comment | 

5 Answers
5

active

oldest

votes

4

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">

share|improve this answer

answered Nov 22 '18 at 12:16

Gary ThomasGary Thomas

1,5151415

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank's! That was working! Thank you so much Gary. I wish you the best :-)
  
  – BGH
  Nov 23 '18 at 8:11
  

  
  
  
  

add a comment | 

3

There's a this in the last statement, replace the last line with:

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

Now it should work.

share|improve this answer

answered Nov 22 '18 at 12:14

François LanzerayFrançois Lanzeray

8318

add a comment | 

3

Remove this value:

From:

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

To:

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

Cause if you will use this your function returns a string as:

[object HTMLDocument]11

share|improve this answer

answered Nov 22 '18 at 12:15

Konstantin KudelkoKonstantin Kudelko

1278

add a comment | 

2

I have altered Gary Thomas Code little bit:

Instead of parseInt(), you can use like this:

var id1 = +$("#one").val();

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

	$(document).ready(function() {

    $("#one, #two").on("change", () => {

        var id1 = +$("#one").val();

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

        var total = id1+id2;

        $("#final_value").val(total);

    });

});

<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">

share|improve this answer

answered Nov 22 '18 at 12:24

Aravind Bhat KAravind Bhat K

2741214

add a comment | 

1

Just remove this keyword from your summation as so :

$( document ).ready(function() {

    var id1 = $("#one").val();

    $("#final_value").val(id1);



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

    $("#final_value").val(id2);



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

});

share|improve this answer

answered Nov 22 '18 at 12:44

Voice Of The RainVoice Of The Rain

123211

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53430753%2fx-y-gives-htmlobject-select-option%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

5 Answers
5

active

oldest

votes

5 Answers
5

active

oldest

votes

active

oldest

votes

active

oldest

votes

4

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">

share|improve this answer

answered Nov 22 '18 at 12:16

Gary ThomasGary Thomas

1,5151415

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank's! That was working! Thank you so much Gary. I wish you the best :-)
  
  – BGH
  Nov 23 '18 at 8:11
  

  
  
  
  

add a comment | 

4

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">

share|improve this answer

answered Nov 22 '18 at 12:16

Gary ThomasGary Thomas

1,5151415

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank's! That was working! Thank you so much Gary. I wish you the best :-)
  
  – BGH
  Nov 23 '18 at 8:11
  

  
  
  
  

add a comment | 

4

4

4

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">

share|improve this answer

answered Nov 22 '18 at 12:16

Gary ThomasGary Thomas

1,5151415

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">

$(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">

$(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">

share|improve this answer

answered Nov 22 '18 at 12:16

Gary ThomasGary Thomas

1,5151415

share|improve this answer

share|improve this answer

answered Nov 22 '18 at 12:16

Gary ThomasGary Thomas

1,5151415

answered Nov 22 '18 at 12:16

Gary ThomasGary Thomas

1,5151415

answered Nov 22 '18 at 12:16

Gary ThomasGary Thomas

1,5151415

1,5151415

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank's! That was working! Thank you so much Gary. I wish you the best :-)
  
  – BGH
  Nov 23 '18 at 8:11
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Thank's! That was working! Thank you so much Gary. I wish you the best :-)
  
  – BGH
  Nov 23 '18 at 8:11
  

  
  
  
  

Thank's! That was working! Thank you so much Gary. I wish you the best :-)

– BGH
Nov 23 '18 at 8:11

Thank's! That was working! Thank you so much Gary. I wish you the best :-)

– BGH
Nov 23 '18 at 8:11

add a comment | 

3

There's a this in the last statement, replace the last line with:

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

Now it should work.

share|improve this answer

answered Nov 22 '18 at 12:14

François LanzerayFrançois Lanzeray

8318

add a comment | 

3

There's a this in the last statement, replace the last line with:

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

Now it should work.

share|improve this answer

answered Nov 22 '18 at 12:14

François LanzerayFrançois Lanzeray

8318

add a comment | 

3

3

3

There's a this in the last statement, replace the last line with:

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

Now it should work.

share|improve this answer

answered Nov 22 '18 at 12:14

François LanzerayFrançois Lanzeray

8318

There's a this in the last statement, replace the last line with:

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

Now it should work.

share|improve this answer

answered Nov 22 '18 at 12:14

François LanzerayFrançois Lanzeray

8318

share|improve this answer

share|improve this answer

answered Nov 22 '18 at 12:14

François LanzerayFrançois Lanzeray

8318

answered Nov 22 '18 at 12:14

François LanzerayFrançois Lanzeray

8318

answered Nov 22 '18 at 12:14

François LanzerayFrançois Lanzeray

8318

8318

add a comment | 

add a comment | 

3

Remove this value:

From:

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

To:

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

Cause if you will use this your function returns a string as:

[object HTMLDocument]11

share|improve this answer

answered Nov 22 '18 at 12:15

Konstantin KudelkoKonstantin Kudelko

1278

add a comment | 

3

Remove this value:

From:

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

To:

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

Cause if you will use this your function returns a string as:

[object HTMLDocument]11

share|improve this answer

answered Nov 22 '18 at 12:15

Konstantin KudelkoKonstantin Kudelko

1278

add a comment | 

3

3

3

Remove this value:

From:

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

To:

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

Cause if you will use this your function returns a string as:

[object HTMLDocument]11

share|improve this answer

answered Nov 22 '18 at 12:15

Konstantin KudelkoKonstantin Kudelko

1278

Remove this value:

From:

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

To:

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

Cause if you will use this your function returns a string as:

[object HTMLDocument]11

share|improve this answer

answered Nov 22 '18 at 12:15

Konstantin KudelkoKonstantin Kudelko

1278

share|improve this answer

share|improve this answer

answered Nov 22 '18 at 12:15

Konstantin KudelkoKonstantin Kudelko

1278

answered Nov 22 '18 at 12:15

Konstantin KudelkoKonstantin Kudelko

1278

answered Nov 22 '18 at 12:15

Konstantin KudelkoKonstantin Kudelko

1278

1278

add a comment | 

add a comment | 

2

I have altered Gary Thomas Code little bit:

Instead of parseInt(), you can use like this:

var id1 = +$("#one").val();

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

	$(document).ready(function() {

    $("#one, #two").on("change", () => {

        var id1 = +$("#one").val();

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

        var total = id1+id2;

        $("#final_value").val(total);

    });

});

<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">

share|improve this answer

answered Nov 22 '18 at 12:24

Aravind Bhat KAravind Bhat K

2741214

add a comment | 

2

I have altered Gary Thomas Code little bit:

Instead of parseInt(), you can use like this:

var id1 = +$("#one").val();

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

	$(document).ready(function() {

    $("#one, #two").on("change", () => {

        var id1 = +$("#one").val();

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

        var total = id1+id2;

        $("#final_value").val(total);

    });

});

<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">

share|improve this answer

answered Nov 22 '18 at 12:24

Aravind Bhat KAravind Bhat K

2741214

add a comment | 

2

2

2

I have altered Gary Thomas Code little bit:

Instead of parseInt(), you can use like this:

var id1 = +$("#one").val();

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

	$(document).ready(function() {

    $("#one, #two").on("change", () => {

        var id1 = +$("#one").val();

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

        var total = id1+id2;

        $("#final_value").val(total);

    });

});

<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">

share|improve this answer

answered Nov 22 '18 at 12:24

Aravind Bhat KAravind Bhat K

2741214

I have altered Gary Thomas Code little bit:

Instead of parseInt(), you can use like this:

var id1 = +$("#one").val();

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

	$(document).ready(function() {

    $("#one, #two").on("change", () => {

        var id1 = +$("#one").val();

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

        var total = id1+id2;

        $("#final_value").val(total);

    });

});

<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">

	$(document).ready(function() {

    $("#one, #two").on("change", () => {

        var id1 = +$("#one").val();

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

        var total = id1+id2;

        $("#final_value").val(total);

    });

});

<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">

	$(document).ready(function() {

    $("#one, #two").on("change", () => {

        var id1 = +$("#one").val();

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

        var total = id1+id2;

        $("#final_value").val(total);

    });

});

<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">

share|improve this answer

answered Nov 22 '18 at 12:24

Aravind Bhat KAravind Bhat K

2741214

share|improve this answer

share|improve this answer

answered Nov 22 '18 at 12:24

Aravind Bhat KAravind Bhat K

2741214

answered Nov 22 '18 at 12:24

Aravind Bhat KAravind Bhat K

2741214

answered Nov 22 '18 at 12:24

Aravind Bhat KAravind Bhat K

2741214

2741214

add a comment | 

add a comment | 

1

Just remove this keyword from your summation as so :

$( document ).ready(function() {

    var id1 = $("#one").val();

    $("#final_value").val(id1);



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

    $("#final_value").val(id2);



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

});

share|improve this answer

answered Nov 22 '18 at 12:44

Voice Of The RainVoice Of The Rain

123211

add a comment | 

1

Just remove this keyword from your summation as so :

$( document ).ready(function() {

    var id1 = $("#one").val();

    $("#final_value").val(id1);



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

    $("#final_value").val(id2);



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

});

share|improve this answer

answered Nov 22 '18 at 12:44

Voice Of The RainVoice Of The Rain

123211

add a comment | 

1

1

1

Just remove this keyword from your summation as so :

$( document ).ready(function() {

    var id1 = $("#one").val();

    $("#final_value").val(id1);



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

    $("#final_value").val(id2);



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

});

share|improve this answer

answered Nov 22 '18 at 12:44

Voice Of The RainVoice Of The Rain

123211

Just remove this keyword from your summation as so :

$( document ).ready(function() {

    var id1 = $("#one").val();

    $("#final_value").val(id1);



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

    $("#final_value").val(id2);



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

});

share|improve this answer

answered Nov 22 '18 at 12:44

Voice Of The RainVoice Of The Rain

123211

share|improve this answer

share|improve this answer

answered Nov 22 '18 at 12:44

Voice Of The RainVoice Of The Rain

123211

answered Nov 22 '18 at 12:44

Voice Of The RainVoice Of The Rain

123211

answered Nov 22 '18 at 12:44

Voice Of The RainVoice Of The Rain

123211

123211

add a comment | 

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53430753%2fx-y-gives-htmlobject-select-option%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here