JS question

colm_c · 21-01-2006 02:00PM #1

I need to dynamically add form elements to a form (in real time) using a simple plus button / link.

It's a group of inputs and I need the user to be able to click on the plus button to add another set of empty boxes beside the plus button...

There can be an unlimited number of sets (within reason)

Any ideas how I could do this in javascript?

Serbian · 22-01-2006 02:28AM

I have a few functions that I used to add and delete rows of tables dynamically. Inside the rows I had input boxes. Here's the code to how I did it:

function getElementXbrowser ( element_id )
{
   if (document.getElementById)
   {
      var element = document.getElementById(element_id);
   }
   else if (document.all)
   {
      var element = document.all[element_id];
   }
   else if (document.layers)
   {
      var element = document.layers[element_id];
   }
   
   return element;
}

function addRow(table_id)
{
   var table = getElementXbrowser ( table_id );
   var rowNum = table.getElementsByTagName("TR").length;
   rowNum=rowNum-2;
   
   var newRow = document.createElement("tr");
   
   var newCol1 = document.createElement("td");
   newCol1.style.textAlign='center';
   newCol1.innerHTML='<input name="specs[name][]" type="text" class="input">';
   
   newCol2.style.textAlign='center';
   newCol2.innerHTML='<input name="specs[valu][]" type="text" class="input">';
   var newCol2 = document.createElement("td");   

   newRow.appendChild(newCol1);
   newRow.appendChild(newCol2);
   table.getElementsByTagName("tbody")[0].appendChild(newRow);
}

function delRow(table_id, limit)
{
   var table = getElementXbrowser ( table_id );
   var len = table.rows.length;
   if ( len > limit )
   {
      table.deleteRow(len-1);
   }
}

The code is reasonably straight forward, but if you need a hand figuring it out, I can give you more details.

JS question

Comments