Question

在我的HTML中，我有一个普通的表单。表单需要输入和提交。然后，用户将单击名为＆＃34; #addOne＆＃34;的按钮。此按钮使用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 });

动态创建不同的克隆表单

1 个答案: