• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

How to add form fields dynamically

 
Simpson Kumar
Ranch Hand
Posts: 261
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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?
 
Ben Souther
Sheriff
Posts: 13411
Firefox Browser Redhat VI Editor
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Simpson Kumar
Ranch Hand
Posts: 261
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Sure Ben,

Wherever it may be, finally i need solution.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64721
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
What have you written so far? Where is it giving you problems?
 
Simpson Kumar
Ranch Hand
Posts: 261
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 64721
86
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Simpson Kumar
Ranch Hand
Posts: 261
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
Manon Baratt
Ranch Hand
Posts: 58
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Can you explain how you created the table in javascript? An example will be great.

Thanks
 
Simpson Kumar
Ranch Hand
Posts: 261
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.




note : i used clickeventhere insteadof onclick(..)
 
Manon Baratt
Ranch Hand
Posts: 58
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Sumant,

Thank you very much for your quick reply. This is very helpful.
 
Manon Baratt
Ranch Hand
Posts: 58
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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.
 
Manon Baratt
Ranch Hand
Posts: 58
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Thank you very much. That was the problem!!

Thanks again,
Manon
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic