help with dynamicaly adding texboxes

maria_megha · 02-05-2012, 06:37 PM

Hey can anyone modify the below code such that when the page loads this first textbox should not appear.It should appear only after the user clicks on the button.And ofcourse the suming up function should work

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Adding new textbox values
</title>
<script type="text/javascript">

function viewsource() {
alert(document.body.innerHTML);
}
</script>
<script type="text/javascript">

function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var frm=document.form0;
if (!frm.ary) frm.ary=[frm.t1_2];
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// numberd row
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);

// Item row
var cellRight1 = row.insertCell(1);
var el1 = document.createElement('input');
el1.type = 'text';
el1.name = 't' + iteration + '_1';
el1.id = 't' + iteration + '_1';
el1.size = 40;
cellRight1.appendChild(el1);

// Price row
var cellRight2 = row.insertCell(2);
var el2 = document.createElement('input');
frm.ary.push(el2);
el2.type = 'text';
el2.value = '';
el2.name = 't' + iteration + '_2';
el2.id = 't' + iteration + '_2';
el2.size = 5;
el2.onkeyup=Calc;
el2.onblur=Calc;
cellRight2.appendChild(el2);
}

</script>

<script type="text/javascript">


function Calc(){
var frm=document.form0;
if (!frm.ary) frm.ary=[frm.t1_2];
var total=0;
for (var zxc0=0;zxc0<frm.ary.length;zxc0++){
if (frm.ary[zxc0].value.length>0&&!isNaN(frm.ary[zxc0].value)) total+=frm.ary[zxc0].value*1;
}
frm.sum.value=total;
}

</script>

</head>
<body>

<form action="none" method="get" name="form0" id="form0">
<table border="0" id="tblSample" align="center">
<tr>
<th colspan="3">
<br>
<br>
<br>
Adding rows then adding up values entered
<hr>

<input type="button" value="Add new textbox" onclick=
"addRowToTable();">
</th>
</tr>
<tr id="cloneid" >
<td>
1 Item/Price
</td>
<td>
<input type="text" name="t1_1" id="t1_1" size="40">

</td>
<td>
<input type="text" name="t1_2" id="t1_2" size="5" value="" onkeyup="Calc();" onblur="Calc();">
</td>
</tr>
</table>
<table border="0" align="center">
<tr>
<td colspan="3" align="center">

<br>
<br>
Sum: <input type="text" name="sum" id="sum"><br>
I need to auto calculate above entered textbox values
to this box as new textboxes are added.<br>
<br>
<a href="java_script:viewsource()">view source</a><br>
As you can see from the source, the new text boxes have
new name's/id's per + iteration.
</td>

</tr>
</table>
</form>
</body>
</html>

sunfighter · 02-06-2012, 06:02 PM

I changed your last table into a div and removed all the <br>'s so that it looks a little neater.
Added inline styling to the top table. align="center" is depreciated, don't use it.
Combined all the javascripts into one section.
Changed for (var zxc0=1;....
Used Number(frm.ary[zxc0].value); instead of times one.
javascript instead of java_script

For the most part I left function Calc() alone, but this does need work. It will not show the decimal when it's entered, it will not show a zero at the end of a number. OK when finally totaled and does not end in zero. Also it will take more then 2 zeroes after a decimal.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>
Adding new textbox values
</title>
<script type="text/javascript">
function viewsource()
{
	alert(document.body.innerHTML);
}

function addRowToTable()
{
	var tbl = document.getElementById('tblSample');
	var frm=document.form0;
	if (!frm.ary) frm.ary=[frm.t1_2];
	var lastRow = tbl.rows.length-1;
	// if there's no header row in the table, then iteration = lastRow + 1
	var iteration = lastRow;
	var row = tbl.insertRow(lastRow);

	// numberd row
	var cellLeft = row.insertCell(0);
	var textNode = document.createTextNode(iteration+" Item/Price");
	cellLeft.appendChild(textNode);

	// Item row
	var cellRight1 = row.insertCell(1);
	var el1 = document.createElement('input');
	el1.type = 'text';
	el1.name = 't' + iteration + '_1';
	el1.id = 't' + iteration + '_1';
	el1.size = 40;
	cellRight1.appendChild(el1);

	// Price row
	var cellRight2 = row.insertCell(2);
	var el2 = document.createElement('input');
	frm.ary.push(el2);
	el2.type = 'text';
	el2.value = '';
	el2.name = 't' + iteration + '_2';
	el2.id = 't' + iteration + '_2';
	el2.size = 5;
	el2.onkeyup=Calc;
	el2.onblur=Calc;
	cellRight2.appendChild(el2);
}

function Calc()
{
	var frm=document.form0;
	if (!frm.ary) frm.ary=[frm.t1_2];
	var total=0;
	for (var zxc0=1; zxc0<frm.ary.length; zxc0++)
	{
		if (frm.ary[zxc0].value.length>0 && !isNaN(frm.ary[zxc0].value))
		{
			total += Number(frm.ary[zxc0].value);
		}
	}
	frm.sum.value=total;
}
</script>
</head>


<body>
	<form action="none" method="get" name="form0" id="form0">

		<table border="0" id="tblSample" style="margin-top:75px;margin-left:auto;margin-right:auto;">
			<tr>
				<th colspan="3">
					Adding rows then adding up values entered
					<hr>
					<input type="button" value="Add new textbox" onclick="addRowToTable();">
				</th>
			</tr>

			<tr id="cloneid">
			</tr>
		</table>

		<div style="text-align: center;margin-top:70px;">
				Sum: <input type="text" name="sum" id="sum">
				<p>
					I need to auto calculate above entered textbox values
					to this box as new textboxes are added.
				</p>
				<a href="javascript:viewsource()">view source</a><br>
				As you can see from the source, the new text boxes have
				new name's/id's per + iteration.
		</div>
	</form>
</body>
</html>