how to add n number of input value with javascript

Question

Friends, I want the sum of the numbers I put in fields and these input value total are equal to my total value. it show a Nan Error When i add these input values please help

This is my body Content

    <form action="" method="post">
    <input type="text" name="cnum" placeholder="enter no. of input">
    <input type="submit" name="submit" >
    </form>
    <?php
    if(isset($_POST['cnum']))
    {
        $cnum=$_POST['cnum'];
        $i=0;
        ?>
    <form action="" method="post">
        <input type="hidden" name="total" id="total" value="10">
        <input type="hidden" name="cnum" id="cnum" value="<?php echo $cnum ;?>">
        <?php
        while($i<$cnum)
        {
            ?>
                <input type="number" id="aq<?php echo $i; ?>" onKeyup="add()" name="aq<?php echo $i; ?>"><br />
            <?php
            $i++;
        }
    ?>
        <input type="submit" name="aqsub">
    </form>
    <?php
    }
    ?>

This is my java script function

var val=0;
var total=document.getElementById('total').value;
var cnum=document.getElementById('cnum').value;
var anum;
function add()
{
var n=0;
while(n<cnum)
{
    anum = 0;
    if(document.getElementById('aq'+n).value != "")        {            
            anum=parseInt(document.getElementById('aq'+n).value);
        }
    val += anum;
    n++;
}
alert(val);

}

Answer 1

在JavaScript中添加以下代码

cnum = parseInt(cnum);

Answer 2

Update code as:

var total= parseInt(document.getElementById('total').value);

As you are using total to comparing with anum . so must be error Nan for total

Answer 3

Well I don't understand your logic but you get NAN because your value of fields are blank.

try this code

var val=0;
var total=document.getElementById('total').value;
var cnum=document.getElementById('cnum').value;
var anum;
function add()
{
    var n=0;
    while(n<cnum)
    {
        anum = 0;
        if(document.getElementById('aq'+n).value != "")        {            
                anum=parseInt(document.getElementById('aq'+n).value);
            }
        val += anum;
        n++;
    }
    if(total==anum)
    {
        alert('Its Work');
    }
    else
    {
        alert('Its not Work');
    }

}

Answer 4

why dont you directly include the PHP var into a JS var?

var cnum=<?php echo $cnum ;?>;

Also may check against "", and then use a zero

parseInt(input.value)||0;

Answer 5

Update JS part:

var total=document.getElementById('total').value;
total = parseInt(total);
var cnum=document.getElementById('cnum').value;
cnum= parseInt(cnum);

function add()
{
var anum;
var val=0;
var n=0;
while(n<cnum)
{
    anum = 0;
    var temp = document.getElementById('aq'+n).value;
    if( temp != "")        {            
            anum=parseInt(temp);
        }
    val = +val + anum;
    n++;
}
alert(val);

}

 var total=document.getElementById('total').value; total = parseInt(total); var cnum=document.getElementById('cnum').value; cnum= parseInt(cnum); function add() { var anum; var val=0; var n=0; while(n<cnum) { anum = 0; var temp = document.getElementById('aq'+n).value; if( temp != "") { anum=parseInt(temp); } val = +val + anum; n++; } alert(val); } 

 <form action="" method="post"> <input name="total" id="total" value="10" type="hidden"> <input name="cnum" id="cnum" value="10" type="hidden"> <input id="aq0" onkeyup="add();" name="aq0" value="" type="number"><br> <input id="aq1" onkeyup="add();" name="aq1" value="" type="number"><br> <input id="aq2" onkeyup="add();" name="aq2" value="" type="number"><br> <input id="aq3" onkeyup="add();" name="aq3" value="" type="number"><br> <input id="aq4" onkeyup="add();" name="aq4" value="" type="number"><br> <input id="aq5" onkeyup="add();" name="aq5" value="" type="number"><br> <input id="aq6" onkeyup="add();" name="aq6" value="" type="number"><br> <input id="aq7" onkeyup="add();" name="aq7" value="" type="number"><br> <input id="aq8" onkeyup="add();" name="aq8" value="" type="number"><br> <input id="aq9" onkeyup="add();" name="aq9" value="" type="number"><br>