Link to home
Start Free TrialLog in
Avatar of ansi_c
ansi_c

asked on

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.
Avatar of bga6418
bga6418
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>
Avatar of ansi_c
ansi_c

ASKER

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?
ASKER CERTIFIED SOLUTION
Avatar of avidya
avidya
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of avidya
avidya
Hi,
would you be so kind to responde to the suggestion?
Avatar of avidya
avidya
Hi,

Again, would you be so kind to respond or close the question appropriatly?
https://www.experts-exchange.com/Web/help.jsp#hs5