How to add form fields dynamically

Hi

I have a form with several fields, and in one section I have one check box and two text fields in a row and also have one button "Add more"

when I click on the Add more button I need to create one more row with the above fields dynamically.

how can I do it? Could some one suggest me with any code snippet?

This is typically done on the client with Javascript.
If you'd like, we can move this thread to our HTML/Javascript forum for you.

Sure Ben,

Wherever it may be, finally i need solution.

What have you written so far? Where is it giving you problems?

hi Bibeault,

Actulayy I didn't get any idea how to make fileds dynamically, the reason why I'm asking how to generate fields,

If you dont mind, could you please send me any template to generate them.

thanks,
Sumant K

You can either use the DOM API to dynamically create and attach new elements, or you could use the innerHTML property to add new elements.

I got good solution on this by writing coding in javascript.

I created one table with fields and written javascript code to generate each row in table. its very simple.

thanks,
Sumant K

Can you explain how you created the table in javascript? An example will be great.

Thanks

hi Manon,

check the following code which i worked , but you may find little bit more code with hidden fileds, i used them to make our table look and feel.

<HTML> 
<HEAD> 
<TITLE>mergeAttributes() Method</TITLE> 
<SCRIPT LANGUAGE="JavaScript"> 
function addRowToTable()
{
  var tbl = document.getElementById('tblSample');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  var row = tbl.insertRow(lastRow);
 
  var cellh1 = row.insertCell(0);
  var hl = document.createElement('input');
  hl.type = 'hidden';
  hl.name = 'hid1' + iteration;
  hl.id = 'hid1' + iteration;
   cellh1.appendChild(hl);
 
var cellLeft = row.insertCell(1);
var chkbox = document.createElement('input');
chkbox.type='checkbox';
 chkbox.name='check'+iteration;
 cellLeft.appendChild(chkbox);
 
   var cellh2 = row.insertCell(2);
  var h2 = document.createElement('input');
  h2.type = 'hidden';
  h2.name = 'hid2' + iteration;
  h2.id = 'hid2' + iteration;
 cellh2.appendChild(h2);

// right cell
  var cellRight = row.insertCell(3);
  var el = document.createElement('input');
  el.type = 'text';
  el.name = 'txtRow' + iteration;
  el.id = 'txtRow' + iteration;
  el.size = 30;
 cellRight.appendChild(el);

var cellmid = row.insertCell(4);
  var e2 = document.createElement('input');
  e2.type = 'text';
  e2.name = 'qty' + iteration;
  e2.id = 'qty' + iteration;
  e2.size = 5;
  cellmid.appendChild(e2);
 
   var cellend = row.insertCell(5);
  var e3 = document.createElement('input');
  e3.type = 'text';
  e3.name = 'notes' + iteration;
  e3.id = 'notes' + iteration;
  e3.size = 25;
  cellend.appendChild(e3);
  
 
}

</SCRIPT> 
</HEAD> 
<BODY > 
<H1>mergeAttributes() Method</H1> 
<HR>
<form action="tableaddrow_nw.html" method="get">
<p>
 
<table  width="680" border="0" cellspacing="0" cellpadding="10"  id="tblSample" border="2">
  <tr>
 
          <td width="15%" colspan="3" align="center"><h4>Select tool</h4> <br /></td>
 
          <td width="30%"><h4>Tool name</h4><br /></td>
          <td width="5%"><h4>Quantity</h4><br /></td>
          <td width="35%"><h4>Notes</h4>
</td>
  <tr>
<td width="5%"> <input type="hidden" name="hid1" id="hid1" /></td>
<td width="5%"><div align="center"><input type="checkbox" name="check" /></div></td>
<td width="5%"> <input type="hidden" name="hid2" id="hid2" /></td>
<td width="30%"><input type="text" name="txtRow1"id="txtRow1" size="30" maxlength="50" /></td>
    <td width="5%"><input type="text" name="qty1" id="qty1" size="5" maxlength="5"  /> </td>
    <td width="35%"><input type="text" name="notes1"  id="notes1" size="25" maxlength="50" /> </td>
    </td>
  </tr>
</table>
<input type="button" value="Add" clickeventhere="addRowToTable();" />
</form>
</BODY> 
</HTML>

note : i used clickeventhere insteadof onclick(..)

Sumant,

Thank you very much for your quick reply. This is very helpful.

Sumant,

I got my code working except for the drop down box I have. No matter what I select in that box, I get null back after I submit the form:

Here is part of my code that generates the drop down box:

var cell4 = row.insertCell(3);
var c4 = document.createElement('select');
var opt1 = document.createElement('option');
var t1 = document.createTextNode('High');
opt1.appendChild(t1);
opt1.setAttribute('value', 'high');
opt1.setAttribute('name', 'frequency');
c4.appendChild(opt1);

opt1 = document.createElement('option');
t1 = document.createTextNode('Med');
opt1.appendChild(t1);
opt1.setAttribute('value', 'med');
opt1.setAttribute('name', 'frequency');
c4.appendChild(opt1);

opt1 = document.createElement('option');
t1 = document.createTextNode('Low');
opt1.appendChild(t1);
opt1.setAttribute('value', 'low');
opt1.setAttribute('name', 'frequency');
c4.appendChild(opt1);
cell4.appendChild(c4);

Thanks,
Manon

Manon,

dont create option element, you just create select element and add options to that select element. like the following code.

you must fill the options's name and value attributes correctly.

hope this will be worked.

Thank you very much. That was the problem!!

Thanks again,
Manon