Создание динамически различных клонированных форм

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 вне элементов формы, но этот метод заставляет формы думать, что они являются одной формой, но они должны быть отдельными формами, все они отправляются на соответствующие страницы.

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 
});