We Keep Coding

How to grab ID of multiple input field and sum them in a span as total

I have the following
<input type="text" class="form-control" name="total1" id="total1">
<input type="text" class="form-control" name="total1" id="total2">
I already get these two values using javascript.
but I want to display the result in a span like below or a P tag
<span id="sum">0</span>
I tried the following...but i want it to be auto...meaning once the input field if there, total should also appear
<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>

If you want to display the result you can simply use
Javascript : document.getElementById("sum").innerText = SumOfTwoValues
Jquery : $("#sum").text(SumOfTwoValues);
Please make sure you add required validations for the Summation value before assigning it.

Well first of you need some way to call the function output.
Now there are a few problems regarding the Ids of the elements, you have id="total1" but you are trying to call getElementById('value1').
same goes for total2 and sum.
Last I would add || 0 after your .value so incase 1 of the input's haven't been filled, then it set to 0, so we can use it as a number.
function output() {
var value1 = document.getElementById('total1').value || 0;
var value2 = document.getElementById('total2').value || 0;
document.getElementById('sum').innerHTML = parseInt(value1) + parseInt(value2);
}
<input type="text" class="form-control" oninput="output()" name="total1" id="total1">
<input type="text" class="form-control" oninput="output()" name="total1" id="total2">
<span id="sum">0</span>

With vanilla javascript
function a()
{
var a1=document.querySelectorAll('input')
let sum=0;
for(let i=0;i<a1.length;i++)
sum+=Number(a1[i].value)
document.querySelector('#e').innerHTML=sum
}
<input type="text" class="form-control" name="total1" id="total1" onchange="a()">
<input type="text" class="form-control" name="total1" id="total2" onchange="a()">
<p id="e"></p>

Calculation in one line of Javascript.
function calc() {
document.querySelector('#sum').innerHTML = [...document.querySelectorAll('input')].reduce((acc, input) => acc + Number(input.value), 0);
}
<input type="text" class="form-control" name="total1" id="total1" onchange="calc()">
<input type="text" class="form-control" name="total1" id="total2" onchange="calc()">
<p id="sum"></p>

Calculating with dynamic textboxes

I am working with dynamic textboxes. With this dynamic textboxes I want to perform a calculation:
The calculation is simple. I want to calculate the total value of the textboxes.
In my example I am using 3 textboxes with the ids:value1,value2andvalue3`.
The calculation I want to make is:
value1 + value2 + value3 = total
In my javascript I dont want to define all these values becouse the possible ids numbers are unlimited.
So my question is. How can I get the total count of the values without defining each ID.
Here is my script:
Items:<br />
<input type="text" name="value[]" id="value1" placeholder="Value 1" onChange="getPrice(this.value)" /> <br />
<input type="text" name="value[]" id="value2" placeholder="Value 2" onChange="getPrice(this.value)" /> <br />
<input type="text" name="value[]" id="value3" placeholder="Value 3" onChange="getPrice(this.value)"/> <br />
<br />
Total: <br />
<input type="text" name="total" id="total" placeholder="Total"/> <br />
<script>
function getPrice() {
var numVal1 = Number(document.getElementById("value").value);
var totalValue = numVal1;
document.getElementById("total").value = totalValue.toFixed(2);
}
</script>
Example: http://jsfiddle.net/8vhot05u/

You could go over all value[] inputs and sum them up:
let total = 0;
for(const el of document.getElementsByName("value[]"))
total += +el.value;
document.getElementById("total").value = total;

<span id="sample">0</span> to new input box

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>

Calculate Arrays with input field instead of span or div

I'm trying to do a simple calculation onblur with arrays but it's not firing. If I change it to a span or div it works fine. Why isn't it working with an input field?
I need it to be an input field because it's easier to store the values in a database.
<input type="text" class="input-small" name="partnumber[]">
<input type="text" class="input-small" name="partdescription[]" >
<input type="text" class="input-small" name="partprice[]" onblur="doCalc(); calculate(); ">
<input type="text" class="input-small" name="partquantity[]" onblur="doCalc(); calculate(); ">
<input type="text" readonly class="input-small parttotal" name="parttotal[]" >
Calculation
function doCalc() {
var total = 0;
$('tr').each(function() {
$(this).find('.parttotal').html($('input:eq(2)', this).val() * $('input:eq(3)', this).val());
});
$('.parttotal').each(function() {
total += parseInt($(this).text(),10);
});
}

Firstly, I wouldn't use inline events.. Here I've used delegated events, an advantage here if you dynamically add any more lines, it will still work..
Next make sure each line has some sort of wrapper for each line, here I've used a simple DIV. Yousr might be your TR..
The rest then becomes easy, as can be seen here, this example I've just included the price, qty & total, and done 2 lines for testing..
function calc() {
var h = $(this).closest('div');
var qty = h.find('[name="partquantity[]"]');
var price = h.find('[name="partprice[]"]');
var total = h.find('[name="parttotal[]"]');
total.val(qty.val() * price.val());
}
$('body').on('blur', '[name="partprice[]"],[name="partquantity[]"]', calc);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<input type="text" class="input-small" name="partprice[]">
<input type="text" class="input-small" name="partquantity[]">
<input type="text" readonly class="input-small parttotal" name="parttotal[]" >
</div>
<div>
<input type="text" class="input-small" name="partprice[]">
<input type="text" class="input-small" name="partquantity[]">
<input type="text" readonly class="input-small parttotal" name="parttotal[]" >
</div>

you can't use .html() to set the value of a textbox.
Change this line:
$(this).find('.parttotal').html($('input:eq(2)', this).val() * $('input:eq(3)', this).val());
to
$(this).find('.parttotal').val($('input:eq(2)', this).val() * $('input:eq(3)', this).val());
Note the change ('.parttotal').html becomes ('.parttotal').val

javascript getting my textbox to display a variable

So I have some basic code in html here, i just have two textbox which u can type numbers in and when you click the button, it adds em both up, and in a perfect world, it would display the answer in that third textbox.
<html>
<head>
</head>
<script type="text/javascript">
function myfunction()
{
var first = document.getElementById("textbox1").value;
var second = document.getElementById("textbox2").value;
var answer = +first + +second;
var textbox3 = answer;
}
</script>
<body>
<input type="text" name="textbox1" id="textbox1" />
+
<input type="text" name="textbox2" id="textbox2" />
<input type="submit" name="button" id="button1" onclick="myfunction()" value="=" />
<input type="text" name="textbox3" id="textbox3" readonly="true"/>
<br />
Your answer is: --
</body>
</html>
however, i can't get the answer to display in that textbox3. Does anyone know how to assign a value to that third textbox from a variable?
also, as an added bonus, if anyone knows a way to also make the last line "Your answer is: --" display the answer as well, that would be amazing.

function myfunction() {
var first = document.getElementById("textbox1").value;
var second = document.getElementById("textbox2").value;
var answer = parseFloat(first) + parseFloat(second);
var textbox3 = document.getElementById('textbox3');
textbox3.value = answer;
}
<input type="text" name="textbox1" id="textbox1" /> + <input type="text" name="textbox2" id="textbox2" />
<input type="submit" name="button" id="button1" onclick="myfunction()" value="=" />
<br/> Your answer is:--
<input type="text" name="textbox3" id="textbox3" readonly="true" />

You're on the right track with using document.getElementById() as you have done for your first two text boxes. Use something like document.getElementById("textbox3") to retrieve the element. Then you can just set its value property: document.getElementById("textbox3").value = answer;
For the "Your answer is: --", I'd recommend wrapping the "--" in a <span/> (e.g. <span id="answerDisplay">--</span>). Then use document.getElementById("answerDisplay").textContent = answer; to display it.

Even if this is already answered (1 year ago) you could also let the fields be calculated automatically.
The HTML
<tr>
<td><input type="text" value="" ></td>
<td><input type="text" class="class_name" placeholder="bla bla"/></td>
</tr>
<tr>
<td><input type="text" value="" ></td>
<td><input type="text" class="class_name" placeholder="bla bla."/></td>
</tr>
The script
$(document).ready(function(){
$(".class_name").each(function(){
$(this).keyup(function(){
calculateSum()
;})
;})
;}
);
function calculateSum(){
var sum=0;
$(".class_name").each(function(){
if(!isNaN(this.value) && this.value.length!=0){
sum+=parseFloat(this.value);
}
else if(isNaN(this.value)) {
alert("Maybe an alert if they type , instead of .");
}
}
);
$("#sum").html(sum.toFixed(2));
}