Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    help with dynamicaly adding texboxes

    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>

  • #2
    Senior Coder
    Join Date
    Jan 2011
    Location
    Missouri
    Posts
    4,307
    Thanks
    23
    Thanked 612 Times in 611 Posts
    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>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •