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

[CRAYON34]

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

[Exequiel]

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

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Zick Sample</title>
 
<script type="text/javascript">
var counter     =     1;
var collector     =     "";
 
function addfields(indx)
{
    var tbl = document.getElementById('table_id');
    var newtr = document.createElement('tr');
    counter = counter + indx;
 
    //adding of elements
    //please put a unique id or class or name to newly created elements.
 
    newtr.setAttribute('id','tr'+counter);//put the new tr element an id
 
    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>';
 
    tbl.appendChild(newtr);//display the newly element to parent element which is the table table_id
}
 
function checkme(dx)
{
    //collect the checked elements data
     collector += dx+",";
}
 
function deletetherow(indx)
{
    var col = collector.split(",");//split the checked elements data
 
    for (var i = 0; i < col.length; i++) 
    {
        var remvelem = document.getElementById('tr'+col[i]);//the element to remove
        var chckbx = document.getElementById("checkb"+col[i]);
 
        // if the element is exist with a checked checkbox the delete the row
        if(remvelem && chckbx.checked)
        {
            var tbl = document.getElementById('table_id');
            tbl.removeChild(remvelem);
        }
    }
}
</script>
 
</head>
 
<body>
 
<table id="table_id">
    <tr id="tr1" class="trmain">
        <td>
 
        </td>
        <td>
            <input type="text" name="text1">
        </td>
        <td>
            <textarea name="textarea1"></textarea>
        </td>  
    </tr>
</table>
<input type="button" value="Add another" onClick="addfields(1);" />&nbsp;
<input type="button" value="Delete row" onclick="deletetherow()" />
 
</body>
</html>
 
 
 

I hope it helps. :D

[CRAYON34]

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.

[Exequiel]

change the addfields() function with this. and put a variable var limit = 5;

var limit = 5;
 
function addfields(indx)
{
    var tbl = document.getElementById('table_id');
    var newtr = document.createElement('tr');
    counter = counter + indx;
 
    //adding of elements
    //please put a unique id or class or name to newly created elements.
 
    if(tbl.getElementsByTagName("tr").length < limit)
    {
        newtr.setAttribute('id','tr'+counter);//put the new tr element an id
 
        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>';
 
        tbl.appendChild(newtr);//display the newly element to parent element which is the table table_id
    }
    else
    {
        alert("You reach the limit to add fields.");    
    }
}
 

[Exequiel]

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)

[CRAYON34]

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!

[Exequiel]

add this td code in your addfields function in thenewtr.innerHTML

<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

addOption_list('theselectmenuname'+counter);

and finaly copy paste this to your javascript file

//adding of options in select tag
function addOption_list(thename)
{
    var optval = new Array("Select","One","Two","Three");
    var selbx = document.getElementById(thename);
 
    for (var i=0; i < optval.length; ++i)
    {
        addOption(selbx, optval[i], optval[i]);
        selbx.options[i];
    }
}
 
function addOption(selectbox,text,value)
{
    var optn = document.createElement("OPTION");
    optn.text = text;
    optn.value = value;
    selectbox.appendChild(optn);
}
 
 

this is the code for adding select with option value in your row.

[Exequiel]

i hope it solved your problem now.

[CRAYON34]

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.

[CRAYON34]

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

<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

if(tbl.getElementsByTagName("tr").length < limit)
     {
newtr.setAttribute('id','tr'+counter);//put the new tr element an id
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,

<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.

[Dormilich]

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.

[CRAYON34]

print_r and sorry for confusion as what I mean.

[Dormilich]

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?

[CRAYON34]

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

name="textarea1[]'+counter+'"

as the same in the html for example..

<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.