how to work on array of textboxes 1

misslois74 · Sep 27, 2008

im working on a page which has a table consisting of checkbox and textbox now what i would like to happen is to be able to get the sum of the values entered on the textboxes per row and per column here is my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "

http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function disen(c){
var textBoxes=c.parentNode.parentNode.getElementsByTagName('input'), i=1, t;
while(t=textBoxes[i++]){
if(c.checked){t.removeAttribute('disabled');}
else{t.value='';t.setAttribute('disabled','disabled');}
}
}
</script>

</head>
<body>
<table border=0 cellpadding=1 cellspacing=5>
<tr>
<th>Days of Month</th>
<th>Kids</th>
<th>Adults</th>
<th>Volunteers</th>
</tr>
<?php for($i=1;$i<=31;$i=$i+1)
{
echo '<tr>
<td>'.$i.'   <input type="checkbox" onclick="disen(this)"></td>
<td><input type="text" disabled="disabled" size=5 ></td>
<td><input type="text" disabled="disabled" size=5 ></td>
<td><input type="text" disabled="disabled" size=5 ></td>
</tr>';
}
?>
</table>
</body>
</html>

hope you could help me with these....

tsuji · Sep 28, 2008

You can do something like this.
[tt]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "[ignore]

http://www.w3.org/TR/html4/strict.dtd

[/ignore]">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">

[red]/* replaced[/red]
function disen(c){
var textBoxes=c.parentNode.parentNode.getElementsByTagName('input'), i=1, t;
while(t=textBoxes[i++]){
if(c.checked){t.removeAttribute('disabled');}
else{t.value='';t.setAttribute('disabled','disabled');}
}
}
[red]*/[/red]

function disen(c) {
var otd=c.parentNode;
var otr=otd.parentNode;

for (var j=1;j<otr.cells.length;j++) {
if (!c.checked) {
otr.cells[j].getElementsByTagName("input")[0].value="";
}
otr.cells[j].getElementsByTagName("input")[0].disabled=!c.checked;
}
}

function doit() {
var otbl=document.getElementById("tblid");

var sum, cv, nrow, ncell;
for (var i=1;i<otbl.rows.length-1;i++) {
sum=0;
ncell=otbl.rows.cells.length-1;
if (otbl.rows.cells[0].getElementsByTagName("input")[0].checked) {
for (var j=1;j<ncell;j++) {
cv=otbl.rows.cells[j].getElementsByTagName("input")[0].value;
if (cv.length==0||!/^\s*[+-]?\d*(\.\d*)?\s*$/.test(cv)) {
otbl.rows.cells[j].getElementsByTagName("input")[0].value="";
cv=0;
}
sum+=parseFloat(cv);
}
otbl.rows.cells[ncell].getElementsByTagName("input")[0].disabled=false;
otbl.rows.cells[ncell].getElementsByTagName("input")[0].value=sum;
}
}

nrow=otbl.rows.length-1; //last row
ncell=otbl.rows[nrow].cells.length-1; //last row's last cell

for (var j=1;j<otbl.rows[nrow].cells.length;j++) {
sum=0
cv=otbl.rows.cells[j].getElementsByTagName("input")[0].value;
for (var i=1;i<otbl.rows.length-1;i++) {
if (cv.length==0||!/^\s*[+-]?\d*(\.\d*)?\s*$/.test(cv)) {
otbl.rows.cells[j].getElementsByTagName("input")[0].value="";
cv=0;
}
sum+=parseFloat(cv);
}
otbl.rows[nrow].cells[j].getElementsByTagName("input")[0].value=sum;
}
}
</script>

</head>
<body>
<table border=0 cellpadding=1 cellspacing=5 id="tblid"> [blue][/blue]
<tr>
<th>Days of Month</th>
<th>Kids</th>
<th>Adults</th>
<th>Volunteers</th>
[blue]<th>subtotal</th> [/blue]
</tr>

<?php
for($i=1;$i<=31;$i=$i+1)
{
echo '<tr>
<td>'.$i.'   <input type="checkbox" onclick="disen(this)"></td>
<td><input type="text" disabled="disabled" size=5 ></td>
<td><input type="text" disabled="disabled" size=5 ></td>
<td><input type="text" disabled="disabled" size=5 ></td>
[blue]<td><<input type="text" disabled="disabled" size="5" readonly="readonly" /></td>[/blue]
</tr>';
}
?>
[blue]<tr>
<td><span style="font-weight:bold;">    subtotal:</span></td>
<td><input type="text" size="5" readonly="true" /></td>
<td><input type="text" size="5" readonly="true" /></td>
<td><input type="text" size="5" readonly="true" /></td>
<td><input type="text" size="5" readonly="true" /></td>
</tr>[/blue]
</table>
[blue]<button onclick="doit()">update subtotals</button><br />[/blue]

</body>
</html>
[/tt]
Some minor preference of display, you can change it according to your taste, but that's the idea.

ps: Watch possible typos: this is online editing only.

misslois74 · Sep 29, 2008

thanks a lot for the code Tsuji im getting the summation for all the values per row but the summation per column is not displaying it remains zero as i click on the update button...

tsuji · Sep 29, 2008

errata

I have taken a look at it. Here are some errors in editing.

[1] a very minor typo
> <td><<input type="text" disabled="disabled" size="5" readonly="readonly" /></td>
[tt] <td>[highlight]<[/highlight]input type="text" disabled="disabled" size="5" readonly="readonly" /></td>[/tt]

[2] A misplaced line in the function doit()
[tt]
for (var j=1;j<otbl.rows[nrow].cells.length;j++) {
sum=0
[red]//[/red]~~cv=otbl.rows.cells[j].getElementsByTagName("input")[0].value;~~
for (var i=1;i<otbl.rows.length-1;i++) {
[blue]cv=otbl.rows.cells[j].getElementsByTagName("input")[0].value;[/blue] [blue]//should appear here[/blue]
//etc etc everything the same
[/tt]
[3] I would quote the [tt]size=5[/tt] but nothing important to affect the functionality.

misslois74 · Sep 30, 2008

thanks a lot for that code, its now working and my next task will be to save the data for the total to the database using PHP....

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

how to work on array of textboxes 1

misslois74

Programmer

tsuji

Technical User

misslois74

Programmer

tsuji

Technical User

misslois74

Programmer

Similar threads

Part and Inventory Search

Sponsor