根据用户输入创建带编号的表格

我有一个永不刷新的页面，并且所有服务器智能都使用Ajax进行中继。有一种形式会要求用户提供信息，然后询问他们想要拥有多少页面。页数范围从2-15。一旦用户完成，他们点击进入下一部分（不刷新）。下一部分是用户可以创建页面的地方。将显示表格并要求用户输入字幕和文字。假设用户需要10页。该表格将被标记为第10页。当用户填写此信息时，他们将点击显示下一个表格的“+”按钮（第9页），用户输入数据，然后单击“+”按钮再次显示表格编号3（第8页）等。我该如何制作，以便每个显示的表单对于该页码都是唯一的？另外，我该如何做到这一点，以便如果用户点击后退按钮来改变页面的数量，比如说11，那么下一页上的数字会相应变化（即：第一个表单将是第11页，第2个表单将是页面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); 
      });

我应该如何让这个当用户点击 “+” 按钮，形式与逻辑排序页面中创建数？即：第一页第10页，第二页第9页等，并且这些数字应该基于对页面总量所做的任何改变而适应。

来源

2016-07-05 user2896120

一旦用户选择了页数（在提交第一个表单时），将该值存储在一个变量中。然后在'+'单击处理程序中，显示该变量的值并每次从中减去一个值。提交'＃article_properties_form'后，清除输入字段。这可以通过给输入一个id然后使用$（'＃whatever'）。val（''）来完成。

如果用户想要更新页数，您需要第二个变量来保存所需的原始页数。这样，一旦他们去更新他们想要的数字，就可以获得新数字和原始数字之间的差异，并且可以增加或减少页面以更新保存剩余页面数量的第一个变量。

这是否有意义呢？在第一个“提交”处理程序中，您需要逻辑来检查它是否是第一次提交，这样您就知道是否执行第二段中提到的比较业务。

来源

2016-07-05 22:56:29

但为什么我必须清除文章属性窗体的输入字段？请注意，当用户点击“+”按钮时，我希望发生两件事情。另一种形式是在表单属性表单之后添加完全相同的输入，但它在技术上是不同的形式，我希望页码小于以前的1 – user2896120

哦，所以你在假设地说，如果用户选择10页，点击每个'+'符号后，页面上会有10个表单？我会克隆了一个HTML表单，如：变量$ articlePropsTemplate = $（ '＃article_properties_form'）的clone（）然后追加该模板封闭DIV ...的页码，有一个全局变量（或只包含那些jquery处理程序范围之外的变量），它保存当前页码，并且您只需从中减去 –

是的！然后，如果用户决定使它9页，当他们回去时，数字应该相应地更新 – user2896120

你必须扩展您的onsubmit页码代码，如：$（ '＃PAGENUMBER'）文本。（$（ '＃NUMPAGES选项：选择'。）VAL（））;, 到的东西更广泛的设置，根据页码的增加或减少，设置所有表单页面的ID“pagenum”值。

上，增加您可以通过表单页面的容器只是想迭代，如：对（在formpagesContainer.children子）{//设置ID“页次”值

在你将不得不减少确定如何处理多余的页面，然后迭代并设置ID“pagenum”值。

您的按钮代码对于新页面将保持不变。

来源

2016-07-06 19:38:38

根据用户输入创建带编号的表格

回答

相关问题