Create new form fields on click using javascript

Question

I have a form that asks for some general information (I called it Gen-info) and then a fieldset inside the form in which I ask for other information.

What I'm trying to do is to create a new fieldset asking for the same other info and rename it, but now I just know how to create a copy of exactly this whole form (which asks for the general info too).

By now I'm creating the button like this:

<button type="button" id="btnAddForm" onclick="CloneForm('Gen-info');">Add other info</button>

And I'm using this javascript function:

function CloneForm(formName) {
    var formCount = document.forms.length;
    var oForm = document.forms[formName];
    var clone = oForm.cloneNode(true);
    clone.name += "New form " + formCount;
    document.body.appendChild(clone);
}

Click here to see the whole code

As you can see, I get to duplicate the whole form, but what I want is to just duplicate the part where it says "Other information 1" and rename it to "Other information 2" when I click and add 1 to the name every time a create a new one. The difference is that now I'm duplicating the whole form every time, and I just want to duplicate the fieldset.

Thank you very much!

the task would be greatly simplified with something like jQuery, is this an option? — BobbyTables
– BobbyTables, Commented Aug 31, 2015 at 10:35
I've never used it before, but I'm open to learning everything @zedd . I'm pretty noob at programming, but if you know how to do this using jQuery tell me too. I'll try to use it and if I can't get it to work I'll ask you again or wait for other answers. Thank you very much! — Mr.Polymath
– Mr.Polymath, Commented Aug 31, 2015 at 10:39

BobbyTables · Accepted Answer · 2015-08-31 11:29:11Z

3

Here is how you can do these kind of operations with jQuery, ive commented each line so you can follow the logic. The html is also slightly altered (you had no closing </fieldset>)

//on startup
$(function() {
    //add a click event-handler to the button
    $("#btnAddForm").click(function() {
        $clone = $("fieldset").last().clone() //clone the last fieldset
        $number = $clone.find("span") //get the element with the number
        $number.html(parseInt($number.html()) + 1) //add 1 to the number
        $("fieldset").last().after($clone) //insert the new clone
    })
})

And here is the entire thing, note that jQuery is included as a script in a dropdown to the left. https://jsfiddle.net/tx839gf3/4/

EDIT, heres one that gives new names, theres a new row in the start, and three rows iterating over the input-elements, and naming them:

$(function() {
    var n = 4 //start naming elements with this number
    $("#btnAddForm").click(function() {
        $clone = $("fieldset").last().clone() //clone the last fieldset
        $number = $clone.find("span") //get the element with the number
        $number.html(parseInt($number.html()) + 1) //calc and set new number
        //loop all the input fields in the copied group
        $clone.find("input").each(function() {
            $(this).attr("name", "other-info-" + n++) //set the new name-number (and iterate it)
        })
        $("fieldset").last().after($clone) //insert the new clone
    })
})

edited Aug 31, 2015 at 11:29

answered Aug 31, 2015 at 10:53

BobbyTables

4,7452 gold badges35 silver badges41 bronze badges

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

4 Comments

Mr.Polymath Over a year ago

Awesome! It does exactly what I'm looking for. I'll try to use it and tell you something. Thank you VERY much!

BobbyTables Over a year ago

okay, just take note that you should also change the "name"-attribute of the new inserted input-elements. Those are the same as the cloned part, you need to know what input is what when your recieve the data

Mr.Polymath Over a year ago

I got it to work using jQuery, and though I understand the problem, I don't know exactly what to change and how. Could you please help me? Thank you very much @zedd , I'll Accept your answer now!

BobbyTables Over a year ago

@Mr.Polymath added an extended example that might help you out

Marcos Pérez Gude · Accepted Answer · 2015-08-31 10:37:40Z

2

You can make it selecting last fieldset and change his text:

https://jsfiddle.net/tx839gf3/1/

function CloneForm(formName) {
    // your stuff
    var hm = document.getElementsByClassName("other-info").length;
    document.getElementsByClassName("other-info")[hm-1].innerHTML = "<b>Other information "+ hm +"</b>";
}

Changes in html

<fieldset><legend class="other-info"><b> Other information 1 </b></legend><label> 
                         ^^^^^^^^^^^

Note the class change in legend.

answered Aug 31, 2015 at 10:37

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

2 Comments

Mr.Polymath Over a year ago

Thank you! With this I can rename the new fieldset, but how can I omit creating the first part, where I ask for general information? I'd like to be able to just create copies of the fieldset with Other information.

Marcos Pérez Gude Over a year ago

To make only the second block cloned, you need to select the fieldset, and not the form.

Collectives™ on Stack Overflow

Create new form fields on click using javascript

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related