CODEWITHSUNDEEP
javascriptphpjqueryhtml
user2896120
user2896120

Reputation: 3282

Creating dynamically different cloned forms

In my HTML, I have a normal form. The form takes inputs and submits. The user will then click a button called "#addOne". This button, using jQuery, appends a cloned form to the previous form. Each form is numbered, and each form is one less than its previous. The numbers will be used in my SQL WHERE clause. I want the cloned forms to be separate forms, For example, if I enter values for form 9 and click submit, and then enter values for form 8 the information won't collide with each other. Form 8's button should not submit for all the other forms.

Here's my jsFiddle: https://jsfiddle.net/2c2xL0cz/

HTML:

<div class="article_properties">
                        <form class="article_properties_form" action="" method="POST" enctype="multipart/form-data">
                        <p style="display: inline">Page Number</p><div style="background-color: #FF355E; padding: 5px; display: inline; margin-left: 5px"<p class="pageNumber"></p></div>
                        <textarea style="display: none" class="inputNumber" name="pageNumber"></textarea>
                        <p>Image</p>
                        <input type="file">
                            <p>Subtitle</p>
                            <input type="text" name="subtitle">

                            <p>Text</p>
                            <textarea name="text" rows="4"></textarea>
                            <input id="properties_btn" type="submit" value="Submit/Update">
                            <hr style="border: 1px dotted lightgray; margin-bottom: 50px">
                        </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-->

jQuery/Ajax:

var numPages = 10;
$('.pageNumber').text(numPages);
$('.inputNumber').text(numPages);
$('#addOne').click(function()
            {

                numPages--;
                        var articlePropsTemplate = $('.article_properties_form:last').clone();
                        $('.article_properties_form').append(articlePropsTemplate);
                        $('.pageNumber:last').text(numPages);
                        $('.inputNumber:last').text(numPages);

            });

            $('.article_properties_form').on('submit', function(e) {
                    e.preventDefault();
                    $.ajax({
                        type: 'POST',
                        url: '',
                        data: $(this).serialize(),
                        success: function(data) {

                        }
                    });
                });

Also, I do not wish to refresh the page when the form submits. For some reason, the dynamically created forms are creating page refresh when the submit button is clicked. There's also a solution in creating a div outside of the form elements, but this technique is making the forms think they're one form, but they should be separate forms all submitting to their respective pageNumbers.

Upvotes: 1

Views: 33

Answers (1)

Arun
Arun

Reputation: 3731

Change this line

$('.article_properties_form').append(articlePropsTemplate);

To the below one

$('.article_properties').append(articlePropsTemplate);

Right now you are appending the new form with in the old form. So the data will get collide. You have to append the form outside the old form. So append the new form to the old form's parent

For prevent page reload of new forms

$('body').on('submit','.article_properties_form', function(e) {
    //Your code
});

Or

$(document).on('submit','.article_properties_form', function(e) {
    //Your code
});

Upvotes: 1

Related Questions