SUM动态输入字段onchange with javascript

时间:2013-08-23 15:38:37

标签: javascript sum

如何将所有这些字段(name =“envelope []”)相加并在另一个输入中显示结果。我不知道该怎么做,因为这些字段是动态生成的。 tks Seby

更新:这是我尝试使用javascript函数的内容。我遇到的问题是函数启动但给我所有envelope []输入的结果。但是我需要每一行的结果,而不是所有的envelope []字段。 我改变了高亮度的场地,但最高金额发生了变化。 请参阅此处的示例:http://www.soniajanelle.ca/example.jpg

   function findTotal(){
    var arr = document.getElementsByName('envelope[]');
    var tot=0;
    for(var i=0;i<arr.length;i++){
        if(parseInt(arr[i].value))
            tot += parseInt(arr[i].value);
    }
    document.getElementById('totalsum').value = tot;
}

</script>
</head>
<body>

<div id="slimScroll" style="overflow:auto; overflow-x:hidden; overflow-y:hidden;  height:<? echo $row_admin_detail['size_height'];?>px;" >


<table width="100%" align="center" border="0">
<tr><td  height="0px" align="center" colspan="2"></td></tr>
<tr>
<table border="0" width="100%" class="ft12" >
<tr><td  class="ann_title" align="center" colspan="2"><h2>Transactions</h2></td></tr>
    <td valign="top" align="center" >
    <div id="delDiv" >
</table>
    <table  width="450px" border="0" cellspacing="0" cellpadding="0" >

<tr class="table" height="125px">
    <th width="1%" align="center"></th> 
    <th width="3%" align="center"></th>
    <th width="10%" align="center" colspan="2" >Action</th> 
    <th width="8%" align="center">Type</th> 
    <th width="8%" align="center">Date</th> 
    <th width="20%" align="center">Payee</th>   
    <th width="8%" align="center">Amount</th>
    <th width="20%" align="center">Envelope</th>
    <th width="2%" align="center"></th>     
<?
    $query = "SELECT * from envelope_sub order by budgeted_amount desc";
    $result = mysql_query($query) or die(mysql_error());
    while ($envelopeSub = mysql_fetch_array($result)) 
    {   
    echo "  
    <th width=\"8%\" align=\"right\" 
    ><p><FONT size=\"2\"> ".$envelopeSub['real_amount']=number_format($envelopeSub['real_amount'],2,'.','')."$</FONT> </p><br>
    <p class=\"rotate\">".$envelopeSub['name']."</p></th>
    ";
    }
?>  

</tr>

<tr >
<form method="post" action="main.php?act=stats&do=add&type=insert">
    <th  align="center"></th>   
    <th  align="center"><img src="http://www.sebyphotographe.com/simplestudio/images/plus-icon 2.png" class="removeimg"></a></th>
    <th  align="center" colspan="2" ><div class="ann_search_submit"><input class="ann_submit" type="submit" value="Ajouter" /></div></th>   
    <th  align="center"><input class="ann_textbox"  name="type" type="text" size="8%"/></th>    
    <th  align="center"><input class="ann_textbox"  name="date" type="text" size="8%"/></th>    
    <th  align="center"><input class="ann_textbox"  name="payee" type="text" size="20%"/></th>
    <th  align="center"><input class="ann_textbox"  name="amount" type="text" size="8%" onkeypress="return isNumeric(event)" /></th>
    <th  align="center"><select>
  <option selected="selected">Distribuer montant...</option>
  <option>par pourcentage</option>
  <option>par montant fixe</option>
  <option>Manuellement</option>
</select></th>  
    <th  align="center"></th>
<?
    $query = "SELECT * from envelope_sub order by id desc";
    $result = mysql_query($query) or die(mysql_error());
    while ($envelopeSub = mysql_fetch_array($result)) 
    {   
    echo "  
    <input type=\"hidden\" name=\"envelope_id[]\" value=\"".$envelopeSub['id']."\">
    <th  align=\"center\"><input class=\"ann_textbox\"  name=\"envelope[]\" type=\"text\" size=\"8%\" onkeypress=\"return isNumeric(event)\" /></th>
    ";
    }
?>


</form> 
</tr>


<?
        $i=0;
        $k=0;
        $transactions = mysql_query("select * from transactions");
        while($row_transactions=mysql_fetch_array($transactions))
        {   
?>


<form method="post" action="main.php?act=stats&do=edit&type=update">
<input type="hidden" name="id" value="<? echo $row_transactions['id']?>">
   <tr class="<?=$bgcolor?>"  nowrap="nowrap" onmouseover="style.backgroundColor='#EAEFF3';" onmouseout="style.backgroundColor='<?=$bgs?>'" >
        <td align="left"  nowrap="nowrap">&nbsp;</td>
        <td colspan="2" ><a href="main.php?act=stats&do=del&id=<? echo $row_transactions['id']?>&type=p" class="remove"><img src="http://www.sebyphotographe.com/simplestudio/images/icon_delete.png" class="removeimg"></a></td>
        <td ><div  class="ann_search_submit"><input class="ann_submit"  type="submit" value="Update" ></div></td>
        <td ><input class="ann_textbox"  name="type" type="text" value="<?echo $row_transactions['type']?>" size="8%"/></td>
        <td ><input class="ann_textbox"  name="date" type="text" value="<?echo $row_transactions['date']?>" size="8%"/></td>
        <td ><input class="ann_textbox"  name="payee" type="text" value="<?echo $row_transactions['payee']?>" size="20%"/></td>
        <?  $row_transactions['amount']=number_format($row_transactions['amount'],2,'.',''); ?>
        <td >
        <? if ($row_transactions['type']=="Expense"){?>                             
        <input id="totalsum" class="ann_textbox" name="amount" type="text" style="color:red;text-align:right;" value=" <?echo "(".$row_transactions['amount'].")";?>" size="8%"/></td><? 
                                                    }ELSE{ ?>
        <input id="totalsum" class="ann_textbox"  name="amount" type="text" style="text-align:right;" value=" <?echo $row_transactions['amount'];?>" size="8%"/></td><? } ?>                                            
        <td ><input class="ann_textbox"  name="envelope_<?echo $i?>" type="text" value="<?echo $row_transactions['envelope']?>" /></td>
        <td></td>   
<?
    $query_env = "SELECT * from transactions_details WHERE transactions_id='".$row_transactions['id']."' order by enveloppe_sub_id  desc";
    $result_env = mysql_query($query_env) or die(mysql_error());
    while ($env_amount = mysql_fetch_array($result_env)) 
    {   
    if ($env_amount['amount']==0){$env_amount['amount']="";}
    $env_amount['amount']=number_format($env_amount['amount'],2,'.','');

    if ($env_amount['type']=="Expense"){
    echo "
    <input type=\"hidden\" name=\"trans_id[]\" value=\"".$env_amount['transactions_id']." \">   
    <input type=\"hidden\" name=\"envelope_id[]\" value=\"".$env_amount['enveloppe_sub_id']."\">
    <input type=\"hidden\" name=\"type_env[]\" value=\"".$row_transactions['type']."\">
    <td  align=\"center\"><input onchange=\"findTotal()\" class=\"ann_textbox\"  name=\"envelope[]\" type=\"text\" size=\"8%\"  style=\"text-align:right;color:red\" value=\"(".$env_amount['amount'].")\" /></td>";
    }ELSE{
    echo "
    <input type=\"hidden\" name=\"trans_id[]\" value=\"".$env_amount['transactions_id']." \">   
    <input type=\"hidden\" name=\"envelope_id[]\" value=\"".$env_amount['enveloppe_sub_id']."\">
    <input type=\"hidden\" name=\"type_env[]\" value=\"".$row_transactions['type']."\">
    <td  align=\"center\"><input onchange=\"findTotal()\" class=\"ann_textbox\"  name=\"envelope[]\" type=\"text\" size=\"8%\"  style=\"text-align:right;\" value=\"".$env_amount['amount']."\" /></td>";
    }
    }

?>

   </tr>
</form>

<? 
$i++;
$k++;
}
?>

1 个答案:

答案 0 :(得分:2)

这样的事情可以解决问题

var elems = document.getElementByName('envelope[]');

var sum = 0;
for (var i = 0; i < elems.length; i++)
{
    sum += parseInt(elems[i].value);
}

document.getElementById('yourelementid').value = sum;
相关问题