Posted By

dmosher on 05/23/08


Tagged

javascript forms jquery


Versions (?)

Who likes this?

16 people have marked this snippet as a favorite

luman
snucko
korzhik
orion
benrudolph
mikegreen
Vernon
suibhne
loric
palimadra
masondixon
seanpowell
mmcachran
prit
wirenaught
ringo380


jQuery Dynamic Form Field Addition


 / Published in: JavaScript
 

I wrote this very quickly for a form I parse that allows a user to send a page to up to 5 friends. The script adds a click event to an image of a + sign beside an input box. When clicked if the user hasn't already added 5 friends to email, additional email boxes will be added.

  1. <script type="text/javascript" charset="utf-8">
  2. $(function() {
  3. var fieldCount = 1;
  4. $("#addFieldButton").click(function() {
  5. fieldCount++;
  6. if(fieldCount <= 5)
  7. {
  8. var fieldID = "recipient_email_" + fieldCount;
  9. $("#additionalEmails").append("<label for='"+fieldID+"'>Recipient Email "+fieldCount+": </label>"+
  10. "<input type='text' name='"+fieldID+"' " +
  11. "id='"+fieldID+"' size='30'><br />" );
  12. }
  13. else
  14. {
  15. alert("Maximum email fields reached.");
  16. }
  17. });
  18. });
  19. </script>

Report this snippet  

Comments

RSS Icon Subscribe to comments
Posted By: dmosher on May 23, 2008

I should note, #addFieldButton is the ID for the button that adds the fields. #additionalEmails is the name of the div that gets populated with additional forms.

Posted By: mahendtravala on April 5, 2010

in above example:

is the dynamic portion.

How can i get id of above input by jquery.

Thanks in advance.. Mahi

You need to login to post a comment.