...

View Full Version : auto add pre defined input fields in a form and total the same dynamically



meenakshia
06-09-2008, 09:02 PM
hi forum:)
i have a form in which i have four input fields for pieces to be entered and 4 fields for amount
what i want is that the first pieces-t1 should be visible and rest three should not show up on the form unless asked for.
can anyone suggest me a way to do this
i have come across a lot of help areas where we can add input fields but in my case i have only predefined 3 fields
the code is below


<td>Pieces-t1</td>
<td><input type="text" name="txttp1" tabindex="5" size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>

Amount-t1
<input type="text" name="txttamt1" tabindex="5" size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
</td>
</tr>
<tr>
<td>

Pieces-t2
</td>
<td>
<input type="text" name="txttp2" tabindex="5" size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>

Amount-t2
<input type="text" name="txttamt2" tabindex="5" size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
</td>
</tr><tr>
<td>

Pieces-t3
</td>
<td>
<input type="text" name="txttp3" tabindex="5" size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>

Amount-t3
<input type="text" name="txttamt3" tabindex="5" size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
</td></tr><tr>
<td>

Pieces-t4
</td>
<td>
<input type="text" name="txttp4" tabindex="5" size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>

Amount-t4
<input type="text" name="txttamt4" tabindex="5" size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
</td></tr>



can you guys suggest me some solution for this?
also is there any way i can get the total of pieces and amount at the end
and a grand total being total pieces*amount
smile always
anand:)

meenakshia
06-10-2008, 05:57 AM
hi
i think i have not clearly stated what i was looking for
i will try to do this again:)ple bear with me
what i want is that the input fields
pieces-t1 and amount-t1 should be visible
rest three pieces-t2,t3,t4 and amount-t2,t3,t4 should not show initially
when i click on add button one filed should show up that is t2 and then t3 and then t4 when clicked but t4 fields are the end.i dont want to go ahead with adding more fields
smile always
anand:)

finaddict
06-28-2008, 07:09 PM
You should be able to cobble something together from existing scripts with similar functionality. I think the script found here http://javascript.internet.com/forms/add-input-fields.html# would serve as a good starting point for getting the new input fields to appear. Some clever search queries will probably bring up links on how to create a cumulative sum of the total.

vwphillips
06-29-2008, 09:19 AM
<!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" xml:lang="en" lang="en">

<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
.hide {
display:none;
}

/*]]>*/
</style>

<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function Add(id){
var tbdy=document.getElementById(id);
var trs=tbdy.getElementsByTagName('TR');
for (var zxc0=0;zxc0<trs.length;zxc0++){
if (trs[zxc0].className&&trs[zxc0].className=='hide'){
trs[zxc0].className='';
break;
}
}
}

function Totals(but,id,pieces,amount){
var tbdy=document.getElementById(id);
var ips=tbdy.getElementsByTagName('INPUT');
for (var ptotal=0,atotal=0,zxc0=0;zxc0<ips.length;zxc0++){
ips[zxc0].value=ips[zxc0].value.replace(/\D/,'');
if (ips[zxc0].value.length>0){
if (zxc0%2==0) ptotal+=ips[zxc0].value*1;
else atotal+=ips[zxc0].value*1;
}
}
but.form[pieces].value=ptotal;
but.form[amount].value=atotal;
}

/*]]>*/
</script>
</head>

<body>
<form >
<table>
<tbody id="tst" >
<tr>
<td>Pieces-t1</td>
<td><input type="text" name="txttp1" tabindex="5" size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>

Amount-t1
<input type="text" name="txttamt1" tabindex="5" size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
</td>
</tr>
<tr class="hide" >
<td>

Pieces-t2
</td>
<td>
<input type="text" name="txttp2" tabindex="5" size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>

Amount-t2
<input type="text" name="txttamt2" tabindex="5" size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
</td>
</tr><tr class="hide" >
<td>

Pieces-t3
</td>
<td>
<input type="text" name="txttp3" tabindex="5" size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>

Amount-t3
<input type="text" name="txttamt3" tabindex="5" size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
</td>
</tr>
<tr class="hide" >
<td>

Pieces-t4
</td>
<td>
<input type="text" name="txttp4" tabindex="5" size="4" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>

Amount-t4
<input type="text" name="txttamt4" tabindex="5" size="6" onfocus="this.style.backgroundColor='#C6AEC7';" onblur="this.style.backgroundColor='#FAF8CC';"></font>
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>
<input type="button" name="" value="Add" onclick="Add('tst');" />
</td>
<td>
<input type="button" name="" value="Totals" onclick="Totals(this,'tst','Pieces','Amount');" />
</td>
</tr>
<tr>
<td>
Pieces <input name="Pieces" /><br />
</td>
<td>
Amount <input name="Amount" />
</td>
</tr>
</tbody>
</table>
</form>
</body>

</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum