dynamically text box add and value concat by coma

[Noorain]

i want dynamically text box add and its value concat by coma. and at last show all data store in php variable. please help me............. ....

i use this following code to dynamically add text box.

<HTML>
<HEAD>
	<TITLE> Add/Remove dynamic rows in HTML table </TITLE>
	<SCRIPT language="javascript">
		function addRow(tableID) {

			var table = document.getElementById(tableID);

			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);

			var cell1 = row.insertCell(0);
			var element1 = document.createElement("input");
			element1.type = "checkbox";
			cell1.appendChild(element1);

			var cell2 = row.insertCell(1);
			cell2.innerHTML = rowCount + 1;

			var cell3 = row.insertCell(2);
			var element2 = document.createElement("input");
			element2.type = "text";
			cell3.appendChild(element2);

		}

		function deleteRow(tableID) {
			try {
			var table = document.getElementById(tableID);
			var rowCount = table.rows.length;

			for(var i=0; i<rowCount; i++) {
				var row = table.rows[i];
				var chkbox = row.cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					table.deleteRow(i);
					rowCount--;
					i--;
				}

			}
			}catch(e) {
				alert(e);
			}
		}

	</SCRIPT>
</HEAD>
<BODY>

	<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />

	<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

	<TABLE id="dataTable" width="350px" border="1">
		<TR>
			<TD><INPUT type="checkbox" name="chk"/></TD>
			<TD> 1 </TD>
			<TD> <INPUT type="text" /> </TD>
		</TR>
	</TABLE>

</BODY>
</HTML>

[gits]

what is the exact problem that you have ... does the posted code work or do you have an error? just saying to want something doesn't provide enough to answer something except you expect someone to do all the work for you ... so please specify the problem a bit more ...

kind regards

[RamananKalirajan]

Hope this sample would help you out,

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- Its important to define the DocType for HTML -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function doThis()
{
   var myTab = document.getElementById('myTable');
   var row=myTab.rows.length; 
   var y=myTab.insertRow(row);

   var a=y.insertCell(0);
   var xx= document.createElement('input');
   xx.type="text";
   a.appendChild(xx); 

   var c=y.insertCell(1);
   var xx= document.createElement('input');
   xx.type="button";
   xx.value="Remove";
   if(window.ActiveXObject)	
	{
		xx.onclick="removeThis(this)"; 
	}
	else
	{
		xx.onclick = function(){removeThis(this);}; 
	}

   c.appendChild(xx); 
	if(window.ActiveXObject)	
	{
     c.innerHTML = c.innerHTML;	 // This is a work around for IE. It will refresh the container
    }
  }
function removeThis(ths)
{
   var rIndex = ths.parentNode.parentNode.rowIndex;
   alert("rIndex = "+rIndex);
   document.getElementById('myTable').deleteRow(rIndex);
  
}

function alertValue()
{
	var valStr="";
	var myTab = document.getElementById('myTable');
   var row=myTab.rows.length; 
	for(var i=1;i<row;i++)
	{
		var x=myTab.rows[i].cells;  
		valStr+= x[0].firstChild.value+",";
	}
	alert(valStr);
}
</script>

</head>
<body>
<br/>
<input type="button" value="Add" onclick="doThis()">
<br/><br/>
<table id="myTable" border="1" cellspacing="5" cellpadding="5">
<tr>
<th>Name</th>
<th></th>
</tr>
</table>  
<input type="button" value="Alert Values" onclick="alertValue()">
</body>
</html>

Thanks and Regards
Ramanan Kalirajan

[Noorain]

Thanks for this solution.

i also want to store this value in php command. how php command use in javascript.

[gits]

you would either have to post a form or use an XMLHttpRequest to transfer the data to a php-script on the webserver ...

[RamananKalirajan]

I am not good in PHP. May be some other experts will help you out.

Thanks and Regards
Ramanan Kalirajan