PDA

View Full Version : Help in accessing form elements

dhanya
08-29-2006, 09:50 AM
Hi,

I'm new to JS. I'm creating a invoice application. In the JSP page user has an option to enter more than one location for each contract. I have created the JSP page. I face problem in calculating the total for the newlocation if user has added a new one. I'm posing my Invoice.jsp page below. Pls provide me some way to carry out.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>INVOICE</title>
</head>
<body>
<script language="Javascript">
var gRowId = 2;
var i=1;
function addLocation(tableId,formId)
{
var tbody = document.getElementById('table'+tableId).getElementsByTagName("tbody")[0];
var row=document.createElement('<tr>');
var data =document.createElement('<td>');
var data1 =document.createElement('<td>');
var input1=document.createElement('INPUT');
var input2=document.createElement('INPUT');
var input3=document.createElement('INPUT');
var input4=document.createElement('INPUT');
input1.setAttribute('type','text');
input1.setAttribute('name','contract');
input1.setAttribute('size','8');
data1.setAttribute('align','center');
data1.appendChild(input1);
var data2=document.createElement('<td>');
input2.setAttribute('type','text');
input2.setAttribute('name','amount');
input2.setAttribute('size','8');
data2.setAttribute('align','center');
data2.appendChild(input2);
var data3=document.createElement('<td>');
input3.setAttribute('type','text');
input3.setAttribute('name','quantity');
input3.onkeyup=function(){calculate(formId);}
input3.setAttribute('size','8');
data3.setAttribute('align','center');
data3.appendChild(input3);
var data4=document.createElement('<td>');
input4.setAttribute('type','text');
input4.setAttribute('name','total');
input4.setAttribute('size','8');
data4.setAttribute('align','center');
data4.appendChild(input4);
var data5 =document.createElement('<td>');
var input5=document.createElement('INPUT');
input5.setAttribute('type','button');
input5.setAttribute('value','Delete');
// data5.setAttribute('align','center');
input5.onclick=function(){delRow(tableId,this);}
data5.appendChild(input5);
data.innerHTML = "";
row.appendChild(data);
row.appendChild(data1);
row.appendChild(data2);
row.appendChild(data3);
row.appendChild(data4);
row.appendChild(data5);
tbody.appendChild(row);
gRowId++;

}
function delRow(tableId,button)
{
var row = button.parentNode.parentNode;
var tbody = document.getElementById('table'+tableId).getElementsByTagName('tbody')[0];
tbody.removeChild(row);
}

function calculate(formId)
{
var form =document.getElementById(formId);
//alert(form.amount.value);
form.total.value = form.amount.value * form.quantity.value;
}


</script>
<h3 align = center> INVOICE </h3>
<br><br>
<table width="75%" border="1" align="center" cellpadding="3" cellspacing="0">
<tr>
<th bgcolor="#DFDFDF" width="25%">Invoice No :</th>
<td ><input type="text" size="10"></td>
<th bgcolor="#DFDFDF" width="25%"> Invoice Date :</th>
<td><input type="text" size="10"></td>
<th bgcolor="#DFDFDF" width="25%"> Vat No :</th>
<td><input type="text" size="10"></td>
</tr>
</table>
<br>
<table width="75%" border="1" align="center" cellpadding="3" cellspacing="0">
<tr>
<th bgcolor="#DFDFDF" width="37%">Invoice To : </th>
<td><textarea rows ="3" cols="30"></textarea></td>
<th bgcolor="#DFDFDF" width="38%"> Copy To : </th>
<td><textarea rows ="3" cols="30"></textarea></td>
</table>
<br><br>
<!-- <form name ="form1" METHOD="post" ENCTYPE="multipart/form-data"> -->

<table id="table1" width="90%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="15%" align="left"><h4>Contract</h4></td>
<td width="14%" align="center"><h4>Location</h4></td>
<td width="15%" align="center"><h4>Amount</h4></td>
<td width="14%" align="center"><h4>Quantity</h4></td>
<td width="15%" align="center"><h4>Total</h4></td>
<td width="27%"></td>
</tr>
<tr></tr>
<tr></tr>
<tr></tr>
</table>

<form name ="form1" >
<table id="table2" width="115%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr id="tabid">
<td width="16%" height="40" align="center"><input type =text name = contract size =8></td>
<td width="11%" align="center"><input type =text name = location size =8></td>
<td width="12%" align="center"><input type =text name = amount size =8 ></td>
<td width="11%" align="center"><input type =text name = quantity size =8 onkeyup="javascript:calculate('form1')"></td>
<td width="11%" align="center"> <input type =text name = total size =8></td>
<td width="39%" ><input type="button" onclick="javascript:addLocation(2,form1)" value="Add Location "></td>
</tr>
</tbody>
</table>
</form>
<!--
<tr>
<td ><input type =text name = contract1 size =8></td>
<td><input type =text name = location1 size =8></td>
<td><input type =text name = amount1 size =8></td>
<td><input type =text name = quantity1 size =8></td>
<td><input type =text name = total1 size =8></td>
<td ><input type="button" onclick="javascript:addLocation()" value="Add Location "></td>
</tr> -->
<form name ="form2" >
<table id="table3" width="115%" border="0" align="center" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="16%" height="40" align="center"><input type =text name = contract size =8></td>
<td width="11%" align="center"><input type =text name = location size =8></td>
<td width="12%" align="center"><input type =text name = amount size =8 ></td>
<td width="11%" align="center"><input type =text name = quantity size =8 onkeyup="javascript:calculate('form2')"></td>
<td width="11%" align="center"> <input type =text name = total size =8></td>
<td width="39%" ><input type="button" onclick="javascript:addLocation(3)" value="Add Location "></td>
</tr>
</tbody>
</table>
</form>
<center>
<br>
<br>
<input type =button value="Save">
</body>
</html>

Earliest reply will be most helpful. If u find any errors in my code pls do point out.

Thanks & Regards,
Dhanya.
vwphillips
08-29-2006, 02:57 PM
there are errors in your html, view in Moz FF

study this example

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


<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function Init(id,cls,nme){
var obj=document.getElementById(id);
var trs=obj.rows;
window['zxc'+id]=[document.getElementsByName(nme)[0]];
for (var zxc0=0;zxc0<trs.length;zxc0++){
if (trs[zxc0].className==cls){
window['zxc'+id].push(trs[zxc0]);
var ips=trs[zxc0].getElementsByTagName('INPUT');
for (var zxc1=1;zxc1<2;zxc1++){ // the number input = 1
zxcAddEvt(ips[zxc1],'Total','keyup');
}
}
}
}

function Total(){
var ary=FndAry(this);
var tr=FndTr(this)
this.value=this.value.replace(/\D/g,'');
var ips=tr.getElementsByTagName('INPUT');
ips[2].value='0'
if (this.value.length<1){ return; }
ips[2].value=ips[0].value*ips[1].value; // the calculation will depend on requirement
var totalval=0;
for (var zxc0=1;zxc0<ary.length;zxc0++){
var val=ary[zxc0].getElementsByTagName('INPUT')[2].value; // the sub total textbox
if (val.length>0){
totalval+=val*1;
}
}
ary[0].value=totalval;
}

function FndTr(obj){
while (obj.parentNode){
if (obj.tagName=='TR'){ return obj; }
obj=obj.parentNode;
}
return false;
}

function FndAry(obj){
while (obj.parentNode){
if (window['zxc'+obj.id]){ return window['zxc'+obj.id]; }
obj=obj.parentNode;
}
return false;
}


function zxcEventAdd(zxco,zxct,zxcf) {
if ( zxco.addEventListener ){ zxco.addEventListener(zxct, function(e){ zxco[zxcf](e);}, false); }
else if ( zxco.attachEvent ){ zxco.attachEvent('on'+zxct,function(e){ zxco[zxcf](e); }); }
else {
var zxcPrev=zxco["on" + zxct];
if (zxcPrev){ zxco['on'+zxct]=function(e){ zxcPrev(e); zxco[zxcf](e); }; }
else { zxco['on'+zxct]=zxco[zxcf]; }
}
}


var zxcEvt=0;

function zxcAddEvt(zxco,zxcfun,zxcevt){
if (zxco['zxc'+zxcfun+zxcevt]){ return; }
zxco['zxcaddEvt'+zxcEvt]=window[zxcfun];
zxco['zxc'+zxcfun+zxcevt]=true;
zxcEventAdd(zxco,zxcevt,'zxcaddEvt'+zxcEvt);
zxcEvt++;
}

//-->
</script>

</head>

<body onload="Init('T1','CLine','total');" >
call Init('T1','CLine','total'); whenever a row is added<br>
<table id="T1" cellpadding="0" cellspacing="0" border="1">
<tr>
<td width="100">Price</td>
<td width="100">Number</td>
<td width="100">Sub Total</td>
</tr>
<tr class="CLine">
<td><input name="" size="5" value="10" /></td>
<td><input name="" size="5" /></td>
<td><input name="" size="5" /></td>
</tr>
<tr class="CLine">
<td><input name="" size="5" value="12" /></td>
<td><input name="" size="5" /></td>
<td><input name="" size="5" /></td>
</tr>
<tr >
<td> </td>
<td>Total</td>
<td><input name="total" size="5" /></td>
</tr>
</table>
</body>

</html>