Advanced Search

jQuery Dynamic Form Field Addition

/ Published in: JavaScript
Save to your folder(s)
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.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  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

You need to login to post a comment.