CODEWITHSUNDEEP
javascriptjqueryhtmlajax
user2896120
user2896120

Reputation: 3282

Create cloned numbered forms dynamically with jQuery

I have a page where only one form appears. This form is: 

<div style="display: none" class="article_properties">
    <form id="article_properties_form">
        <p>Page Number</p>
        <p id="pageNumber"></p>
        <p>Subtitle</p>
        <input type="text">

        <p>Text</p>
        <textarea></textarea>
        <input type="submit" value="Submit/Update">
    </form>
    <div id="addOne" style="width: 25px; height: 25px; background-color: orange; border-radius: 50%">
        <p style="text-align: center; line-height: 25px">+</p>
    </div>
</div> <!--End of article properties div-->

When the user clicks the #addOne div, a clone of that form is made. BUT, this form is technically not the same form, because it will have one small detail that will make it uniquely different. This detail is the page number. Every time the #addOne div is clicked, the page number becomes one less. The page number is chosen by the user prior to seeing this current page. For example, let's say the user picks 10 pages. The first form's page number will be 10, the next form when the user clicks the #addOne div it'll be 9 and so on. The first form will always stay at 10 and the second form will always stay at 9, the third form will always stay at 8 and so on.

Here's my current script: 

<script>
    var numPages; //Global var: number of pages user wants

    $('#addOne').click(function() {
        $('#pageNumber').text(numPages);
        numPages--;
        var articlePropsTemplate = $('#article_properties_form').clone();
        $('#article_properties_form').append(articlePropsTemplate);
    });
</script>

My current code is producing very weird results. When I click on the #addOne div, the form is being duplicated multiple times instead of once, and the number of pages is not being shown correctly in a logical countdown order. This form never refreshes and all information is relayed through Ajax.

Here's the jsFiddle: https://jsfiddle.net/9dzgg8m6/6/

Upvotes: 0

Views: 41

Answers (1)

madalinivascu
madalinivascu

Reputation: 32354

Alter your form :

<div class="article_properties">
    <form id="article_properties_form">
        <div class="form-body">//add a class to wrap the elements for cloning
            <p>Page Number</p><p class="pageNumber"></p>//change the id to class
            <p>Subtitle</p>
            <input type="text">

            <p>Text</p>
            <textarea></textarea>
            <input type="submit" value="Submit/Update">
        </div>
    </form>

    <div id="addOne" style="width: 25px; height: 25px; background-color: orange; border-radius: 50%"><p style="text-align: center; line-height: 25px">+</p></div>

</div> <!--End of article properties div-->

and your js

var numPages = 10; 
$('.pageNumber').text(numPages);//add then number for the first element

$('#addOne').click(function()
{

    numPages--;
    var articlePropsTemplate = $('.form-body:last').clone();//clone the last wrapped elements
    $('#article_properties_form').append(articlePropsTemplate);
    $('.pageNumber:last').text(numPages);//append the number after it was placed on the page
});

https://jsfiddle.net/0738u576/

Upvotes: 1

Related Questions