Dynamic Form Elements with jQuery

David Carr

Demos PHP & MySQL Tutorials

Table of Contents

When creating a form you don't always know how many form elements to give to the user, it depends on the purpose of the form, In these cases its better to let the user decide by letting them add new form elements with a click of a mouse. This tutorial will show you how to dynamically add form elements to a form using jQuery.

Demo

I'm going over input elements and select menu's to keep things simple but you could easily add checkboxes, radios, textareas etc.

First I'll go over the markup then the jQuery which will be placed at the bottom of the file as that's a best practice for working with javascript.

For input I have a div with an id of extender this div is a placeholder for jQuery to grab and place the input elements into. I also have a text link with an id of add, this id will be used by jQuery.

<div id="extender"></div>
<a id="add" href="#">Add</a>

I have almost the same setup for my select menu's only I have provided the div with an id of selextender. For the link I have given it an id of seladd its important to have a unique id for these as they will be calling a different handler in jQuery.

<div id="selextender"></div>
<a id="seladd" href="#">Add</a>

Inside javascript create a counter variable which will increment for each input that's created.

//set a counter
    var i = $('input').size() + 1;

Next a click handler listens for a click even from a text link with an id of add will append an input element to the div of extended adding fadeIn to fade the input in. Adding a class of remove to a link will allow any input to be removed.

 $('a#add').click(function() {
        $('
<input id="' + i + '" type="text" name="items[]" value="' + i + '" /><a class="remove" href="#">Remove</a>

').fadeIn("slow").appendTo('#extender');
        i++;
        return false;
    });

Another example for a select menu, in both examples the elements have a name with [] on the end this enables you to grab the array of items when the form is submitted. Also there can be no line breaks or the element won't be added to the form.

$('a#seladd').click(function() {
        $('
<select name="items[]"> <option value="1">One</option> <option value="2">Two</option> <option value="3">Three</option> </select>

<a class="remove" href="#">Remove</a>

').fadeIn("slow").appendTo('#selextender');
        return false;
    });

 To remove an item create a click function for the class remove when detected will run a fadeout function, making use of $(this) to captchure the current item and parent() no get not only the link put its parent in this case the input, before removing the item.

 $('.remove').live('click', function() {
        $(this).parent().fadeOut(300, function(){
            $(this).empty();
            return false;
        });
    });

Putting it all together:

<form action="" method="post">
<fieldset><legend>Inputs</legend>
<div id="extender"></div>
<a id="add" href="#">Add</a></fieldset>
<fieldset><legend>Select</legend>
<div id="selextender"></div>
<a id="seladd" href="#">Add</a></fieldset>
</form>
<pre lang="javascript"><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script><script type="text/javascript">// <![CDATA[
$(function() {

    //set a counter
    var i = $('input').size() + 1;

    //add input
    $('a#add').click(function() {
        $('<input type="text" name="items[]" id="' + i + '" value="' + i + '" /><a href="#" class="remove">Remove</a>').fadeIn("slow").appendTo('#extender');
        i++;
        return false;
    });

    //add select
    $('a#seladd').click(function() {
        $('
<select name="items[]">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

<a href="#" class="remove">Remove</a>

').fadeIn("slow").appendTo('#selextender');
        return false;
    });

    //fadeout selected item and remove
    $('.remove').live('click', function() {
        $(this).parent().fadeOut(300, function(){
            $(this).empty();
            return false;
        });
    });

});
// ]]></script>

 

Fathom Analytics $10 discount on your first invoice using this link

David Carr - Laravel Developer

Hi, I’m David Carr

A Senior Developer at Vivedia
I love to use the TALL stack (Tailwind CSS, Alpine.js, Laravel, and Laravel Livewire)

I enjoy writing tutorials and working on Open Source packages.

I also write books. I'm writing a new book Laravel Testing Cookbook, This book focuses on testing coving both PestPHP and PHPUnit.

Sponsor me on GitHub

Subscribe to my newsletter

Subscribe and get my books and product announcements.

Laravel Testing Cookbook

Help support the blog so that I can continue creating new content!

Fathom Analytics $10 discount on your first invoice using this link

Subscribe to my newsletter

Subscribe and get my books and product announcements.

© 2006 - 2023 DC Blog. All code MIT license. All rights reserved.