Creating a dynamic html form

Question

I would like to create a form that changes dynamically.

I have a form for creating a project (with fields such as: project_name, project_description...) and the project can have any amount (bigger or equal to 0) of categories.

What i want is to display a button which would give the user the option to add another category field. In addition I would also like the option for category fields to be "deleteable" by the user (if he changes his mind or made a mistake). What would be the best way to do so. I would like an Ajax type solution.

My solution so far is to leave an empty div beneath the last category and onclick of the button to load another field into that div with yet another div which will be used for the next div. Not to happy with this solution since i now have to count how many fields I have and give each div it's own id which complicates the matter even more.

Is there a more simple solution to this?

dmackerman · Accepted Answer · 2011-03-01 15:57:08Z

17

If you are trying to add fields dynamically with a button, you can easily do so by doing something like the following:

HTML:

<form>
    <p>
        <label>Name:</label> <input type="text">
        <label>Age:</label> <input type="text">
        <span class="remove">Remove</span>
    </p>
    <p>
        <span class="add">Add fields</span>
    </p>
</form>

JS:

$(".add").click(function() {
    $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
    return false;
});

$(".remove").click(function() {
    $(this).parent().remove();
});

Demo: http://jsfiddle.net/UeSsu/1/

answered Mar 1, 2011 at 15:57

dmackerman

2,9665 gold badges27 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nachshon Schwartz Over a year ago

Amazing! so simple... but how would i handle this if for example i wanted to send the edited result out how would I number each of the separate fields so that it can be then read easily by an outside function (entering the information into a database for example)

Nachshon Schwartz Over a year ago

Not really what i wanted since to remove a category all categories added after it must be deleted.

user677526 Over a year ago

@nayish I would give them all identical names, but I'd give them a name that references an array 0 for instance, instead of category1, category2, etc, I'd name each HTML element "category[]". (This works in PHP.) This way, everything gets written to an array, and you can simply iterate through it. This should work well with the initial solution.

Ole Henrik Skogstrøm Over a year ago

This is a beautiful solution, however i get a strange result when i implement it on my site. In stead of one additional p tag (with the fields) i get two added at the time. Any idea why this is happening?

swyx Over a year ago

this is awesome

|

Diodeus - James MacFarlane · Accepted Answer · 2011-03-01 15:55:46Z

0

I started to write a form generator is based on a definition in JSON a while back. It works but could use some enhancements. It's written using Prototype.js but it wouldn't be a huge effort to port it over to jQuery.

You're welcome to steal the code. (just view source)

answered Mar 1, 2011 at 15:55

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

2 Comments

Diodeus - James MacFarlane Over a year ago

The JSON block holds the definition of the form. So essentially by using JS to manipulate the form defintion you control a what's in the form dynamically.

Toby Smith Over a year ago

I know it's an old thread, but I'd just thought I'd point out this breaks if you remove all the blocks

ilanco · Accepted Answer · 2012-06-12 13:55:23Z

0

I've done something similar. To delete fields I didn't really removed fields. I just hidden them with a display:none and had a hidden input "delete" that I trigger to true. Then, the page receiving the result knows which field is to be deleted in the database.

They are not deleted before the form is submitted. It's like a "two pass" conception. But if you don't really need a true ajax, it works fine. Otherwise you need your JS remove function to call the server and tell to delete the field with its id. A little bit more complex to code.

edited Jun 12, 2012 at 13:55

ilanco

10.1k4 gold badges34 silver badges37 bronze badges

answered Jun 12, 2012 at 10:12

Vitorio

1

3 Comments

random_user_name Over a year ago

Hiding things with CSS has serious potential consequences. Adding them dynamically with js is a better way to go.

TheRealChx101 Over a year ago

One word: CSRF

Devin Carpenter Over a year ago

@TheRealChx101 can you elaborate? Just curious. Can't find why this would be a CSRF vulnerabilty.

Piotr Pałucki · Accepted Answer · 2025-01-17 21:55:24Z

0

Improving great answer by @dmackerman a bit (I cannot comment yet) by preventing to delete if there is only one row

HTML:

<form>
    <p class="form_field">
        <label>Name:</label> <input type="text">
        <label>Age:</label> <input type="text">
        <span class="remove">Remove</span>
    </p>
    <p>
        <span class="add">Add fields</span>
    </p>
</form>

and JS:

$(".add").click(function() {
    $("form > p:first-child").clone(true).insertBefore("form > p:last-child");
    return false;
});

$(".remove").click(function() {
     if ($(".form_field").length > 1) {
        $(this).parent().remove();
    }
});

answered Jan 17 at 21:55

Piotr Pałucki

413 bronze badges

Collectives™ on Stack Overflow

Creating a dynamic html form

4 Answers 4

7 Comments

2 Comments

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

7 Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related