Создание пронумерованных форм на основе ввода пользователем

Question

У меня есть страница, которая никогда не обновляется, и все серверные мудрые ретранслируются с использованием Ajax. Существует форма, которая запрашивает у пользователя информацию, а затем спрашивает, сколько страниц они хотят иметь. Количество страниц варьируется от 2 до 15. Как только пользователь будет выполнен, они перейдут к следующей части (без обновления). В следующей части пользователь может создавать свои страницы. Отобразится форма и попросит пользователя ввести субтитры и текст. Предположим, пользователь желает 10 страниц. Эта форма будет отмечена как страница 10. Когда пользователь заполнит эту информацию, они нажмут кнопку «+», где отображается следующая форма (стр. 9), пользователь вводит данные, а затем нажимает «+», , чтобы отобразить форму номер 3 (стр. 8) и т. д. Как сделать так, чтобы каждая отображаемая форма была уникальной для этого номера страницы? Кроме того, как я могу сделать так, чтобы, если пользователь нажимает кнопку «Назад», чтобы изменить количество страниц, скажем, 11, соответственно изменяются номера на следующей странице (т.е.: первая форма будет на странице 11, вторая форма будет страницей 10 и т. Д.).

Вот мой код первой части:

HTML

<form class="article_information_form" action="" method="POST"> 

          <p>Number of pages</p> 
          <select id="numPages" name="numPages"> 
           <option value="" selected></option> 
           <option value="2">2</option> 
           <option value="3">3</option> 
           <option value="4">4</option> 
           <option value="5">5</option> 
           <option value="6">6</option> 
           <option value="7">7</option> 
           <option value="8">8</option> 
           <option value="9">9</option> 
           <option value="10">10</option> 
           <option value="11">11</option> 
           <option value="12">12</option> 
           <option value="13">13</option> 
           <option value="14">14</option> 
           <option value="15">15</option> 
          </select><br> 
          <input id="btn" type="submit" name="article_info_btn" value="Submit"> 
         </form> 
        </div> <!--End of article information div--> 

JQuery

$('.article_information_form').on('submit', function(e) { 
        e.preventDefault(); 
        $.ajax({ 
         type: 'POST', 
         url: '', 
         data: $(this).serialize(), 
         success: function(data) { 
          $(".article_Information").fadeOut("slow"); 
          $(".article_properties").fadeIn("5000"); 
          $('#pageNumber').text($('#numPages option:selected').val()); 
         } 
        }); 
       }) 

Вторая часть

HTML

<form id="article_properties_form"> 
         <p>Page Number</p><p id="pageNumber"></p> 
          <p>Subtitle</p> 
          <input type="text"> 

          <p>Text</p> 
          <textarea></textarea> 
          <input type="submit" value="Submit/Update"> 
         </form> 

         <div id="button" 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

$('#button').click(function() 
      { 
       $('#pageNumber').text($('#numPages option:selected').val() - 1); 
      }); 

Как я должен сделать это так, что, когда пользователь нажимает на кнопку "+", форма создается с помощью логической упорядоченной страницы номер? i.e: первая форма страницы 10, вторая форма страницы 9 и т. д., и эти числа должны адаптироваться на основе любых изменений, внесенных в общее количество страниц.

Answer 1

Как только пользователь выбрал количество страниц (при отправке первой формы), сохраните это значение в переменной. Затем в обработчике кликов «+» отобразите значение этой переменной и вычитайте из нее каждый раз. После отправки '#article_properties_form' очистите поля ввода. Это можно сделать, указав входы id, а затем используя $ ('# whatever'). Val ('').

Если пользователь хочет обновить количество страниц, вам понадобится вторая переменная, которая сохранит исходное количество желаемых страниц. Таким образом, как только они отправятся обновлять номер, который они хотят, вы можете принять разницу между новым номером и оригиналом и либо добавить, либо вычесть страницы для обновления первой переменной, которая удерживает количество оставшихся страниц.

Это имеет смысл вообще? Вам понадобится логика в первом обработчике submit, чтобы проверить, является ли это первым представлением или нет, таким образом, вы знаете, следует ли делать бизнес сравнения, упомянутый в моем втором абзаце.

Answer 2

Вы должны расширить onsubmit код нумерации страниц, например: $ ('# PageNumber') текст. ($ ('# NUMPAGES вариант: выбран.) Вал()) ;, к чему-то немного более обширный, который устанавливает все значения идентификатора страницы страницы «pagenum» в зависимости от увеличения или уменьшения номеров страниц.

На увеличении вы можете просто перебирать контейнер формы страницы, например: для (ребенка в formpagesContainer.children) {// устанавливает Ид «pagenum» значение

На уменьшении вы должны будете определить, что делать с избыточными страницами , а затем перебрать и установить значение id «pagenum».

Ваш код кнопки останется в порядке для новой страницы.