Adding input type values

Question

I'm trying to add up a specific input id value that's inside of a li tag. But it only gets the first number. I don't know how to get the second and third to work. I am very new to javascript. heres how the code looks like.

HTML

<li id="Pallet1" class="inactive">
<span class="itemNumber">1</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="QT" class='weight'/>
</li>

<li id="Pallet1" class="inactive">
<span class="itemNumber">2</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f"/>
</li>

<li id="Pallet1" class="inactive">
<span class="itemNumber">3</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f2"/>
</li>

<span id="total"></span>

javascript

$(".weight").keyup(function(){    

var totalweight = $(".weight").val();
var totalweight2 = $("#f").val();
var totalweight3 = $("#f2").val();

if(totalweight2 == "" && totalweight3 == ""){
    var total = totalweight;
}
if(totalweight3 == ""){
    var total = Number(totalweight)+Number(totalweight2);
}
//this must add up
if(totalweight != "" && totalweight2 != "" && totalweight3 != ""){
    var total = Number(totalweight)+Number(totalweight2)+Number(totalweight3);
}

$("#total").text(total);
if(total == ""){
   $("#total").text("0");
}
});

ID's should be UNIQUE

Mr. Alien
– Mr. Alien

2014-03-10 13:19:16 +00:00
Commented Mar 10, 2014 at 13:19 — Mr. Alien
– Mr. Alien, Commented Mar 10, 2014 at 13:19
try to use class instead of id

CJ Ramki
– CJ Ramki

2014-03-10 13:22:49 +00:00
Commented Mar 10, 2014 at 13:22 — CJ Ramki
– CJ Ramki, Commented Mar 10, 2014 at 13:22

CJ Ramki · Accepted Answer · 2014-03-10 13:48:21Z

HERE IS THE FIDDLE DEMO. IF USER PRESS ANY ALPHABET, YOU DON'T NEED TO WORRY ABOUT THAT. THIS SCRIPT WILL CALCULATE IF THE INPUT IS ONLY A NUMBER.

you can use your html markup like this below,

<li id="Pallet1" class="inactive">
<span class="itemNumber">1</span>

    <input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="QT" class='weight' />
</li>
<li id="Pallet1" class="inactive">
<span class="itemNumber">2</span>

    <input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f" class='weight' />
</li>
<li id="Pallet1" class="inactive">
<span class="itemNumber">3</span>

    <input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f2" class='weight' />
</li>
<span id="total"></span>

you can simply use your javascript code like this,

$(".weight").keyup(function () {
    var sum = 0;
    $('.weight').each(function () {
        if (!isNaN(this.value) && this.value.length != 0) {
            sum += +this.value;
        }
    });
    $('#total').text(sum);
});

SEE THIS FIDDLE DEMO

SriSaiKiran · Accepted Answer · 2014-03-10 13:24:31Z

0

<script>
function GetAll()
{
   var c = document.getElementsByName("weight");
  // loop over them all
  for (var i=0; i<c.length; i++) {
     alert(c[i]);
 }

}
</script>

This function alert's all the values.Hope this helps you.

answered Mar 10, 2014 at 13:24

SriSaiKiran

485 bronze badges

Comments

MaveRick · Accepted Answer · 2014-03-10 13:26:57Z

You have two mistakes:

you are using the same ID for more than one element (Which has nothing to do with your issue, but still big mistake)
you have gave the first input the class weight and created an event related to that class which only will be fired on changing the first input value

check The code on JSFiddle

HTML:

<li id="Pallet1" class="inactive">
<span class="itemNumber">1</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="QT" class='weight'/>
</li>

<li id="Pallet2" class="inactive">
<span class="itemNumber2">2</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f" class='weight'/>
</li>

<li id="Pallet3" class="inactive">
<span class="itemNumber3">3</span>
<input type="text" name="weight" placeholder="Pallet Weight (lbs)" id="f2" class='weight'/>
</li>

<span id="total"></span>

JS:

$(".weight").keyup(function(){    

var totalweight = $("#QT").val();
var totalweight2 = $("#f").val();
var totalweight3 = $("#f2").val();

if(totalweight2 == "" && totalweight3 == ""){
    var total = totalweight;
}
if(totalweight3 == ""){
    var total = Number(totalweight)+Number(totalweight2);
}
//this must add up
if(totalweight != "" && totalweight2 != "" && totalweight3 != ""){
    var total = Number(totalweight)+Number(totalweight2)+Number(totalweight3);
}

$("#total").text(total);
if(total == ""){
   $("#total").text("0");
}
});

Dr. Collage · Accepted Answer · 2014-03-10 13:27:40Z

0

var totalweight = $(".weight");
alert(totalweight[0].value); // alerts the value of the first input with the class of weight

answered Mar 10, 2014 at 13:27

Dr. Collage

878 bronze badges

Collectives™ on Stack Overflow

Adding input type values

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related