CODEWITHSUNDEEP
jquery
user1082764
user1082764

Reputation: 2025

How can you add multiple input fields in a clone() with incrementing ID's with JQuery?

Using JQuery i am cloning this fieldset:

<fieldset class="pollQuestion" id="pq1">
    <ul>
        <label>Answers</label>
        <li id="answerFields">
            <input type="text" id="formanswer1" value="" />
        </li>
        <li>
            <input type="button" class="addAnswer" value="Add Answer" />
            <input type="button" class="delAnswer" value="Remove Answer" />
        </li>
    </ul>
</fieldset>

When i Clone() this fieldset, how can i add input fields inside the li#answerFields?

I want my clone to look like this: 

<fieldset class="pollQuestion" id="pq1">
    <ul>
        <label>Answers</label>
        <li id="answerFields">
            <input type="text" id="formanswer1" value="" />
            <input type="text" id="formanswer2" value="" />
            <input type="text" id="formanswer3" value="" />
        </li>
        <li>
            <input type="button" class="addAnswer" value="Add Answer" />
            <input type="button" class="delAnswer" value="Remove Answer" />
        </li>
    </ul>
</fieldset>

ANY and ALL help is MUCH appriciated!

Upvotes: 0

Views: 211

Answers (1)

mariogl
mariogl

Reputation: 1320

If your clone is in $your_clone:

var $answers = $your_clone.find("#answerFields");
var n_answers = $answers.find("input").length;  // Here you get max number
var number_of_new_answers = XXX;  // Your number of answers
for (i = n_answers + 1; i <= n_answers + number_of_new_answers; i++) {
    var $new_answer = $('<input type="text" value="" id="formanswer' + i + '" />', {
        type:"text",
        id:"formanswer" + i,
        value:""
    });
    $new_answer.appendTo($answers);
}

Upvotes: 2

Related Questions