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

Need a delete row function with Checkbox for dynamic form --DOM

P: 10
Expand|Select|Wrap|Line Numbers
  1.  <script type="text/javascript">
  2. 2.        var counter = 1;
  3. 3.        var limit = 6;
  4. 4.        function addTextArea() {
  5. 5.         if (counter == limit-1) {
  6. 6.         alert("Maximum limit " + counter + " sorry");
  7. 7.         return false;
  8. 8.         }
  9. 9.         else {
  10. 10.         <!-- CAUTION THIS IS BACKWARDS. -->
  11. 11.
  12. 12.         var newdiv = document.createElement('div');
  13. 13.         newdiv.innerHTML = "" + (counter + 1) + " <br><textarea name='fav_det[]' id=counter rows='3' cols='20'>";
  14. 14.         document.getElementById('div6').appendChild(newdiv);
  15. 15.
  16. 16.         var newdiv = document.createElement('div');
  17. 17.         newdiv.innerHTML = "" + (counter + 1) + " <br><textarea name='fav_col' id=counter rows='3' cols='20'>";
  18. 18.         document.getElementById('div5').appendChild(newdiv);
  19. 19.
  20. 20.         var newdiv = document.createElement('div');
  21. 21.         newdiv.innerHTML = "" + (counter + 1) + " <br><textarea name='fav_mod[]' id=counter rows='3' cols='20'>";
  22. 22.         document.getElementById('div4').appendChild(newdiv);
  23. 23.
  24. 24.         var newdiv = document.createElement('div');
  25. 25.         newdiv.innerHTML = " " + (counter + 1) + " <br><input type='text' name='truck[]' id=counter>";
  26. 26.         document.getElementById('div3').appendChild(newdiv);
  27. 27.
  28. 28.         var newdiv = document.createElement('div');
  29. 29.         newdiv.innerHTML = " " + (counter + 1) + " <br><input type='text' name='car[]' id=counter>";
  30. 30.         document.getElementById('div2').appendChild(newdiv);
  31. 31.
  32. 32.         var newdiv = document.createElement('div');
  33. 33.         newdiv.innerHTML = "" + (counter + 1) + " <br><input type='checkbox' name='chk[]' id=counter>";
  34. 34.         document.getElementById('div1').appendChild(newdiv);
  35. 35.
  36. 36.         counter++
  37. 37.         return true;
  38. 38.         }
  39. 39.        }
  40. 40.        </script>
  41. 41.
  42. 42.
  43. 43.        <script type="text/javascript">
  44. 44.        function  deleteRowS(dataTable) {
  45. 45.            for (var rowi= table.rows.length; rowi-->0;) {
  46. 46.                var row= table.rows[rowi];
  47. 47.                var inputs= row.getElementsByTagName('dataTable');
  48. 48.                for (var inputi= inputs.length; inputi-->0;) {
  49. 49.                    var input= inputs[inputi];
  50. 50.
  51. 51.                    if (input.type==='checkbox' && input.checked) {
  52. 52.                        row.parentNode.removeChild(row);
  53. 53.                        break;
  54. 54.                    }
  55. 55.                }
  56. 56.            }
  57. 57.        }
  58. 58.        </script>   
  59. 59.
  60. 60.
  61. 61.
  62. 62.        <script type="text/javascript">
  63. 63.        function deleteRow()  {
  64. 64.                var table = document.getElementById(tableID).tBodies[0];
  65. 65.                var rowCount = table.rows.length;
  66. 66.
  67. 67.                // var i=1 to start after header
  68. 68.                for(var i=1; i<rowCount; i++) {
  69. 69.                    var row = table.rows[i];
  70. 70.                    // index of td contain checkbox is 8
  71. 71.                    var chkbox = row.cells[6].getElementsByTagName('input')[0];
  72. 72.                    if('checkbox' == chkbox.type && true == chkbox.checked) {
  73. 73.                        table.deleteRow(i);
  74. 74.                     }
  75. 75.                }
  76. 76.        }</script>
  77. 77.
  78. 78.        </head>
  79. 79.        <table>
  80. 80.        <tr><td valign='top'><b>NEED DELETE ROW WITH CHECKBOX FUNCTION:</td></tr>
  81. 81.        </table>
  82. 82.        <table id="dataTable" width="auto" style="margin:-4px 0 0 0; padding:14px 0 0 0;" cellspacing="10px"><tbody id="dataTable"></tbody>
  83. 83.        <tr>
  84. 84.        <td valign='Top'>
  85. 85.        &#x2717;
  86. 86.        <div id="div1">
  87. 87.        <input type="checkbox" name="chk[]" autocomplete="off" id="1" >
  88. 88.        </div>
  89. 89.        </td>
  90. 90.
  91. 91.        <td valign='Top'>
  92. 92.        cars
  93. 93.        <div id="div2">
  94. 94.        <input type="text" name="car[]" id="2" >
  95. 95.        </div>
  96. 96.        </td>
  97. 97.
  98. 98.        <td valign='Top'>
  99. 99.        trucks
  100. 100.        <div id="div3">
  101. 101.        <input type="text" name="truck[]" id="3" >
  102. 102.        </div>
  103. 103.        </td>
  104. 104.
  105. 105.        <td valign='Top'>
  106. 106.        your favorite model
  107. 107.        <div id="div4">
  108. 108.        <textarea name="mod[]" id="4" rows="3" cols="20"></textarea>
  109. 109.        </div>
  110. 110.        <br><br>
  111. 111.        </td>
  112. 112.
  113. 113.        <td valign='Top'>
  114. 114.        your favorite add-ons 
  115. 115.        <div id="div5">
  116. 116.        <textarea name="fav_col" id="5" rows="3" cols="20"></textarea> 
  117. 117.        </div>
  118. 118.        </td>
  119. 119.
  120. 120.        <td valign='Top'>
  121. 121.        explain vehicle overall
  122. 122.        <div id="div6">
  123. 123.        <textarea name="fav_det" id="6" rows="3" cols="20"></textarea> 
  124. 124.        </div>
  125. 125.        </td>
  126. 126.        </tr>
  127. 127.        </table>
  128. 128.        <input type="button" value="Add another" onClick="addTextArea();" />&nbsp;
  129. 129.        <input type="button" value="Delete row" onclick="deleteRow('dataTable');deleteRowS('dataTable')" />
  130.  
Aug 16 '14 #1
Share this Question
Share on Google+
13 Replies


Exequiel
100+
P: 287
You can use my code for deleting a row element in a table, I created this for you. just observed the codes and run it. you can customize it to the fields you want, your way in creating an element is not ok for me, its difficult to delete your elements,,you didnot set a unique id or class or name to your newly created element. :D
Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <title>Zick Sample</title>
  7.  
  8. <script type="text/javascript">
  9. var counter     =     1;
  10. var collector     =     "";
  11.  
  12. function addfields(indx)
  13. {
  14.     var tbl = document.getElementById('table_id');
  15.     var newtr = document.createElement('tr');
  16.     counter = counter + indx;
  17.  
  18.     //adding of elements
  19.     //please put a unique id or class or name to newly created elements.
  20.  
  21.     newtr.setAttribute('id','tr'+counter);//put the new tr element an id
  22.  
  23.     newtr.innerHTML = '<td><input type="checkbox" name="checkb'+counter+'" id="checkb'+counter+'" value="'+counter+'" onclick="checkme('+counter+')"></td><td><input type="text" name="text'+counter+'"></td><td><textarea name="textarea'+counter+'"></textarea></td>';
  24.  
  25.     tbl.appendChild(newtr);//display the newly element to parent element which is the table table_id
  26. }
  27.  
  28. function checkme(dx)
  29. {
  30.     //collect the checked elements data
  31.      collector += dx+",";
  32. }
  33.  
  34. function deletetherow(indx)
  35. {
  36.     var col = collector.split(",");//split the checked elements data
  37.  
  38.     for (var i = 0; i < col.length; i++) 
  39.     {
  40.         var remvelem = document.getElementById('tr'+col[i]);//the element to remove
  41.         var chckbx = document.getElementById("checkb"+col[i]);
  42.  
  43.         // if the element is exist with a checked checkbox the delete the row
  44.         if(remvelem && chckbx.checked)
  45.         {
  46.             var tbl = document.getElementById('table_id');
  47.             tbl.removeChild(remvelem);
  48.         }
  49.     }
  50. }
  51. </script>
  52.  
  53. </head>
  54.  
  55. <body>
  56.  
  57. <table id="table_id">
  58.     <tr id="tr1" class="trmain">
  59.         <td>
  60.  
  61.         </td>
  62.         <td>
  63.             <input type="text" name="text1">
  64.         </td>
  65.         <td>
  66.             <textarea name="textarea1"></textarea>
  67.         </td>  
  68.     </tr>
  69. </table>
  70. <input type="button" value="Add another" onClick="addfields(1);" />&nbsp;
  71. <input type="button" value="Delete row" onclick="deletetherow()" />
  72.  
  73. </body>
  74. </html>
  75.  
  76.  
  77.  
I hope it helps. :D
Aug 17 '14 #2

P: 10
Yes, this helps, thank you. However my only problem now is setting variable limit. Let's say I only want to let a user add three rows max var limit = 3;in this instance with a function I am unable to get it to work, Can you assist with this? I am trying all my methods, but the add function will not work as above the user should be alerted if records all can't be deleted and only max 3. By the way, the checkbox only starts appearing after the first row, but that seems fine being they all can't be deleted anyway.
Aug 17 '14 #3

Exequiel
100+
P: 287
change the addfields() function with this. and put a variable var limit = 5;

Expand|Select|Wrap|Line Numbers
  1. var limit = 5;
  2.  
  3. function addfields(indx)
  4. {
  5.     var tbl = document.getElementById('table_id');
  6.     var newtr = document.createElement('tr');
  7.     counter = counter + indx;
  8.  
  9.     //adding of elements
  10.     //please put a unique id or class or name to newly created elements.
  11.  
  12.     if(tbl.getElementsByTagName("tr").length < limit)
  13.     {
  14.         newtr.setAttribute('id','tr'+counter);//put the new tr element an id
  15.  
  16.         newtr.innerHTML = '<td><input type="checkbox" name="checkb'+counter+'" id="checkb'+counter+'" value="'+counter+'" onclick="checkme('+counter+')"></td><td><input type="text" name="text'+counter+'"></td><td><textarea name="textarea'+counter+'"></textarea></td>';
  17.  
  18.         tbl.appendChild(newtr);//display the newly element to parent element which is the table table_id
  19.     }
  20.     else
  21.     {
  22.         alert("You reach the limit to add fields.");    
  23.     }
  24. }
  25.  
Aug 17 '14 #4

Exequiel
100+
P: 287
in here we count the length of tr inside the table and compare it in our limit variable by the use of this if statement if(tbl.getElementsByTagName("tr").length < limit)
Aug 17 '14 #5

P: 10
I have implemented the limit, works and thanks. On to the next issue. I have a select menu and can't get that to work. I tried to create a function inside the add but it didn't work, I tried to add the <select name="theselectmenuname'+counter+'"></select></td> in various fashions and a div and without a div as innerhtml. It will populate but nothing in the dropdown however from what I am reading I need to use innerText but not able to get that working within same function :(

UPDATE ON ABOVE
It does seem to work when I create it inside a form and thus the drop down menu in the form with <select name="theselectmenuname'+counter+'"><option value="one">one</option>option value="two">two</option></select></td> in the js tr ....I have read more and more, a little confused as there is problem with memory leakage or such for this and innerhtml and I test in IE seems ok so far there where people were complaining of. So, any limitations to this if you are aware, I am using php to handle the script. Thank you for all your help so far!
Aug 17 '14 #6

Exequiel
100+
P: 287
add this td code in your addfields function in thenewtr.innerHTML
Expand|Select|Wrap|Line Numbers
  1. <td><select id="theselectmenuname'+counter+'" name="theselectmenuname'+counter+'"></select></td>
then put this inside your if statement after the line for tbl.appendChild(newtr);//display the newly element to parent element which is the table table_id

Expand|Select|Wrap|Line Numbers
  1. addOption_list('theselectmenuname'+counter);
and finaly copy paste this to your javascript file
Expand|Select|Wrap|Line Numbers
  1. //adding of options in select tag
  2. function addOption_list(thename)
  3. {
  4.     var optval = new Array("Select","One","Two","Three");
  5.     var selbx = document.getElementById(thename);
  6.  
  7.     for (var i=0; i < optval.length; ++i)
  8.     {
  9.         addOption(selbx, optval[i], optval[i]);
  10.         selbx.options[i];
  11.     }
  12. }
  13.  
  14. function addOption(selectbox,text,value)
  15. {
  16.     var optn = document.createElement("OPTION");
  17.     optn.text = text;
  18.     optn.value = value;
  19.     selectbox.appendChild(optn);
  20. }
  21.  
  22.  
this is the code for adding select with option value in your row.
Aug 18 '14 #7

Exequiel
100+
P: 287
i hope it solved your problem now.
Aug 18 '14 #8

P: 10
I have played around with your code, seems good. I will have to elaborate more and get back to you if any other issues arise. I give you a BIG THANK YOU for your help. I have been working on such for a long time, I first started with nodes using switch statement and create the case with a newcell. Can you please explain why textarea does not work for this, or does it? I sure could never get it to work as my reading states back w3 html textarea not valid markup when created. Or retracting, it did populate but the data would just copy from the first cell regardless if it was cleared function. You seem very knowledgeable, so I ask you out of all my frustration that question.
Aug 18 '14 #9

P: 10
Hi, we'll working with your code last couple days, so now have been working on error function with this and nothing seems to work. Basically, as your aware I am using php within this. So, when user hits submit button and there are errors, the user data should still be in the fields if there is an error and the message or highlight appear over the field, all that happens well but only the form first row in the table and none of the dynamic rows. Now, I have used
Expand|Select|Wrap|Line Numbers
  1. <input type="text" name="something" value="<?php if(isset($_POST['something'])) echo $_POST['something']; ?>" > 
as an example, as this is usually how I hold the data, but of course this works in the form on submit but I am not able to add this to the javascript
Expand|Select|Wrap|Line Numbers
  1. if(tbl.getElementsByTagName("tr").length < limit)
  2.      {
  3. newtr.setAttribute('id','tr'+counter);//put the new tr element an id
  4. newtr.innerHTML = '<td><input type .......
as the php does not work within and I can't get any function to work as should be required. It is in the form element all fields are array, so the prior becomes,
Expand|Select|Wrap|Line Numbers
  1. <input type="text" name="something[]" value="<?php if(isset($_POST['something[]'])) echo $_POST['something[]']; ?>" >
and when applied to the above statement the js it just prints Array in the field. The only work around I could find was using HTML5 required, which was tricky with the code from last time, but I got it to work. However required does not work with Safari damnit so now if you will provide a way to make the php into the js for error notice in dynamic part of form a (which I prefer since server side) or if not javascript to do this. There is a Jquery build for this I found, but thee info is so very limited and I couldn't make sense of it and really curious why was not expanded more by their tema, I couldn't find further help.
Aug 21 '14 #10

Dormilich
Expert Mod 5K+
P: 8,639
and when applied to the above statement the js it just prints Array in the field
of course. you cannot sensibly print an array with echo.
Aug 22 '14 #11

P: 10
print_r and sorry for confusion as what I mean.
Aug 23 '14 #12

Dormilich
Expert Mod 5K+
P: 8,639
while you can use print_r() to display an array, does it make sense to display the whole array structure in a single input field?
Aug 23 '14 #13

P: 10
This is not the case at all. I am not sure if you understand the thread topic here sir/madam? This is about a dynamically generated field error check with js/php. You make no revelation to the core issue here. So, I need the js to error or is there a way to make php do this? As I surely cannot find a way. As far as html5 the required does work for al fields and there is workaround markup for cross browser support I added. So, now I just add an error check if empty and echo and kill script.

Secondly, I can not get an array [i] from the fields to post as an array. I have the js create each field as
Expand|Select|Wrap|Line Numbers
  1. name="textarea1[]'+counter+'"
as the same in the html for example..
Expand|Select|Wrap|Line Numbers
  1. <input type="text" name="text2[]"
I can not get the array to post, it will only process and post the first form value not the other multi array of how many fields I add.
Aug 23 '14 #14

Post your reply

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