We Keep Coding

Sum All Inputs With Same Class On Change - JavaScript

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

Select only value attribute which have numbers in it

I have lots of input tags with type text and number respectively. I want to replace all input type text which have values in numbers to the input type number but not getting how to take only numbers in value. I'm using below code to do it.
$( "[value*='']").attr('type','number');

You can try .filter and use isNaN to check whether the value is number or not
$(document).ready(function() {
$("input[type='text']").filter(function() {
return !isNaN( $(this).val() ) && $(this).val().trim() !== "";
}).attr("type", "number");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="Javascript">
<input type="text" value="Apple">
<input type="text" value="1">
<input type="text" value="3">
<input type="text" value="1000">
<input type="text" value="">

Maybe iterating and checking will do it:
for(const el of $("[value*='']").toArray())
if(parseInt(el.value))
$(el).attr('type','number');

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

jQuery: How to add float values in multiple fields using class name

Using jQuery, I have float values in fields with similar class names "score"and I just want to make a function that will add all float values in those fields and assign the result to "field5".
<input id="field1" type="text" class="score">2.5</input>
<input id="field2" type="text" class="score">6.02</input>
<input id="field3" type="text" class="score">1</input>
<input id="field4" type="text" class="score">4.03</input>
<input id="result" type="text" class="result"></input>
I made the script below but it doesn't work even though the function executes.
$(.score).on('change',function(){
var total = 0
$(this).each(function(){
total += this.value;
});
});
$('#result').val(total);
});

Lot of issues in your code:
JS:
$(".score").on('keyup', function () {
var total = 0
$(".score").each(function () {
total += parseFloat(this.value);
});
$('#result').val(total);
});
HTML
<input id="field1" type="text" class="score" value="1"/>
<input id="field2" type="text" class="score" value="1.2"/>
<input id="field3" type="text" class="score" value="1.4"/>
<input id="field4" type="text" class="score" value="3.1"/>
<input id="result" type="text" class="result" value=""/>
Demo: http://jsfiddle.net/GCu2D/839/
input is a self closing tag. You should use it like in this example
You should iterate on $(".score") instead of $(this) to get all input values. Latter will give only the current input's value.
Use parseFloat to convert the string type into float. By default you get string value from the .value. In order to add them, you need to convert them to float
Your selector $(.score) is invalid. Use $(".score") .
$('#result').val(total); should be inside the event handler.

First of all, I believe .change() is used with dropdowns. Try using .keydown() to detect a change in an input box.
There are a few errors in your code -
var total = 0;
Semicolon is missing.
$('#result').val(total);
This will assign the value and will not show it. If you wish to display teh value as well, use
$('#result').append(total);

$(document).ready(function(){
$(".score").on('change',function(){
var total = 0.00;
$(".score").each(function(){
if(undefined != $(this).val() && "" != $.trim($(this).val()))
total += parseFloat($(this).val());
});
$('#result').val(total);
});
});

I finally figured it out. Thanks guys!
function getResult(){
var total = 0;
$('.score').each(function(){
var checkval= parseFloat(this.value);
if(!isNaN(checkval)) total += checkval;
});
$('#result').val(total.toFixed(2));
}

javascript (math) adding up an array

I have two javascript text boxes.
<input type="text" name="test" value="300" />
<input type="text" name="test" value="500" />
How can I use javascript to alert the total price of the items in the text box?
Would something like this work?
var price = document.getElementById("test");
alert(price)

This will take all input elements into account (useful if you have many). Filter them by type and get their values in loop:
var inputs = document.getElementsByTagName("input");
var total = 0;
for (var i = 0; i < inputs.length; i++){
if (inputs[i].type = "text"){
total += parseInt(inputs[i].value, 10);
}
}
alert(total);

<input id="test1" type="text" name="test" value="300" />
<input id="test2" type="text" name="test" value="500" />
JS:
var price = parseInt(document.getElementById("test1").value, 10) + parseInt(document.getElementById("test2").value, 10);

<input id="price1" type="text" name="test" value="300" />
<input id="price2" type="text" name="test" value="500" />
This will work:
var price = document.getElementById("price1").value+document.getElementById("price2").value;
alert(price)
Note Do not have other tags with id="price1" or id="price2"

What you have written will not work, for several reasons. Firstly, as the name suggests, getElementById gets an element based on the value of the id attribute. You haven't given your input elements an id attribute, so that's not going to work.
Secondly, document.getElementById('someId') returns an element, but you want the value. You can use the value property to get it:
var price1 = parseInt(document.getElementById("test1").value, 10);
var price2 = parseInt(document.getElementById("test2").value, 10);
alert(price1 + price2);
This will work with the following HTML:
<input type="text" name="test" id="test1" value="300" />
<input type="text" name="test" id="test2" value="500" />
Note the use of parseInt. The value property returns a String, so we use parseInt to attempt to parse that into a Number. If you don't use it, price1 + price2 will simply concatenate the strings.