CODEWITHSUNDEEP
javascripthtmlforms
Mr.Polymath
Mr.Polymath

Reputation: 67

Create new form fields on click using javascript

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!

Upvotes: 1

Views: 2083

Answers (2)

BobbyTables
BobbyTables

Reputation: 4685

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
    })
})

Upvotes: 3

Marcos P&#233;rez Gude
Marcos P&#233;rez Gude

Reputation: 22158

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.

Upvotes: 2

Related Questions