Member Avatar for AirGear

i'm still a newbie in javascript. i know this question may be silly for some experts in javascript. and i'm sorry for that :(

i want to create a dynamic form using javascript, where i can click a button to add some new fields. i tried to search it in google, and i tried to use it. but it doesn't work in mozilla and gave error warning in IE. can someone help me in creating that dynamic form, or maybe you can give me some links that give explanation about that.

thx so much,
AG

  • 2 Contributors
  • 3 Replies
  • 160 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by network18
Member Avatar for network18

i'm still a newbie in javascript. i know this question may be silly for some experts in javascript. and i'm sorry for that :(

i want to create a dynamic form using javascript, where i can click a button to add some new fields. i tried to search it in google, and i tried to use it. but it doesn't work in mozilla and gave error warning in IE. can someone help me in creating that dynamic form, or maybe you can give me some links that give explanation about that.

thx so much,
AG

This is the example of to add the rows dynamically

<html>
<head>
<script type='text/javascript'>
  var emptyRow = null;
  function init() {
    var table = document.getElementById( 'insertorder' );
    var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ];
    var tr    = tbody.firstChild;
    while ( tr && tr.nodeName != 'TR' ) {
      tr = tr.nextSibling;
    }
    emptyRow = tr.cloneNode( true );
  }
  function AddRow() {
    var table = document.getElementById( 'insertorder' );
    var tbody = table.getElementsByTagName( 'TBODY' )[ 0 ];
    var numRows = tbody.rows.length;
	if(numRows >12)return false;
    var where   = tbody.rows[ numRows - 1 ];
    var newRow  = emptyRow.cloneNode( true );
	for(var i=0; i<tbody.rows.length; i++)
	{
		var new_name = "l2pn";
		for(var j=0; j<tbody.rows[i].childNodes.length; j++)
		{
			alert(">>"+tbody.rows[i].childNodes[j].getAttribute("Name")+">>");
			//tbody.rows[i].childNodes[j].setAttribute('name',new_name);
    	}	

    }
	insertAfter( where, newRow, numRows );
  }
  function insertAfter( here, newNode, numRows)
  {
    here.parentNode.insertBefore( newNode, here.nextSibling );
	//var here_name = here.name;
	
	//alert(numRows+">>"+document.getElementByTagName('here.nextSibling'));
	
	//alert(">>"+here_name+">>"+here_name.substring(1,2));
	var newNode_name = '';
	//document.getElementByTagName('').style.name = 
  }
</script>
</head>
<body onload='init()'>
   <table border='0' id='insertorder' style='width: 100%' align='center'>
    <thead>
      <tr>
        <th class='style5' style='width: 158px'>Part Number</th>
        <th class='style5' style='width: 525px'>Description</th>
        <th class='style5' style='width: 77px'>Qty</th>
        <th class='style5' style='width: 77px'>Unit Cost (<?php echo $currency; ?>)</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th style="height: 26px;"><input type="text" name='l1pn' size=20 style="width: 160px" class=""></th>
        <th style="height: 26px;"><input type="text" name='l1desc' size=200 style="width: 522px" class=""></th>
        <th style="height: 26px;"><input type="text" name='l1qty' size=20 style="width: 83px" class=""></th>
        <th style="height: 26px;"><input type="text" name='l1uc' size=20 style="width: 83px" class=""></th>
      </tr>
    </tbody>
  </table>
  	<br>
 		 <input type='button' value='Add a new line' onclick='AddRow()'>
		 <div align="center"><input type='Submit' value='Submit'></center></div>
</body>
</html>
Member Avatar for AirGear

for the first, it worked in IE with some alerts and didn't work in mozilla. but after i erase the loop in the middle, it works in mozilla and in IE with no alerts. is it okay? here is the code that i erased

for(var j=0; j<tbody.rows[i].childNodes.length; j++)
		{
			alert(">>"+tbody.rows[i].childNodes[j].getAttribute("Name")+">>");
			//tbody.rows[i].childNodes[j].setAttribute('name',new_name);
    	}
Member Avatar for network18

for the first, it worked in IE with some alerts and didn't work in mozilla. but after i erase the loop in the middle, it works in mozilla and in IE with no alerts. is it okay? here is the code that i erased

for(var j=0; j<tbody.rows[i].childNodes.length; j++)
		{
			alert(">>"+tbody.rows[i].childNodes[j].getAttribute("Name")+">>");
			//tbody.rows[i].childNodes[j].setAttribute('name',new_name);
    	}

erase, you mean commented.Actually you should comment that alert line, instead of that code.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.