CODEWITHSUNDEEP
javascriptjqueryhtml
youngkid7
youngkid7

Reputation: 93

Adding input type values

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");
}
});

Upvotes: 2

Views: 102

Answers (4)

CJ Ramki
CJ Ramki

Reputation: 2630

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

Upvotes: 3

Dr. Collage
Dr. Collage

Reputation: 87

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

Upvotes: 0

MaveRick
MaveRick

Reputation: 1191

You have two mistakes:

  1. you are using the same ID for more than one element (Which has nothing to do with your issue, but still big mistake)
  2. 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");
}
});

Upvotes: 0

SriSaiKiran
SriSaiKiran

Reputation: 38

<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.

Upvotes: 0

Related Questions