Develop Reference

Why javascript change function is only working for the first row of table?

Screenshot:
I want to add the same value to a table row input field, but JavaScript working for first row only. Please help me with this .
My table is
<tr align="center">
<td align="center"><input type="checkbox" name="prodid[]" value="<?php echo $row["name"]; ?>"></td>
<td align="center"><?php echo $row["name"]; ?>
<input type="hidden" name="prodname[]" value="<?php echo $row["name"]; ?>">
</td>
<td align="center"><input align="center" type="number" name="prod_price[]" value="<?php echo $row["price"]; ?>" class="form-control"><input type="hidden" class="iprice" value="<?php echo $row["price"]; ?>"></td>
<td align="center"><input type="number" class="form-control iquantity" onchange="Subtotal()" type="number" name="prod_qty[]" class="form-control"></td>
<td align="center"><input type="number" class="eachnumber" id="eachnumber" name="prodsname[]" ></td>
<td class="itotal" align="center">0</td>
</tr>
passes the value from
<input type="number" id="number" class="form-control form-control-solid ps-12" placeholder="number"/>
javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js" integrity="sha512-jGR1T3dQerLCSm/IGEGbndPwzszJBlKQ5Br9vuB0Pw2iyxOy+7AK+lJcCC8eaXyz/9du+bkCy4HXxByhxkHf+w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.js" integrity="sha512-1icA56H/QfnWMmygJLor4dORvI+7Kurg9CfXSDeJmyMJQL98LfPRk/UwCmi7NoZwbUwxMoI0tc2gJqG/Uu+ecA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$('#number').change(function() {
for (i = 0; i < eachnumber.length; i++) {
$('#eachnumber').val($(this).val());
}
});
</script>

If you want to add that value in eachnumber of all the rows then you can simply do this.
$('#number').change(function() {
$('.eachnumber').val($(this).val());
});

Jquery value keeps updating to the latest clicked

I have a table that reveals a subtable. Within that subtable, it will calculate the amount of users via ajax and jquery. However, when i click to expand another subtable, the values update to the one just clicked instead of retaining their values. How do i solve this? The classes are totalagents and totalusers. Each subtable is supposed to have their own count.
Jquery
$('.expandlink_admin').on('click', function() {
var $row = $(this).closest('tr');
var curr_row = $row.data('id');
var company = $(this).closest('td').data('company');
var privilege = $(this).closest('td').data('privilege');
$.ajax({
url: '/manager/administrator/users/count_agents_users',
type: 'POST',
dataType: 'json',
data: {
id: curr_row,
company: company,
privilege: privilege
},
cache: false,
success: function(result) {
$(".subtable").each(function() { //loop through each row
if ($("[type='hidden']", this).val() == curr_row) {
$(this).show();
$row.find('.expandlink_admin').hide();
$row.find('.shrinklink_admin').show();
$('.totalagents').html(result.agents);
$('.totalusers').html(result.users);
}
});
}
});
});
HTML
<tbody>
<?php $offset = $this->uri->segment(5,0)+1; ?>
<?php foreach($user as $row): ?>
<tr data-id="<?php echo $row->id; ?>">
<td>
<?php echo $offset++; ?>
</td>
<td>
<?php echo $row->company; ?>
</td>
<td data-company="<?php echo $row->company; ?>" data-privilege="<?php echo $row->privilege; ?>">
<input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>" />
<input type="button" class="expandlink_admin" value="+" />
</td>
<td>
<input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>" />
<input type="button" class="shrinklink_admin" value="-" />
</td>
<td>
<input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>" />
<input type="hidden" name="company" value="<?php echo $row->id; ?>" />
<input type="hidden" name="set" value="edit" />
<input type="button" class="editlink_company" value="Edit" />
</td>
<td>
<input type="hidden" class="id" name="id" value="<?php echo $row->id; ?>" />
<input type="hidden" name="company" value="<?php echo $row->id; ?>" />
<input type="hidden" name="set" value="delete" />
<input type="button" class="deletelink" value="Delete" />
</td>
</tr>
<tr class="subtable">
<td colspan="9">
<input type="hidden" value="<?php echo $row->id; ?>" />
<table class="table">
<tr>
<td>Total Agents : </td>
<td class="totalagents"></td>
<td>Address : </td>
<td>
<?php echo $row->address; ?>
</td>
</tr>
<tr>
<td>Total Users : </td>
<td class="totalusers"></td>
<td>Date Added : </td>
<td>
<?php echo $row->date_added; ?>
</td>
</tr>
</table>
</td>
</tr>
<?php endforeach; ?>
</tbody>
Expected result
Row 1
<br/>Total Agents : 4
<br/>Total Users : 2
<br/>Row 2
<br/>Total Agents : 2
<br/>Total Users : 12
<br/>
Actual result
Row 1
<br/>Total Agents : 4
<br/>Total Users : 2
<br/>Row 2
<br/>Total Agents : 4
<br/>Total Users : 2

The solution in case anyone was wondering
$(".subtable").each(function() { //loop through each row
if($("[type='hidden']", this).val() == curr_row) {
//$(this) means subtable
$(this).show();
$row.find('.expandlink_admin').hide();
$row.find('.shrinklink_admin').show();
$(this).find('.totalagents').html(result.agents);
$(this).find('.totalusers').html(result.users);
}
});

How to Check All Checkboxes using JavaScript in a table row emitted by PHP

I am new to PHP. I want to create a script to check all checkboxes in a row, but I am stuck.
PROBLEM
Code is not working with loop.
Here is my output
When I check the checkbox under the Opinion column I want to automatically check all checkboxes in the same row.
Here is my code
To render data and checkboxes for each row I use a server-side PHP loop
JavaScript:
<script>
$('.allcb').on('click', function() {
$(this).parent().parent().parent().parent().find('.chk').prop('checked', this.checked);
});
</script>
HTML:
<?php
for ($i=0; $i<count($opinion); $i++) {
//if ($opinion[$i] == "")continue;
?>
<tr>
<td>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- <input type="text" name="opinion[]" value="<?php //echo $opinion[$i]?>" size="28" readonly="readonly" />-->
<input type="checkbox" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" />
<?php echo $opinion[$i]?>
</td>
<td>
<input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" />
<?php echo $action[$i] ?>
</td>
<td>
<input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" />
<?php echo $long_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
<?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" />
<?php echo $short_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
<?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" />
<?php echo $outlook[$i] ?>
</td>
<td>
<input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" />
<?php echo $rating_type[$i] ?>
</td>
</tr>
<?php
}
?>

A simple way would be if you add some identifier to you TRs so the checkbox "knows" which checkboxes are in the same row.
It would also be possible by checking the parent nodes but this may be a bit unstable (think about restructure the table for example).
function toggleRowCbs(cb) {
var cbs = document.getElementById(cb.dataset.rowid).querySelectorAll('[type="checkbox"]');
[].forEach.call(cbs, function(x) {
x.checked = cb.checked;
});
}
table,
tr,
td,
th {
border: 1px solid #ccc;
border-collapse: collapse;
text-align: left;
padding: 2pt 4pt;
}
<table>
<tr>
<th>Optionion</th>
<th>Action</th>
<th colspan="4">Ratings</th>
<th>Outlook</th>
<th>Rating Type</th>
</tr>
<tr>
<th></th>
<th></th>
<th colspan="2">Long Term</th>
<th colspan="2">Short Term</th>
<th></th>
<th></th>
</tr>
<tr>
<th></th>
<th></th>
<th>Current</th>
<th>Previous</th>
<th>Current</th>
<th>Previous</th>
<th></th>
<th></th>
</tr>
<tr id="row1">
<td>
<input type="checkbox" data-rowid="row1" onchange="toggleRowCbs(this)" />Foobar
</td>
<td>
<input type="checkbox" />Maintain
</td>
<td>
<input type="checkbox" />A+
</td>
<td>
<input type="checkbox" />A+
</td>
<td>
<input type="checkbox" />A1
</td>
<td>
<input type="checkbox" />A1
</td>
<td>
<input type="checkbox" />Stable
</td>
<td>
<input type="checkbox" />Entity
</td>
</tr>
<tr id="row2">
<td>
<input type="checkbox" data-rowid="row2" onchange="toggleRowCbs(this)" />Foobar #2
</td>
<td>
<input type="checkbox" />Maintain
</td>
<td>
<input type="checkbox" />A+
</td>
<td>
<input type="checkbox" />A+
</td>
<td>
<input type="checkbox" />A1
</td>
<td>
<input type="checkbox" />A1
</td>
<td>
<input type="checkbox" />Stable
</td>
<td>
<input type="checkbox" />Entity
</td>
</tr>
</table>
So your PHP Code would look like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
for ($i=0; $i<count($opinion); $i++) { ?>
<tr id="row<?php echo $i ?>">
<td>
<input type="checkbox" data-rowid="row<?php echo $i ?>" onchange="toggleRowCbs(this)" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" />
<?php echo $opinion[$i]?>
</td>
<td>
<input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" />
<?php echo $action[$i] ?>
</td>
<td>
<input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" />
<?php echo $long_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
<?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" />
<?php echo $short_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
<?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" />
<?php echo $outlook[$i] ?>
</td>
<td>
<input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" />
<?php echo $rating_type[$i] ?>
</td>
</tr>
<?php } ?>
Because this is a vanilla JavaScript solution which uses querySelectorAll, dataset and Array.prototype.forEach this may be not running on all browsers you want.

$('.allcb').on('click', function() {
$(this).parent().siblings().find('.chk').prop('checked', this.checked);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="checkbox" name="opinion[]" class="allcb" data-child="chk" value="<?php echo $opinion[$i]?>" />
<?php echo $opinion[$i]?>
</td>
<td>
<input type="checkbox" name="action[]" class="chk" value="<?php echo $action[$i] ?>" />
<?php echo $action[$i] ?>
</td>
<td>
<input type="checkbox" name="long_term[]" class="chk" value="<?php echo $long_term[$i] ?>" />
<?php echo $long_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_long_term[]" class="chk" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
<?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="short_term[]" class="chk" value="<?php echo $short_term[$i] ?>" />
<?php echo $short_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_short_term[]" class="chk" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
<?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="outlook[]" class="chk" value="<?php echo $outlook[$i] ?>" />
<?php echo $outlook[$i] ?>
</td>
<td>
<input type="checkbox" name="rating_type[]" class="chk" value="<?php echo $rating_type[$i] ?>" />
<?php echo $rating_type[$i] ?>
</td>
</tr>
</table>

You can do it by adding a kind of reference on the other check boxes to the main check box you are checking. Then, when clicking on the main check box, you can control the others. Like this:
Javascript:
$('.allcb').on('click', function(){
var index = $(this).data('index');
if ($(this).is(':checked'))
{
$('.childChk' + index).prop('checked', true);
}
else
{
$('.childChk' + index).prop('checked', false);
}
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<?php
for ($i=0; $i<count($opinion); $i++) {
//if ($opinion[$i] == "")continue;
?>
<tr>
<td>
<!-- <input type="text" name="opinion[]" value="<?php //echo $opinion[$i]?>" size="28" readonly="readonly" />-->
<input type="checkbox" name="opinion[]" class="allcb" data-child="chk" data-index="<?=$i?>" value="<?php echo $opinion[$i]?>" />
<?php echo $opinion[$i]?>
</td>
<td>
<input type="checkbox" name="action[]" class="chk chkChild<?=$i?>" value="<?php echo $action[$i] ?>" />
<?php echo $action[$i] ?>
</td>
<td>
<input type="checkbox" name="long_term[]" class="chk chkChild<?=$i?>" value="<?php echo $long_term[$i] ?>" />
<?php echo $long_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_long_term[]" class="chk chkChild<?=$i?>" value="<?php echo !empty($p_long_term[$i])?$p_long_term[$i]:'';?>" />
<?php echo !empty($p_long_term[$i])?$p_long_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="short_term[]" class="chk chkChild<?=$i?>" value="<?php echo $short_term[$i] ?>" />
<?php echo $short_term[$i] ?>
</td>
<td>
<input type="checkbox" name="p_short_term[]" class="chk chkChild<?=$i?>" value="<?php echo !empty($p_short_term[$i])?$p_short_term[$i]:'';?>" />
<?php echo !empty($p_short_term[$i])?$p_short_term[$i]: '';?>
</td>
<td>
<input type="checkbox" name="outlook[]" class="chk chkChild<?=$i?>" value="<?php echo $outlook[$i] ?>" />
<?php echo $outlook[$i] ?>
</td>
<td>
<input type="checkbox" name="rating_type[]" class="chk chkChild<?=$i?>" value="<?php echo $rating_type[$i] ?>" />
<?php echo $rating_type[$i] ?>
</td>
</tr>
<?php
}
?>
Note that I added the $i counter to your child check boxes class. This won't change the behavior of any DOM element.
EDIT:
You may NOT call the jQuery library inside the loop. The jQuery library MUST be called just one time. If you call several times, all the solutions presented here will not work.

Simple use this :
$(document).ready(function(){
$('.allcb').on('click', function(){
$(this).parent("td").parent("tr").find('.chk').prop('checked', this.checked);
});
});

You can try this,
$('.allcb').on('click', function(){
$(this).closest('tr').find('.chk').prop('checked', this.checked);
});
Or
$('.allcb').on('click', function(){
$(this).parents('tr').find('.chk').prop('checked', this.checked);
});
this is just Pekka answer with 1 line more.

If you want to check all the checkBoxes using javascript,
You can give all the checkbox a class,
and then
var a = document.getElementsByClassName("yourClassName");
for(var key in a) {
a[key].checked = true;
}
or
if you want to use jQuery ,
$(".yourClassName").attr("checked",true);

This solution plays nice with dynamic elements, and uses className to identity the row (.option-row) instead of relying on tagName so that you're not committed to using specific elements to display the data.
Make sure that you include a reference to jquery.js before you call the $ function (as in the example below).
// check or uncheck all boxes with class 'chk' when 'allcb' is clicked
$(document).on('click', '.allcb', function() {
$('.chk',$(this).closest('.option-row')).prop('checked', this.checked);
});
// simulate PHP; render some rows for demo
var html = [];
for (var i = 0; i < 5; i++) {
html.push('<tr class="option-row"><td><input type="checkbox" class="allcb cb"/></td><td><input type="checkbox" class="chk"/></td><td><input type="checkbox" class="chk"/></td></tr>');
}
$("tbody").html(html.join(''));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>Opinion</th>
<th>Column A</th>
<th>Column B</th>
</tr>
</thead>
<tbody>
</tbody>
</table>

php shopping cart not displaying items in cart?

I'm trying to implement a php shopping cart on my site. I currently have the products page correctly reading from my database. When the cart is empty, the "There are no items in your cart," text displays, however when the cart has something in it, it displays the headers to this table, but no product information.
<form name="cartform" method="post" action="">
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
<span id="cont_shop">
<input type="button" value="Continue Shopping" onclick="window.location.href='../Project/products.php'" />
</span>
<div id="formerror"><?php echo $message ?></div>
<table id="cart_table">
<?php
if(count($_SESSION['cart']))
{
echo '<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
<th>Options</th>
</tr>';
$max = count($_SESSION['cart']);
for($i = 0; $i < $max; $i++)
{
$product_id = $_SESSION['cart'][$i]['productid'];
$quantity = $_SESSION['cart'][$i]['quantity'];
$product_name = get_product_name($dbc,$product_id);
$product_price = get_price($dbc,$product_id);
if($quantity == 0)
{
continue;
}
echo '<tr>
<td>' . $product_name . '</td>
<td>$ ' . $product_price . '</td>
<td><input type="text" name="product' . $product_id . '" value="' . $quantity . '" maxlength="4" size="2" /></td>
<td>$ ' . $product_price*$quantity . '</td>
<td>Remove Item</td>
</tr>';
}
echo '<tr>
<td colspan="2"><strong>Order Total: $' . get_order_total($dbc) . '</strong></td>
<td></td>
<td colspan="3" id="cart_buttons">
<input type="submit" value="Clear Cart" onclick="clear_cart()">
<input type="submit" value="Update Cart" onclick="update_cart()">
<input type="submit" value="Complete Order" onclick="complete_order()">
</td>
</tr>';
}
else
{
echo '<tr><td>There are no items in your shopping cart.</td></tr>';
}
?>
</table>
</form>
When I view the page source, all I see is the HTML render to here:
<table id="cart_table">
<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
<th>Options</th>
</tr>

<?php
if(count($_SESSION['cart']))
{
?>
<form name="cartform" method="post" action="">
<input type="hidden" name="productid" />
<input type="hidden" name="command" />
<span id="cont_shop">
<input type="button" value="Continue Shopping" onclick="window.location.href='../Project/products.php'" />
</span>
<div id="formerror"><?php echo $message ?></div>
<table id="cart_table">
<?php
echo '<tr>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
<th>Options</th>
</tr>';
$max = count($_SESSION['cart']);
for($i = 0; $i < $max; $i++)
{
$product_id = $_SESSION['cart'][$i]['productid'];
$quantity = $_SESSION['cart'][$i]['quantity'];
$product_name = get_product_name($dbc,$product_id);
$product_price = get_price($dbc,$product_id);
if($quantity == 0)
{
continue;
}
echo '<tr>
<td>' . $product_name . '</td>
<td>$ ' . $product_price . '</td>
<td><input type="text" name="product' . $product_id . '" value="' . $quantity . '" maxlength="4" size="2" /></td>
<td>$ ' . $product_price*$quantity . '</td>
<td>Remove Item</td>
</tr>';
}
echo '<tr>
<td colspan="2"><strong>Order Total: $' . get_order_total($dbc) . '</strong></td>
<td></td>
<td colspan="3" id="cart_buttons">
<input type="submit" value="Clear Cart" onclick="clear_cart()">
<input type="submit" value="Update Cart" onclick="update_cart()">
<input type="submit" value="Complete Order" onclick="complete_order()">
</td>
</tr>';
?>
</table>
</form>
<?php
}
else
{
echo '<tr><td>There are no items in your shopping cart.</td></tr>';
}
?>

SUM dynamic input field onchange with javascript

how to sum all those field (name="envelope[]") and display the result in another input. I'm not sure how to do that because those fields are generated dynamycally. tks Seby
UPDATE: here's what I tried with the javascript function. the problem I have is that the function start but gives me the result of all envelope[] input. But i need the result on every lines, not from all the envelope[] fields.
I've change the hilighted field, but the top amount changed.
see example here: 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"> </td>
<td colspan="2" ><img src="http://www.sebyphotographe.com/simplestudio/images/icon_delete.png" class="removeimg"></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++;
}
?>

Something like this should do the trick
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;