By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,654 Members | 1,513 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,654 IT Pros & Developers. It's quick & easy.

dynamically text box add and value concat by coma

P: 57
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.

Expand|Select|Wrap|Line Numbers
  1. <HTML>
  2. <HEAD>
  3.     <TITLE> Add/Remove dynamic rows in HTML table </TITLE>
  4.     <SCRIPT language="javascript">
  5.         function addRow(tableID) {
  6.  
  7.             var table = document.getElementById(tableID);
  8.  
  9.             var rowCount = table.rows.length;
  10.             var row = table.insertRow(rowCount);
  11.  
  12.             var cell1 = row.insertCell(0);
  13.             var element1 = document.createElement("input");
  14.             element1.type = "checkbox";
  15.             cell1.appendChild(element1);
  16.  
  17.             var cell2 = row.insertCell(1);
  18.             cell2.innerHTML = rowCount + 1;
  19.  
  20.             var cell3 = row.insertCell(2);
  21.             var element2 = document.createElement("input");
  22.             element2.type = "text";
  23.             cell3.appendChild(element2);
  24.  
  25.         }
  26.  
  27.         function deleteRow(tableID) {
  28.             try {
  29.             var table = document.getElementById(tableID);
  30.             var rowCount = table.rows.length;
  31.  
  32.             for(var i=0; i<rowCount; i++) {
  33.                 var row = table.rows[i];
  34.                 var chkbox = row.cells[0].childNodes[0];
  35.                 if(null != chkbox && true == chkbox.checked) {
  36.                     table.deleteRow(i);
  37.                     rowCount--;
  38.                     i--;
  39.                 }
  40.  
  41.             }
  42.             }catch(e) {
  43.                 alert(e);
  44.             }
  45.         }
  46.  
  47.     </SCRIPT>
  48. </HEAD>
  49. <BODY>
  50.  
  51.     <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
  52.  
  53.     <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
  54.  
  55.     <TABLE id="dataTable" width="350px" border="1">
  56.         <TR>
  57.             <TD><INPUT type="checkbox" name="chk"/></TD>
  58.             <TD> 1 </TD>
  59.             <TD> <INPUT type="text" /> </TD>
  60.         </TR>
  61.     </TABLE>
  62.  
  63. </BODY>
  64. </HTML>
  65.  
  66.  
Mar 9 '10 #1
Share this Question
Share on Google+
5 Replies


gits
Expert Mod 5K+
P: 5,390
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
Mar 9 '10 #2

RamananKalirajan
100+
P: 607
Hope this sample would help you out,

Expand|Select|Wrap|Line Numbers
  1. <!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 -->
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <script type="text/javascript">
  5. function doThis()
  6. {
  7.    var myTab = document.getElementById('myTable');
  8.    var row=myTab.rows.length; 
  9.    var y=myTab.insertRow(row);
  10.  
  11.    var a=y.insertCell(0);
  12.    var xx= document.createElement('input');
  13.    xx.type="text";
  14.    a.appendChild(xx); 
  15.  
  16.    var c=y.insertCell(1);
  17.    var xx= document.createElement('input');
  18.    xx.type="button";
  19.    xx.value="Remove";
  20.    if(window.ActiveXObject)    
  21.     {
  22.         xx.onclick="removeThis(this)"; 
  23.     }
  24.     else
  25.     {
  26.         xx.onclick = function(){removeThis(this);}; 
  27.     }
  28.  
  29.    c.appendChild(xx); 
  30.     if(window.ActiveXObject)    
  31.     {
  32.      c.innerHTML = c.innerHTML;     // This is a work around for IE. It will refresh the container
  33.     }
  34.   }
  35. function removeThis(ths)
  36. {
  37.    var rIndex = ths.parentNode.parentNode.rowIndex;
  38.    alert("rIndex = "+rIndex);
  39.    document.getElementById('myTable').deleteRow(rIndex);
  40.  
  41. }
  42.  
  43. function alertValue()
  44. {
  45.     var valStr="";
  46.     var myTab = document.getElementById('myTable');
  47.    var row=myTab.rows.length; 
  48.     for(var i=1;i<row;i++)
  49.     {
  50.         var x=myTab.rows[i].cells;  
  51.         valStr+= x[0].firstChild.value+",";
  52.     }
  53.     alert(valStr);
  54. }
  55. </script>
  56.  
  57. </head>
  58. <body>
  59. <br/>
  60. <input type="button" value="Add" onclick="doThis()">
  61. <br/><br/>
  62. <table id="myTable" border="1" cellspacing="5" cellpadding="5">
  63. <tr>
  64. <th>Name</th>
  65. <th></th>
  66. </tr>
  67. </table>  
  68. <input type="button" value="Alert Values" onclick="alertValue()">
  69. </body>
  70. </html>
Thanks and Regards
Ramanan Kalirajan
Mar 9 '10 #3

P: 57
Thanks for this solution.

i also want to store this value in php command. how php command use in javascript.
Mar 10 '10 #4

gits
Expert Mod 5K+
P: 5,390
you would either have to post a form or use an XMLHttpRequest to transfer the data to a php-script on the webserver ...
Mar 10 '10 #5

RamananKalirajan
100+
P: 607
I am not good in PHP. May be some other experts will help you out.

Thanks and Regards
Ramanan Kalirajan
Mar 10 '10 #6

Post your reply

Sign in to post your reply or Sign up for a free account.