dynamic form control

I have the below at the moment.
However, I am meeting some problems here.
1. When you click "Add Dependent" button, I am having problems displaying "Dependent 1", "Dependent 2", and so on incrementally. How to do that?

2. At the moment, I have a DEL button beside each controls. However, I wish to have only 1 DEL button for each set (1 span + 3 textboxes). Upon clicking on DEL, it should remove that set.

----------------------

<html>

<head>

<script language="JavaScript">
<!--
rowNum = 1;
function AddDependentRows(num)
{
      tBody = document.getElementById("dynTab").firstChild;
      
      for ( i=1; i<=num; i++ )
      {
            newRow = tBody.rows[i].cloneNode(true);
            
            newRow.style.display="block";
            rowNum++;
            tBody.appendChild(newRow);
      }

      for ( i=0;i<newRow.cells.length;i++ )
      {      
            cellText = newRow.cells[i].innerHTML;
            
            newRow.cells[i].innerHTML = cellText.replace(/(name=\"?\w+)\d+(\"?)/gi,"$1"+rowNum+"$2");
      }
}


function delRow(theButton)
{
      theRow = theButton.parentNode.parentNode;
      if ( theRow.parentNode.rows.length > 2 )
      {
            theRow.removeNode(true);
      }
}
//-->
</script>

</head>

<body>

<table id="dynTab" cellpadding="2" cellspacing="2" border="0" width="70%">
<tr>
      <th width="36%">&nbsp;</th>
      <th align="left">
            <input type="button" class="mybtn" value="Add Dependent" onClick="AddDependentRows(4)" />
      </th>
</tr>
<!-- BEGIN DYNAMIC ROWS -->
<tr style="display:none">
      <td align="left" colspan="2">
            <span id="dependent">Dependent 1</span>
      </td>
</tr>
<tr style="display:none">
      <td align="right">
            <span style="font-size:10px;color:ff0000">*</span>
            <span class="mytag">Name:</span>
      </td>
      <td valign="middle">
            <input type="text" name="txtdependent_name" class="input_text">
            <input type="button" value="DEL" onClick="delRow(this)" class="mybtn">
      </td>
</tr>
<tr style="display:none">
      <td align="right">
            <span style="font-size:10px;color:ff0000">*</span>
            <span class="mytag">Relationship:</span>
      </td>
      <td valign="middle">
            <input type="text" name="txtrelationship" class="input_text">
            <input type="button" value="DEL" onClick="delRow(this)" class="mybtn">
      </td>
</tr>
<tr style="display:none">
      <td align="right">
            <span style="font-size:10px;color:ff0000">*</span>
            <span class="mytag">Yrs to Support:</span>
      </td>
      <td valign="middle">
            <input type="text" name="txtyears_to_support" class="input_text">
            <input type="button" value="DEL" onClick="delRow(this)" class="mybtn">
      </td>
</tr>
<!-- END DYNAMIC ROWS -->
</table>

</body>

</html>


Please help me. Thanks in advance.
ansi_cAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

bga6418Commented:
Hi,
Try the code below. PLease note that your code ionly works on IE.

<html>
<head>

<script language="JavaScript">
<!--
rowNum = 1;
function AddDependentRows(num)
{
     tBody = document.getElementById("dynTab").firstChild;
     newRow = tBody.rows[1].cloneNode(true);
         
     newRow.style.display="block";
     rowNum++;
     tBody.appendChild(newRow);

     for ( i=0;i<newRow.cells.length;i++ )
     {    
          cellText = newRow.cells[i].innerHTML;
          newRow.cells[i].innerHTML =       cellText.replace(/(name=\"?\w+)\d+(\"?)/gi,"$1"+rowNum+"$2");
     }
}

function delRow(theButton)
{
     theRow = theButton.parentNode.parentNode;
     if ( theRow.parentNode.rows.length > 2 )
          theRow.removeNode(true);
}
//-->
</script>
</head>

<body>

<table id="dynTab" cellpadding="2" cellspacing="2" border="0" width="70%">
<tr>
     <th align="center">
          <input type="button" class="mybtn" value="Add Dependent" onClick="AddDependentRows(4)" />
     </th>
</tr>
<!-- BEGIN DYNAMIC ROWS -->
<tr style="display:none">
  <td>
    <span id="dependent">Dependent 1</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <input type="button" value="DEL" onClick="delRow(this)" class="mybtn"><br>
    <table width="100%">
       <tr>
         <td align="right" width="36%">
            <span style="font-size:10px;color:ff0000">*</span>
            <span class="mytag">Name:</span>
         </td>
         <td valign="middle">
            <input type="text" name="txtdependent_name" class="input_text">
         </td>
       </tr>
       <tr>
         <td align="right" width="36%">
            <span style="font-size:10px;color:ff0000">*</span>
            <span class="mytag">Relationship:</span>
         </td>
         <td valign="middle">
            <input type="text" name="txtrelationship" class="input_text">
         </td>
       </tr>
       <tr>
         <td align="right" width="36%">
            <span style="font-size:10px;color:ff0000">*</span>
            <span class="mytag">Yrs to Support:</span>
         </td>
         <td valign="middle">
            <input type="text" name="txtyears_to_support" class="input_text">
         </td>
       </tr>
     </table>
   </td>
</tr>
<!-- END DYNAMIC ROWS -->
</table>

</body>
</htm>
ansi_cAuthor Commented:
What about this?
1. When you click "Add Dependent" button, I am having problems displaying "Dependent 1", "Dependent 2", and so on incrementally. How to do that?


Also how to make it work on non IE browsers too?
avidyaCommented:
Hi,  

The code works for IE and FF
It generates unique fieldnames, which you need to read the values. You can check by clicking on the fields. Afterwards you can delete this code "onclick='alert(this.name);' "
It's just there for displaying the fieldnames.

and it increments the "Dependent " 

===================================
<html>
<head>
 <title></title>
 <script language="javascript">
  var MaHi_tot = 0;
  function MaHi_Create_Table()
  {
   MaHi_tot = MaHi_tot + 1;
   var MaHi_body=document.getElementsByTagName("body").item(0);
   //create table
   MaHi_table = document.createElement("TABLE");
   MaHi_tablebody = document.createElement("TBODY");
   //create row 1
   MaHi_row=document.createElement("TR");
   //create row 1, cell 1, colspan = 2
   MaHi_cell=document.createElement("TD");
   MaHi_cell.setAttribute("colspan","2");
   MaHi_text=document.createTextNode("Dependent " + MaHi_tot);
   MaHi_cell.appendChild(MaHi_text);
   MaHi_row.appendChild(MaHi_cell);
   MaHi_tablebody.appendChild(MaHi_row);
   //create row 2
   MaHi_row=document.createElement("TR");
   //create row 2, cell 1, align = right
   MaHi_cell=document.createElement("TD");
   MaHi_cell.innerHTML = "<font color='#FF0000'>*</font>Name:";
   MaHi_row.appendChild(MaHi_cell);
   MaHi_cell.setAttribute("align","right");
   //create row 2, cell2
   MaHi_cell=document.createElement("TD");
   MaHi_cell.innerHTML = "<input type='text' onclick='alert(this.name);' name='txtdependent_name_" + MaHi_tot +"' class='input_text'>";
   MaHi_row.appendChild(MaHi_cell);
   MaHi_tablebody.appendChild(MaHi_row);
   //create row 3
   MaHi_row=document.createElement("TR");
   //create row 3, cell 1, align = right
   MaHi_cell=document.createElement("TD");
   MaHi_cell.innerHTML = "<font color='#FF0000'>*</font>Relationship:";
   MaHi_row.appendChild(MaHi_cell);
   MaHi_cell.setAttribute("align","right");
   //create create row 3, cell 2
   MaHi_cell=document.createElement("TD");
   MaHi_cell.innerHTML = "<input type='text' onclick='alert(this.name);' name='txtrelationship_" + MaHi_tot +"' class='input_text'>";
   MaHi_row.appendChild(MaHi_cell);
   MaHi_tablebody.appendChild(MaHi_row);
   //create row 4
   MaHi_row=document.createElement("TR");
   //create row 4, cell 1, align = right
   MaHi_cell=document.createElement("TD");
   MaHi_cell.innerHTML = "<font color='#FF0000'>*</font>Yrs to Support:";
   MaHi_row.appendChild(MaHi_cell);
   MaHi_cell.setAttribute("align","right");
   //create row 4, cell 2
   MaHi_cell=document.createElement("TD");
   MaHi_cell.innerHTML = "<input type='text' onclick='alert(this.name);' name='txtyears_to_support_" + MaHi_tot +"' class='input_text'>&nbsp;&nbsp;&nbsp;";
   MaHi_cell.innerHTML = MaHi_cell.innerHTML + "<input OnClick='MaHi_Delete_Table(&#39;table_" + MaHi_tot + "&#39;);' type='button' value='DEL'>"
   MaHi_row.appendChild(MaHi_cell);
   MaHi_tablebody.appendChild(MaHi_row);
   // setting table
   MaHi_table.appendChild(MaHi_tablebody);
   MaHi_table.setAttribute("id","table_" + MaHi_tot);
   MaHi_table.setAttribute("border","0");
   MaHi_table.setAttribute("width","70%");
   MaHi_body.appendChild(MaHi_table);
   //alert(MaHi_body.innerHTML); //unmark to check the body code
  }
  function MaHi_Delete_Table(MaHiDIV)
  {
   document.body.removeChild(document.getElementById(MaHiDIV));
  }
</script>
</head>
<body onload="">
<input type="button" value="Add Dependent" onClick="MaHi_Create_Table();">
</body>
</html>

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
avidyaCommented:
Hi,
would you be so kind to responde to the suggestion?
avidyaCommented:
Hi,

Again, would you be so kind to respond or close the question appropriatly?
http://www.experts-exchange.com/Web/help.jsp#hs5
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.