Use your left/right keys to browse tutorials
Dynamically adding form inputs and submit using jQuery

Dynamically adding form inputs and submit using jQuery

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on September 8, 2010

You may find a need to allow the user to dynamically add or remove text inputs from your application. This is relatively easy to do using jQuery and using arrays to submit the form data to a PHP page. This tutorial runs through setting up the form with the controls to add, remove and reset the form fields as well as preparing the form variables to be sent using AJAX.

The Code

You won’t need to be a JavaScript master to work out what’s going on here. the first click functions control the number of input fields displayed on the page. Each new input field that’s added is given the ‘dynamic[]‘ array name so the values are concatenated and separated with a comma.

Then once the user submits the form, the form values are pushed into an array which can then be submitted using PHP to your database. You’ll probably need to either store the complete string for example 1,2,3,4,5,6,7 in the database or explode the string using PHP where you can manipulate it further.


$(document).ready(function(){


	var i = $('input').size() + 1;
	
	$('#add').click(function() {
		$('<div><input type="text" class="field" name="dynamic[]" value="' + i + '" /></div>').fadeIn('slow').appendTo('.inputs');
		i++;
	});
	
	$('#remove').click(function() {
	if(i > 1) {
		$('.field:last').remove();
		i--; 
	}
	});
	
	$('#reset').click(function() {
	while(i > 2) {
		$('.field:last').remove();
		i--;
	}
	});
	
	// here's our click function for when the forms submitted

	$('.submit').click(function(){
								
	var answers = [];
    $.each($('.field'), function() {
        answers.push($(this).val()); 
    });
	
    if(answers.length == 0) { 
        answers = "none"; 
    }   

	alert(answers);
	
	return false;
								
	});
	

});




More tutorials from Papermashup
  • Zaheer

    i want add fix dynnmic field and also want to fix therer name
    for example

    to name =a12

    and

    to name =b12

    how its posible

  • http://rmhealthandbeauty.com adira

    What’s up, yes this post is in fact fastidious and I have learned lot of things from it concerning blogging. thanks.

  • http://eter tert

    dsd

  • http://intensedebate.com/people/silk4bell Immigration Solicitor folkstone

    Hola! I’ve been following your website for a long time now and finally got the courage to go ahead and give you a shout out from Lubbock Tx! Just wanted to say keep up the great job!

    Also visit my weblog Immigration Solicitor folkstone

  • Pingback: Dynamically adding form inputs and submit using jQuery

  • http://placiddownlink815.thoughts.com Rusty

    You’ll encounter a change in your lifestyle after undergoing this bariatric surgery. Many surgeries can be expensive and can involve challenging lifestyle changes, particularly after lap-band surgery and other bariatric procedures. Then it was off to enrolling in the Silver Hill Psychiatric Hospital in New Canaan, Connecticut.

  • jyothi

    Its fine good.. but how can i validate these dynamically added fields.. can any one help me out…

  • http://tinyurl.com/afribeirn13046 http://tinyurl.com/afribeirn13046

    I Feel post, “Dynamically adding form inputs and submit using jQuery | Papermashup.
    com” was in fact spot on! I personallycannot see eye to
    eye with u even more! Finally looks like I personallyuncovered a blog definitely worth
    reading through. Thanks for your time, Heather

  • Eun Woo

    How to I make more than one of these boxes with different attributes so I can PHP post it individually?!?!

    by the way, in order to validate this with PHP, use this:

    <?php
    foreach($_POST['dynamic'] as $value) {
    echo "$value “; // change this to what you want to do with the data
    }
    ?>

  • http://www.bestindiancollege.com college

    Hi,

    What should i do if I want to delete/insert a row/element in the middle? I would like to have a + and – sign so that I can insert / delete element in the middle.