SUM动态输入字段onchange with javascript

SUM dynamic input field onchange with javascript

本文关键字：with javascript onchange 字段动态输入 SUM 更新时间：2023-09-26

如何对所有字段（name="envelope[]"）求和，并在另一个输入中显示结果。我不知道该怎么做，因为这些字段是动态生成的。tks Seby

更新：以下是我对javascript函数的尝试。我遇到的问题是函数启动了，但给了我所有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++;
}
?>

像这样的东西应该可以完成

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;