Question

我有一个普通的表格，起初是一个表格，但当用户点击＆＃34;＃addOne＆＃34;按钮，使用jQuery显示上一个表单的克隆。使用Ajax中继表单数据，当用户单击以提交表单时，由于e.preventDefault（），表单不会刷新;问题是动态创建的表单由于某种原因刷新了页面。未动态创建的第一个表单不会刷新页面。这是什么原因？如何使我动态创建的表单不刷新页面？

每个表单都有编号，每个表单比之前的表单少一个。这些数字将在我的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) {

                        }
                    });
                })

Answer 1

问题是您要复制form元素，然后将form附加到上一个form。 $('.article_properties_form').append(articlePropsTemplate);是实际问题，您需要$('.article_properties').append(articlePropsTemplate);。

var numPages = 10;
$('.pageNumber').text(numPages);
$('.inputNumber').text(numPages);
$('#addOne').click(function() {

  numPages--;
  var articlePropsTemplate = $('.article_properties_form:last').clone();
  $('.article_properties').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) {

    }
  });
  return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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-->

另外，最好将button元素与type="button"一起使用。然后，您可以使用onclick事件代替onsubmit。这只是一个建议，无论哪种方式都可行。

附加的克隆表单刷新页面，但不应该

1 个答案: