I recently have a result in a modal from calculatesum JavaScript displayed as <span id="sample">0</span> (the value will increase based on the number key in by users)
How do I display this final sample value in another input box outside of the modal? Help?
JavaScript as below:
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(0));
}
HTML or rangeslide code as below:
<input type="text" class="form-control slider-text-field" id="homeContentInput" placeholder="250,000">
</td><td> (RM)</td></tr></table>
<br/>
<input type="range" value="250000" min="15000" max="500000" step="10000" id="homeContentRange">
<span class="slider-label-min">RM 15,000</span> <span class="slider-label-max">RM 500,000</span>
Basically, I need to replace placeholder="250,000" for the first input box and value="250000" with the final value from <span id="sample">0</span>.
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function() {
calculateSum();
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
//$("#sum").html(sum.toFixed(0));
$("#homeContentInput").val(sum.toFixed(0));
$("#homeContentRange").val(sum.toFixed(0));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
*****************************************************************
<br>if you just want to add up the values then this will work, else you need to be more clear with your question.
<br>form2-1:
<input class="txt" type="text" id="form2-1" value="0">
<br>form2-2:
<input class="txt" type="text" id="form2-2" value="0">
<br>form2-3:
<input class="txt" type="text" id="form2-3" value="0">
<br>Not sure what you want to do bellow this... *****************************************************************
<br>
<input type="text" class="form-control slider-text-field" id="homeContentInput" placeholder="250,000">(RM)
<br>
<input type="range" value="250000" min="15000" max="500000" step="10000" id="homeContentRange">
<br>
<span class="slider-label-min">RM 15,000</span> <span class="slider-label-max ">RM 500,000</span>
<br>*****************************************************************
Not sure if I understand this right but I think you want something along these lines?
I assume you want
the first field readonly
the second field as the slider
on submit calculates the total, in which you can post the results in another div.. In your case a modal.
Place the result where ever you like
<p id="result"> </p>
<input id="value1" type="text" value="250000" readonly="readonly"/>
<span> + </span>
<input id="value2" type="text" id="textInput" value="15000">
<span class="slider-label-min">RM 15,000</span> <span class="slider-label-max">RM 500,000</span>
<input type="submit" onclick="output();">
<p id="result"> </p>
<input type="range" type="range" value="250000" min="15000" max="500000" step="10000" onchange="updateTextInput(this.value);">
<script type="text/javascript" language="javascript" charset="utf-8">
function output(){
var value1 = document.getElementById('value1').value;
var value2 = document.getElementById('value2').value;
document.getElementById('result').innerHTML = parseInt(value1) + parseInt(value2);
}
function updateTextInput(val) {
document.getElementById('value2').value=val;
}
</script>
Related
I have inputs with class="amount". The # of inputs is dynamically controlled by the user - but I doubt that is important. I then have an input with id="total"
<form>
<input class="amount">
<input class="amount">
<input class="amount">
<input id="total">
</form>
I would like to sum the values in the inputs with .amount and place that sum with #total. I would like for this calculation to occur as changes happen in any of the ".amount" inputs. I am quite new to the use of JS and I am struggling with the cleanest way to approach solving this use case.
Thanks!
UPDATED ANSWER : You can check by running the snippet here.
$('.amount').on("input", function() {
let total = 0;
$('.amount').each(function() {
total += $(this).val()/1;
})
$('#total').val(total);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
<input class="amount" placeholder="One"><br/>
<input class="amount" placeholder="Two"><br/>
<input class="amount" placeholder="Three"><br/>
<input id="total" placeholder="Total" readonly>
</form>
HTML
<form id="form_input">
<input class="amount">
<input class="amount">
<input class="amount">
<input id="total">
</form>
Use following Step in j query
$(document).ready(function () {
$('#form_input').on("keyup", ".amount", function () {
var sum = 0;
$('.amount').each(function () {
sum += Number($(this).val());
});
$('#total').val(sum);
});
});
Then use this code in your delete row function
$(wrapper).on("click", ".remove_field", function(e) {
e.preventDefault();
$(this).closest('tr').remove();
i--;
var sum = 0;
$('.item_price').each(function () {
sum += Number($(this).val());
});
$('#Item_total_price').html(sum);
console.log(sum);
});
Reference
Java script calculation dynamic add row value
The sum of the top inputs is put into the bottom input. I need to fire some JS code if the value of the bottom input goes above 100. My code is not working as it should.
HTML
<div>
<input type="text" class="top" maxlength="3" value="0" />
<input type="text" class="top" maxlength="3" value="0" />
<input type="text" class="bottom" maxlength="5" value="0" />
</div>
JS
$(document).on("change", ".top", function () {
var sum = 0;
$(".top").each(function () {
sum += +$(this).val();
});
$(".bottom").val(sum);
});
$(document).on("change", ".bottom", function () {
var sum = $(".bottom").val();
if (sum > 100) {
alert("Test alert!");
}
});
The issue is because programmatically updating the value of an input does not raise an event, so the change handler you bind is never invoked. To fix this trigger() an event manually after setting val().
Also note there's a couple of other tweaks to the logic which can be made, such as using this in the .bottom event handler to reference the element which raised the event instead of all .bottom elements in the DOM, and also using the input event, which is triggered as typing occurs and also when content is pasted in using the mouse.
$(document).on("input", ".top", function() {
var sum = 0;
$(".top").each((i, el) => sum += +el.value);
$(".bottom").val(sum).trigger('input');
});
$(document).on("input", ".bottom", function() {
var sum = +$(this).val();
if (sum > 100) {
console.log("Test alert!");
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input type="text" class="top" maxlength="3" value="0" />
<input type="text" class="top" maxlength="3" value="0" />
<input type="text" class="bottom" maxlength="5" value="0" />
</div>
I need to add multiple input text values and assign it to a variable. i can add it now and send it to an id but i want to get it out as a variable. Please see below for the variable's condition after the js code
My HTML
<input type="text" name="quant[1]" class="form-control input-number" value="0" min="0" max="5">
<input type="text" name="quant[2]" class="form-control input-number" value="0" min="0" max="5">
<input type="text" name="quant[3]" class="form-control input-number" value="0" min="0" max="5">
<input type="text" name="quant[4]" class="form-control input-number" value="0" min="0" max="5">
0
The JS
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".input-number").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".input-number").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
The above code adds up and sets the value to the id sum, i want the addition to not hapn when the first 2 values already gives an output of 5. the max value shd be 5 so the input fields should be like 2,1,1,1 or 2,3,0,0 or 5,0,0,0 summation value shd be 5 if it is achieved in the first input field itself then the summation should not continue.
Try this (push values to an array as an example or if you want string just concatenate the values):
var variable = [];
self.forEachValue = function(key, element){
variable.push(element.value);
};
$(".input-number").map(self.forEachValue);
console.log(variable);
I have many textboxes in a form where I am inserting numeric values and getting total of all the fields. There are 4 total textboxes and 1 grandtotal textbox. Currently I am able to get all the total textboxes values but, I am confused how to get sum of all the total textbox values in the Grand total textbox using Jquery or javascript.
Here is my html and js in a fiddle
Do let me know how to do this
Just set the value of the textbox to the result of adding the other values:
document.getElementById("grand-textbox-id").value = value1 + value2 + value3;
If you want to make it do it automatically, add a change event handler to all the inputs:
var calculateSum = function() {
document.getElementById("grand-textbox-id").value = value1 + value2 + value3;
};
document.getElementById("input-1").onchange = calculateSum;
document.getElementById("input-2").onchange = calculateSum;
document.getElementById("input-3").onchange = calculateSum;
Please Try Code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".total").keyup(function(){
var first=0,second=0,third=0,fourth=0;
if($("#text1").val()!="")
{
first=$("#text1").val();
}
if($("#text2").val()!="")
{
second=$("#text2").val();
}
if($("#text3").val()!="")
{
third=$("#text3").val();
}
if($("#text4").val()!="")
{
fourth=$("#text4").val();
}
$("#grand").val( parseInt(first)+ parseInt(second)+ parseInt(third)+ parseInt(fourth));
});
});
</script>
<style tupe="text/css">
.total
{
}
</style>
First val <input type="text" class="total" id="text1" value="" /><br />
second val <input type="text" class="total" id="text2" value="" /><br />
Third val <input type="text" class="total" id="text3" value="" /><br />
Fourth val <input type="text" class="total" id="text4" value="" /><br />
Grand val <input type="text" class="" id="grand" value="" readonly />
I have dynamic form like:
<form id="formaa">
<div class="row">
<input type="text" name="item" class="item"></input>
<input type="text" name="quant" class="quant"></input>
<input type="text" name="price" class="price" onkeyup="update();"></input>
<input type="text" name="sum" id="suma" size="10" disabled="disabled"/>
</div>
<div class="row">
<input type="text" name="item" class="item"></input>
<input type="text" name="quant" class="quant"></input>
<input type="text" name="price" class="price" onkeyup="update();"></input>
<input type="text" name="sum" id="suma" size="10" disabled="disabled"/>
</div>
<!-- ... many more rows -->
<input type="text" disabled id="total" name="tot"></input>
</form>
What I'm trying to do is multiply item quantity and price and get total sum in sum field for each item seperately (not all items total sum).
What I have achiecved is this function, but it seems counting total sum of all items together not seperately and this working with first default field row, when I add new set of fields and fill them with information both, fields (and other later added) sum values become NaN..If I remove all added field sets and leave the first form fows set, number is working again.. What is the problem here?
<script type="text/javascript">
function update() {
var total = 0;
$("#formaa div.row").each(function(i,o){
total += $(o).find(".quant").val() *
$(o).find(".price").val();
if(!isNaN(total) && total.length!=0) {
sum += parseFloat(total);
}
});
$("#formaa div.row #suma").val(total);
}
</script>
function update() {
$("#formaa div.row").each(function(i,o){
var total = $(o).find(".quant").val() * $(o).find(".price").val();
if(!isNaN(total) && total.length!=0) {
sum += parseFloat(total);
}
$(o).find('[name="sum"]').val(total);
});
}
A few problems in your code :
never give the same id to more than one element. That's the reason why I defined the selector on the name
you weren't resetting the total, so it was the sum of all
I didn't fix that, but your operation before the float parsing is strange (it may depend on the content that I can't see)