Mixing
How do I update a div with the sum value of 2 form inputs and update when they change
0
I have 2 inputs (one number input and one select) with values that can change, I want to display the sum of both values even when they change on a div.
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price + price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>How do I make this work?
javascript jquery
edited Nov 22 '18 at 1:06
pmkro
1,425717
asked Nov 21 '18 at 23:11
William RichardsonWilliam Richardson
32
add a comment |
0
I have 2 inputs (one number input and one select) with values that can change, I want to display the sum of both values even when they change on a div.
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price + price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>How do I make this work?
javascript jquery
edited Nov 22 '18 at 1:06
pmkro
1,425717
asked Nov 21 '18 at 23:11
William RichardsonWilliam Richardson
32
Hi William, welcome to StackOverflow. Could you please post your html markup as well?
– zfrisch
Nov 21 '18 at 23:15
We need the rest of your code to help you.
– Jack Bashford
Nov 21 '18 at 23:16
Ok, I updated my question with the HTML, thanks guys!
– William Richardson
Nov 21 '18 at 23:21
Thanks for adding the relevant code. Please explain exactly what isn't working about the code you entered. Specifically what you expect to happen vs. what is happening. stackoverflow.com/help/how-to-ask
– SherylHohman
Nov 22 '18 at 0:49
add a comment |
0
0
0
I have 2 inputs (one number input and one select) with values that can change, I want to display the sum of both values even when they change on a div.
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price + price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>How do I make this work?
javascript jquery
edited Nov 22 '18 at 1:06
pmkro
1,425717
asked Nov 21 '18 at 23:11
William RichardsonWilliam Richardson
32
I have 2 inputs (one number input and one select) with values that can change, I want to display the sum of both values even when they change on a div.
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price + price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>How do I make this work?
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price + price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price + price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>javascript jquery
javascript jquery
edited Nov 22 '18 at 1:06
pmkro
1,425717
asked Nov 21 '18 at 23:11
William RichardsonWilliam Richardson
32
edited Nov 22 '18 at 1:06
pmkro
1,425717
asked Nov 21 '18 at 23:11
William RichardsonWilliam Richardson
32
edited Nov 22 '18 at 1:06
pmkro
1,425717
edited Nov 22 '18 at 1:06
pmkro
1,425717
edited Nov 22 '18 at 1:06
pmkro
1,425717
1,425717
asked Nov 21 '18 at 23:11
William RichardsonWilliam Richardson
32
asked Nov 21 '18 at 23:11
William RichardsonWilliam Richardson
32
asked Nov 21 '18 at 23:11
William RichardsonWilliam Richardson
32
32
Hi William, welcome to StackOverflow. Could you please post your html markup as well?
– zfrisch
Nov 21 '18 at 23:15
We need the rest of your code to help you.
– Jack Bashford
Nov 21 '18 at 23:16
Ok, I updated my question with the HTML, thanks guys!
– William Richardson
Nov 21 '18 at 23:21
Thanks for adding the relevant code. Please explain exactly what isn't working about the code you entered. Specifically what you expect to happen vs. what is happening. stackoverflow.com/help/how-to-ask
– SherylHohman
Nov 22 '18 at 0:49
add a comment |
Hi William, welcome to StackOverflow. Could you please post your html markup as well?
– zfrisch
Nov 21 '18 at 23:15
We need the rest of your code to help you.
– Jack Bashford
Nov 21 '18 at 23:16
Ok, I updated my question with the HTML, thanks guys!
– William Richardson
Nov 21 '18 at 23:21
Thanks for adding the relevant code. Please explain exactly what isn't working about the code you entered. Specifically what you expect to happen vs. what is happening. stackoverflow.com/help/how-to-ask
– SherylHohman
Nov 22 '18 at 0:49
Hi William, welcome to StackOverflow. Could you please post your html markup as well?
– zfrisch
Nov 21 '18 at 23:15
Hi William, welcome to StackOverflow. Could you please post your html markup as well?
– zfrisch
Nov 21 '18 at 23:15
We need the rest of your code to help you.
– Jack Bashford
Nov 21 '18 at 23:16
We need the rest of your code to help you.
– Jack Bashford
Nov 21 '18 at 23:16
Ok, I updated my question with the HTML, thanks guys!
– William Richardson
Nov 21 '18 at 23:21
Ok, I updated my question with the HTML, thanks guys!
– William Richardson
Nov 21 '18 at 23:21
Thanks for adding the relevant code. Please explain exactly what isn't working about the code you entered. Specifically what you expect to happen vs. what is happening. stackoverflow.com/help/how-to-ask
– SherylHohman
Nov 22 '18 at 0:49
Thanks for adding the relevant code. Please explain exactly what isn't working about the code you entered. Specifically what you expect to happen vs. what is happening. stackoverflow.com/help/how-to-ask
– SherylHohman
Nov 22 '18 at 0:49
add a comment |
3 Answers
3
active
oldest
votes
0
Hope this help
$(document).ready(function() {
var display = $('#js-cost');
$('#js-price').on('change', function() {
display.html(getTotalPrice());
});
$('#js-duration').on('change', function() {
display.html(getTotalPrice());
});
function getTotalPrice(){
var base_price = parseInt($('#js-price').val());
var duration = parseInt($('#js-duration').val());
var price = 0;
15===duration?price=0:30===duration?price=10:45===duration?price=15:60===duration&&(price=20);
return base_price+price;
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:48
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
This works exactly as I want! Thanks!
– William Richardson
Nov 21 '18 at 23:52
add a comment |
0
You are very close. Your change event is okay for a select list, but for realtime change of an input that is invariant to whether you are using a keyboard or clicking on arrow keys, use the .bind('input', callback) method.
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').bind('input', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(parseInt(base_price) + parseInt(price));
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:38
Iskandar Reza RazaliIskandar Reza Razali
5711415
I want the span#js-cost to display the sum of both the select and the input regardless of which one got changed, what happens here is when I change the value of the input it only shows that and ignore the value of the select
– William Richardson
Nov 21 '18 at 23:42
add a comment |
0
If i'm interpreting the question correctly you have almost everything working, you only needed to add the final values together. this initially wasn't working because the .val was being returned as a string rather than a number so passing it through a parseInt converts it to a number allowing it to work correctly.
Note that parseInt() will generally only work on whole numbers, you can use parseFloat() to work with decimals
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = parseInt($('#js-price').val());
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price+price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:40
Aaron McGuireAaron McGuire
43218
I may have completely misinterpreted the question but my answer regarding the addition is still valid in relation to the question code so i will leave it anyway.
– Aaron McGuire
Nov 21 '18 at 23:42
the problem I have is, when I select say 60 sec, it goes on to display 44 ($30 + 14) which works but when I increase the value of the input to say 15, it doesn't add instead it overwrites the number and just shows 15 instead of 45
– William Richardson
Nov 21 '18 at 23:48
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
});
}
});
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421746%2fhow-do-i-update-a-div-with-the-sum-value-of-2-form-inputs-and-update-when-they-c%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
3 Answers
3
active
oldest
votes
3 Answers
3
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Hope this help
$(document).ready(function() {
var display = $('#js-cost');
$('#js-price').on('change', function() {
display.html(getTotalPrice());
});
$('#js-duration').on('change', function() {
display.html(getTotalPrice());
});
function getTotalPrice(){
var base_price = parseInt($('#js-price').val());
var duration = parseInt($('#js-duration').val());
var price = 0;
15===duration?price=0:30===duration?price=10:45===duration?price=15:60===duration&&(price=20);
return base_price+price;
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:48
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
This works exactly as I want! Thanks!
– William Richardson
Nov 21 '18 at 23:52
add a comment |
0
Hope this help
$(document).ready(function() {
var display = $('#js-cost');
$('#js-price').on('change', function() {
display.html(getTotalPrice());
});
$('#js-duration').on('change', function() {
display.html(getTotalPrice());
});
function getTotalPrice(){
var base_price = parseInt($('#js-price').val());
var duration = parseInt($('#js-duration').val());
var price = 0;
15===duration?price=0:30===duration?price=10:45===duration?price=15:60===duration&&(price=20);
return base_price+price;
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:48
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
This works exactly as I want! Thanks!
– William Richardson
Nov 21 '18 at 23:52
add a comment |
0
0
0
Hope this help
$(document).ready(function() {
var display = $('#js-cost');
$('#js-price').on('change', function() {
display.html(getTotalPrice());
});
$('#js-duration').on('change', function() {
display.html(getTotalPrice());
});
function getTotalPrice(){
var base_price = parseInt($('#js-price').val());
var duration = parseInt($('#js-duration').val());
var price = 0;
15===duration?price=0:30===duration?price=10:45===duration?price=15:60===duration&&(price=20);
return base_price+price;
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:48
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
Hope this help
$(document).ready(function() {
var display = $('#js-cost');
$('#js-price').on('change', function() {
display.html(getTotalPrice());
});
$('#js-duration').on('change', function() {
display.html(getTotalPrice());
});
function getTotalPrice(){
var base_price = parseInt($('#js-price').val());
var duration = parseInt($('#js-duration').val());
var price = 0;
15===duration?price=0:30===duration?price=10:45===duration?price=15:60===duration&&(price=20);
return base_price+price;
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>$(document).ready(function() {
var display = $('#js-cost');
$('#js-price').on('change', function() {
display.html(getTotalPrice());
});
$('#js-duration').on('change', function() {
display.html(getTotalPrice());
});
function getTotalPrice(){
var base_price = parseInt($('#js-price').val());
var duration = parseInt($('#js-duration').val());
var price = 0;
15===duration?price=0:30===duration?price=10:45===duration?price=15:60===duration&&(price=20);
return base_price+price;
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>$(document).ready(function() {
var display = $('#js-cost');
$('#js-price').on('change', function() {
display.html(getTotalPrice());
});
$('#js-duration').on('change', function() {
display.html(getTotalPrice());
});
function getTotalPrice(){
var base_price = parseInt($('#js-price').val());
var duration = parseInt($('#js-duration').val());
var price = 0;
15===duration?price=0:30===duration?price=10:45===duration?price=15:60===duration&&(price=20);
return base_price+price;
}
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:48
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
answered Nov 21 '18 at 23:48
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
answered Nov 21 '18 at 23:48
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
answered Nov 21 '18 at 23:48
abdulsattar-alkhalafabdulsattar-alkhalaf
31715
31715
This works exactly as I want! Thanks!
– William Richardson
Nov 21 '18 at 23:52
add a comment |
This works exactly as I want! Thanks!
– William Richardson
Nov 21 '18 at 23:52
This works exactly as I want! Thanks!
– William Richardson
Nov 21 '18 at 23:52
This works exactly as I want! Thanks!
– William Richardson
Nov 21 '18 at 23:52
add a comment |
0
You are very close. Your change event is okay for a select list, but for realtime change of an input that is invariant to whether you are using a keyboard or clicking on arrow keys, use the .bind('input', callback) method.
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').bind('input', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(parseInt(base_price) + parseInt(price));
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:38
Iskandar Reza RazaliIskandar Reza Razali
5711415
I want the span#js-cost to display the sum of both the select and the input regardless of which one got changed, what happens here is when I change the value of the input it only shows that and ignore the value of the select
– William Richardson
Nov 21 '18 at 23:42
add a comment |
0
You are very close. Your change event is okay for a select list, but for realtime change of an input that is invariant to whether you are using a keyboard or clicking on arrow keys, use the .bind('input', callback) method.
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').bind('input', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(parseInt(base_price) + parseInt(price));
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:38
Iskandar Reza RazaliIskandar Reza Razali
5711415
I want the span#js-cost to display the sum of both the select and the input regardless of which one got changed, what happens here is when I change the value of the input it only shows that and ignore the value of the select
– William Richardson
Nov 21 '18 at 23:42
add a comment |
0
0
0
You are very close. Your change event is okay for a select list, but for realtime change of an input that is invariant to whether you are using a keyboard or clicking on arrow keys, use the .bind('input', callback) method.
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').bind('input', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(parseInt(base_price) + parseInt(price));
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:38
Iskandar Reza RazaliIskandar Reza Razali
5711415
You are very close. Your change event is okay for a select list, but for realtime change of an input that is invariant to whether you are using a keyboard or clicking on arrow keys, use the .bind('input', callback) method.
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').bind('input', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(parseInt(base_price) + parseInt(price));
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').bind('input', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(parseInt(base_price) + parseInt(price));
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').bind('input', function() {
base_price = $('#js-price').val();
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(parseInt(base_price) + parseInt(price));
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:38
Iskandar Reza RazaliIskandar Reza Razali
5711415
answered Nov 21 '18 at 23:38
Iskandar Reza RazaliIskandar Reza Razali
5711415
answered Nov 21 '18 at 23:38
Iskandar Reza RazaliIskandar Reza Razali
5711415
answered Nov 21 '18 at 23:38
Iskandar Reza RazaliIskandar Reza Razali
5711415
5711415
I want the span#js-cost to display the sum of both the select and the input regardless of which one got changed, what happens here is when I change the value of the input it only shows that and ignore the value of the select
– William Richardson
Nov 21 '18 at 23:42
add a comment |
I want the span#js-cost to display the sum of both the select and the input regardless of which one got changed, what happens here is when I change the value of the input it only shows that and ignore the value of the select
– William Richardson
Nov 21 '18 at 23:42
I want the span#js-cost to display the sum of both the select and the input regardless of which one got changed, what happens here is when I change the value of the input it only shows that and ignore the value of the select
– William Richardson
Nov 21 '18 at 23:42
I want the span#js-cost to display the sum of both the select and the input regardless of which one got changed, what happens here is when I change the value of the input it only shows that and ignore the value of the select
– William Richardson
Nov 21 '18 at 23:42
add a comment |
0
If i'm interpreting the question correctly you have almost everything working, you only needed to add the final values together. this initially wasn't working because the .val was being returned as a string rather than a number so passing it through a parseInt converts it to a number allowing it to work correctly.
Note that parseInt() will generally only work on whole numbers, you can use parseFloat() to work with decimals
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = parseInt($('#js-price').val());
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price+price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:40
Aaron McGuireAaron McGuire
43218
I may have completely misinterpreted the question but my answer regarding the addition is still valid in relation to the question code so i will leave it anyway.
– Aaron McGuire
Nov 21 '18 at 23:42
the problem I have is, when I select say 60 sec, it goes on to display 44 ($30 + 14) which works but when I increase the value of the input to say 15, it doesn't add instead it overwrites the number and just shows 15 instead of 45
– William Richardson
Nov 21 '18 at 23:48
add a comment |
0
If i'm interpreting the question correctly you have almost everything working, you only needed to add the final values together. this initially wasn't working because the .val was being returned as a string rather than a number so passing it through a parseInt converts it to a number allowing it to work correctly.
Note that parseInt() will generally only work on whole numbers, you can use parseFloat() to work with decimals
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = parseInt($('#js-price').val());
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price+price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:40
Aaron McGuireAaron McGuire
43218
I may have completely misinterpreted the question but my answer regarding the addition is still valid in relation to the question code so i will leave it anyway.
– Aaron McGuire
Nov 21 '18 at 23:42
the problem I have is, when I select say 60 sec, it goes on to display 44 ($30 + 14) which works but when I increase the value of the input to say 15, it doesn't add instead it overwrites the number and just shows 15 instead of 45
– William Richardson
Nov 21 '18 at 23:48
add a comment |
0
0
0
If i'm interpreting the question correctly you have almost everything working, you only needed to add the final values together. this initially wasn't working because the .val was being returned as a string rather than a number so passing it through a parseInt converts it to a number allowing it to work correctly.
Note that parseInt() will generally only work on whole numbers, you can use parseFloat() to work with decimals
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = parseInt($('#js-price').val());
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price+price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:40
Aaron McGuireAaron McGuire
43218
If i'm interpreting the question correctly you have almost everything working, you only needed to add the final values together. this initially wasn't working because the .val was being returned as a string rather than a number so passing it through a parseInt converts it to a number allowing it to work correctly.
Note that parseInt() will generally only work on whole numbers, you can use parseFloat() to work with decimals
$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = parseInt($('#js-price').val());
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price+price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = parseInt($('#js-price').val());
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price+price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>$(document).ready(function() {
var display = $('#js-cost');
var base_price = 14;
var price = 0;
$('#js-price').on('change', function() {
base_price = parseInt($('#js-price').val());
display.html(base_price);
});
$('#js-duration').on('change', function() {
if ($(this).val() == 30) price = 10;
if ($(this).val() == 45) price = 15;
if ($(this).val() == 60) price = 30;
display.html(base_price+price);
});
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<select id="js-duration">
<option value="15">15 sec</option>
<option value="30">30 sec (+ $10)</option>
<option value="45">45 sec (+ $15)</option>
<option value="60">60 sec (+ $30)</option>
</select>
<input id="js-price" type="number" value="14" min="14">
</form>
<p>Current cost: ($<span id="js-cost">14</span> per view)</p>answered Nov 21 '18 at 23:40
Aaron McGuireAaron McGuire
43218
answered Nov 21 '18 at 23:40
Aaron McGuireAaron McGuire
43218
answered Nov 21 '18 at 23:40
Aaron McGuireAaron McGuire
43218
answered Nov 21 '18 at 23:40
Aaron McGuireAaron McGuire
43218
43218
I may have completely misinterpreted the question but my answer regarding the addition is still valid in relation to the question code so i will leave it anyway.
– Aaron McGuire
Nov 21 '18 at 23:42
the problem I have is, when I select say 60 sec, it goes on to display 44 ($30 + 14) which works but when I increase the value of the input to say 15, it doesn't add instead it overwrites the number and just shows 15 instead of 45
– William Richardson
Nov 21 '18 at 23:48
add a comment |
I may have completely misinterpreted the question but my answer regarding the addition is still valid in relation to the question code so i will leave it anyway.
– Aaron McGuire
Nov 21 '18 at 23:42
the problem I have is, when I select say 60 sec, it goes on to display 44 ($30 + 14) which works but when I increase the value of the input to say 15, it doesn't add instead it overwrites the number and just shows 15 instead of 45
– William Richardson
Nov 21 '18 at 23:48
I may have completely misinterpreted the question but my answer regarding the addition is still valid in relation to the question code so i will leave it anyway.
– Aaron McGuire
Nov 21 '18 at 23:42
I may have completely misinterpreted the question but my answer regarding the addition is still valid in relation to the question code so i will leave it anyway.
– Aaron McGuire
Nov 21 '18 at 23:42
the problem I have is, when I select say 60 sec, it goes on to display 44 ($30 + 14) which works but when I increase the value of the input to say 15, it doesn't add instead it overwrites the number and just shows 15 instead of 45
– William Richardson
Nov 21 '18 at 23:48
the problem I have is, when I select say 60 sec, it goes on to display 44 ($30 + 14) which works but when I increase the value of the input to say 15, it doesn't add instead it overwrites the number and just shows 15 instead of 45
– William Richardson
Nov 21 '18 at 23:48
add a comment |
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
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53421746%2fhow-do-i-update-a-div-with-the-sum-value-of-2-form-inputs-and-update-when-they-c%23new-answer', 'question_page');
}
);
Post as a guest
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
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
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
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Hi William, welcome to StackOverflow. Could you please post your html markup as well?
– zfrisch
Nov 21 '18 at 23:15
We need the rest of your code to help you.
– Jack Bashford
Nov 21 '18 at 23:16
Ok, I updated my question with the HTML, thanks guys!
– William Richardson
Nov 21 '18 at 23:21
Thanks for adding the relevant code. Please explain exactly what isn't working about the code you entered. Specifically what you expect to happen vs. what is happening. stackoverflow.com/help/how-to-ask
– SherylHohman
Nov 22 '18 at 0:49