javascript - 创建动态不同的克隆表单

Question

在我的 HTML 中，我有一个正常的形式。该表单接受输入并提交。然后，用户将单击名为“#addOne”的按钮。此按钮使用 jQuery 将克隆的表单附加到先前的表单。每个表格都有编号，并且每个表格都比前一个表格少一个。这些数字将在我的 SQL WHERE 子句中使用。我希望克隆的表单是单独的表单，例如，如果我输入表单 9 的值并单击“提交”，然后输入表单 8 的值，则信息不会相互冲突。对于所有其他表单，表单 8 的按钮不应提交。

这是我的 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) {

                        }
                    });
                });

此外，我不希望在提交表单时刷新页面。由于某种原因，当单击提交按钮时，动态创建的表单会创建页面刷新。还有一种解决方案是在表单元素之外创建 div，但这种技术使表单认为它们是一个表单，但它们应该是单独的表单，全部提交到各自的 pageNumbers。

Answer 1

更改此行

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

到下面的

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

现在您正在将新表单附加到旧表单中。所以数据会发生冲突。您必须将表格附加到旧表格之外。因此，将新表单附加到旧表单的父表单

防止页面重新加载新表单

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

或者

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