0

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
4
Views
8 Years
Discussion Span
Last Post by network18
0

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

Attachments
<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>
0

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);
    	}
0

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.

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.