aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes  How to add form fields dynamically     Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark " How to add form fields dynamically     " Watch " How to add form fields dynamically     " New topic
Author

How to add form fields dynamically

Simpson Kumar
Ranch Hand

Joined: Mar 19, 2008
Posts: 261
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

Joined: Dec 11, 2004
Posts: 13410

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

Joined: Mar 19, 2008
Posts: 261
Sure Ben,

Wherever it may be, finally i need solution.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61437
    
  67

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


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Simpson Kumar
Ranch Hand

Joined: Mar 19, 2008
Posts: 261
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

Joined: Jan 10, 2002
Posts: 61437
    
  67

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

Joined: Mar 19, 2008
Posts: 261
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

Joined: Jan 30, 2006
Posts: 58
Can you explain how you created the table in javascript? An example will be great.

Thanks
Simpson Kumar
Ranch Hand

Joined: Mar 19, 2008
Posts: 261
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

Joined: Jan 30, 2006
Posts: 58
Sumant,

Thank you very much for your quick reply. This is very helpful.
Manon Baratt
Ranch Hand

Joined: Jan 30, 2006
Posts: 58
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

Joined: Mar 19, 2008
Posts: 261
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

Joined: Jan 30, 2006
Posts: 58
Thank you very much. That was the problem!!

Thanks again,
Manon
 
It is sorta covered in the JavaRanch Style Guide.
 
subject: How to add form fields dynamically