Forum:

HTML Pages with CSS and JavaScript

How to add form fields dynamically

Ranch Hand

Posts: 261

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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?

Thanks,
Kumar

Ben Souther

Sheriff

Posts: 13411

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

Java API J2EE API Servlet Spec JSP Spec How to ask a question... Simple Servlet Examples jsonf

Simpson Kumar

Ranch Hand

Posts: 261

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sure Ben,

Wherever it may be, finally i need solution.

Thanks,
Kumar

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

[Asking smart questions] [About Bear] [Books by Bear]

HTML 5 (verified skill)
Skill verified by Jeanne Boyarsky

CSS 3 (verified skill)
Skill verified by Jeanne Boyarsky

JavaScript (verified skill)
Skill verified by Jeanne Boyarsky

Simpson Kumar

Ranch Hand

Posts: 261

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Thanks,
Kumar

Bear Bibeault

Sheriff

Posts: 67747

173

I like...

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

[Asking smart questions] [About Bear] [Books by Bear]

Simpson Kumar

Ranch Hand

Posts: 261

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Thanks,
Kumar

Manon Baratt

Ranch Hand

Posts: 58

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Thanks

Simpson Kumar

Ranch Hand

Posts: 261

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Thanks,
Kumar

Manon Baratt

Ranch Hand

Posts: 58

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Sumant,

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

Manon Baratt

Ranch Hand

Posts: 58

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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

Simpson Kumar

Ranch Hand

Posts: 261

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

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.

Thanks,
Kumar

Manon Baratt

Ranch Hand

Posts: 58

posted 16 years ago

Number of slices to send:

Optional 'thank-you' note:

Send

Thank you very much. That was the problem!!

Thanks again,
Manon

Did you see how Paul cut 87% off of his electric heat bill with 82 watts of micro heaters?