Comments on: How to dynamically add form elements via JavaScript

By: Allen Liu

Allen Liu — Sat, 17 Dec 2011 21:18:23 +0000

You’re welcome =) I’m glad it helped out.

Allen

By: Lokki

Lokki — Sat, 17 Dec 2011 21:11:22 +0000

Thank you Allen for this perfect tutorial.

By: Allen Liu

Allen Liu — Tue, 13 Dec 2011 01:40:53 +0000

Sorry, I’m very familiar with VBScript. If you are working with ASP.NET, you should be able to use the JavaScript and HTML code as is.

Allen

By: Lokki

Lokki — Sun, 11 Dec 2011 17:11:00 +0000

Hi, It’s perfect sample and help.I want to thank you.
If its possible can you give example how to get textarea data with vbscript asp? ” + FPL + “” Best regards.

By: Allen Liu

Allen Liu — Wed, 07 Dec 2011 09:05:33 +0000

Hi Nita,

You can have the extra dropdown menus “hidden” with the display attribute set to none. If a user pushes the “Add Item” button, you can simply change the CSS of the dropdown menus via JavaScript to make the visible.

Allen

By: Nita

Nita — Mon, 05 Dec 2011 18:30:04 +0000

Great help. But I see it can not be used to add a dropdown menu itself?
I have two drop down menus int a form that provide options for two different kinds of specifications of a product item. I want to be able to have an “Add Item” option for users who want more than one product, but each with different specifications. So I basically need the “Add Item” button to generate two or more extra dropdown menus with the original data in them, for a new item. How can I do this?

By: Milin

Milin — Mon, 21 Nov 2011 07:17:32 +0000

Thanks Bro………..

By: Allen Liu

Allen Liu — Sat, 22 Oct 2011 09:09:07 +0000

None! Feel free to use it however you like :)

By: Mia

Mia — Fri, 21 Oct 2011 19:59:12 +0000

What’s the licensing for your code?

By: lbfromla

lbfromla — Wed, 12 Oct 2011 09:11:10 +0000

I’m very grateful for this clear and coherent explanation!
-lbfromla

By: roger

roger — Fri, 07 Oct 2011 09:31:31 +0000

nice job bro, I’ve been searching for this before now i found it. thanks a lot

By: Allen Liu

Allen Liu — Sun, 02 Oct 2011 08:28:08 +0000

I am currently learning ASP.NET MVC3. If that is what you are using, you can simply have a submit button with the form action set to the “/controller/action” (assuming you did not change the default routing). There is a bit more to this though like having your action use FormCollection. Read here for more details:

http://stackoverflow.com/questions/5088450/simple-mvc3-question-how-to-retreive-form-values-from-httppost-dictionary-or

Allen

By: luther

luther — Fri, 30 Sep 2011 17:35:45 +0000

Would you happen to know how to send the form input info with ASP?

By: Sumesh

Sumesh — Fri, 23 Sep 2011 08:04:23 +0000

Hi. Nice work.

By: Anonymous

Anonymous — Thu, 15 Sep 2011 16:37:45 +0000

review hiding div tags, and write the fields, but hide the div tags if checked=’checked’

By: axl163

axl163 — Mon, 12 Sep 2011 15:32:32 +0000

Hi Ramesh,
You can store session information via cookies. That way you can first look for the cookies and read the information off of that. When a user creates a new input element, that information of course will have to be saved to a cookie.

Cookies are always stored in name/value pairs. Depending on how simple your form is, it can simple be the number of inputs that the user has added. When a user uses the back button, your CGI script would first look for the cookie. If the cookie exist, read the number of inputs and create them. If not, start with a fresh form. This is a pretty simple case.

Here is some more information on creating/using cookies via CGI::Cookie:

http://perldoc.perl.org/CGI/Cookie.html

I hope this helps.

Allen

By: Ramesh

Ramesh — Mon, 12 Sep 2011 11:59:33 +0000

Hello,
Thanks for sharing this wonderful tutorial.
I have a question, I use Java script in CGI, I create dynamic controls using java script. After proceeding to next page and when the user hits “back button” the controls (created dynamically) are gone. I have seen some of your comments related to this problem, but those are with php, but here I am using cgi. could you please enlighten me?

Thanks
Ramesh

By: SteveD

SteveD — Thu, 01 Sep 2011 13:24:44 +0000

Thanks, this puts me on the right track for another project that I’m planning. Can anyone show a simple example of how to display another textfield based on a checkbox being selected? An example would be to allow a visitor to add their cell phone number. If the checkbox is not clicked the Cell Phone field is not displayed on the form, if it is, the field is displayed. I’m actually planning to use this functinality where a visitor has multiple addresses but only the primary would be displayed if they only had one address.

Thanks for any examples that can be provided.

By: Arvind ojha

Arvind ojha — Wed, 24 Aug 2011 06:59:18 +0000

thanx i was very useful for mine……..

By: charm

charm — Sat, 23 Jul 2011 06:39:53 +0000

Hi there!! Thanks for the snippet. It’s very useful to me!! Thanks a lot!!! :)

By: Allen Liu

Allen Liu — Wed, 13 Jul 2011 17:50:39 +0000

Hi Barry,

The following should work but I have not tested it:

var counter = 1;
var limit = 3;
function addInput(divName){
     if (counter == limit)  {
          alert("You have reached the limit of adding " + counter + " inputs");
     }
     else {
          var newdiv = document.createElement('div');
          newdiv.innerHTML = "Entry " + (counter + 1) + " 
";
          document.getElementById(divName).appendChild(newdiv);
          counter++;
 
// give focus to the newly added input
document.getElementById("input_"+counter).focus();
     }
}

I hope this helps.

Allen

By: Barry Hunt

Barry Hunt — Wed, 13 Jul 2011 10:16:38 +0000

This example is working fine for me but I cannot work out how to set the focus onto the newly created element in the form.
Is there some way to do this ?.
My project involves barcode entry from a scanner into each element without the need for keyboard or mouse – the idea is that the user will scan repeated barcodes (each barcode will be followed by a simulated enter key) until they scan a code which signifies “done” then the form will be submitted.

By: Allen Liu

Allen Liu — Tue, 12 Jul 2011 21:25:40 +0000

Hi Bryan,

Can you give me the URL to your form? That would allow me to quickly see where the issue is.

Thanks,

Allen

By: bryan

bryan — Tue, 12 Jul 2011 18:29:53 +0000

good day i have used the code above to add form on my system, problem is when im passing the page to my php form it wasnt displaying the array

here is my php code:

if(isset($_POST['submit']))
{
$myInputs = $_POST["myInputs"];
foreach ($myInputs as $eachInput) {
echo $eachInput . “”;
}
}

By: Allen Liu

Allen Liu — Wed, 22 Jun 2011 15:40:05 +0000

Thanks for the comment =)

Allen

By: Anonymous

Anonymous — Wed, 22 Jun 2011 15:22:07 +0000

nice work and thanks a lot for it dude!!!!!!!!!

By: brett

brett — Mon, 06 Jun 2011 18:00:27 +0000

Thanks for the help. This was the only website that helped me quick enough.

Thanks,

Brett

By: Javid

Javid — Thu, 26 May 2011 11:05:30 +0000

thanks … this was really useful .
i appreciate it .

By: Jason

Jason — Fri, 15 Apr 2011 18:01:36 +0000

My goodness…. 10 hours wasted trying everything and the solution was right here… and such a simple one at that. Moving the form up on the page worked. Thanks a billion.

By: Allen Liu

Allen Liu — Sun, 10 Apr 2011 16:20:57 +0000

Hi Wondering Coder,

Repopulating your form with information from a database is certainly possible but well beyond what is shown here. I can go through a high level discussion of what I would do though.

If a user presses the Update button, I would do a form submit with the necessary information to collect the right pieces of data from the database. I would then load up a new page with both the form and data already prefilled.

I apologize if this does not help but it is difficult without knowing which language you are using to do this.

Allen