javascript - 多页表单：如何根据请求无限期地重复一页？HTML、CSS、JS

Question

我正在创建一个多页表单（我的意思是在某些按钮单击时，特定元素在隐藏和可见之间更改）遵循此页面的设置。我有 2 页：1. 添加动物和 2. 添加另一种动物。我希望能够在用户单击按钮add another animal之前重复第 2 页的次数submit，并存储所有输入的动物名称以发送到 python 函数（因此每次用户在add another animal页面上键入名称时，之前的动物名称不会被覆盖。

我的 HTML、CSS 和 JS 在下面。

<div class="section-25">
  <div class="container-5 w-container">
    <div class="text-block-6">Select the level of algorithm you&#x27;re looking to make</div>
    <div class="w-form">
      <form id="wf-form-Email-Form" name="wf-form-Email-Form" data-name="Email Form" method="post" action="/add_animal">

        <!-- PAGE 1 -->

        <div id="page1" class="page">

          <!-- 1ST ANIMAL NAME -->

          <label for="Enter-species" class="custom-question enter-species" id="one_name">What animal are you interested in?</label>
          <input type="text" class="text-field w-input" maxlength="256" name="species" placeholder="Enter name of animal" id="Enter-species" required="">

          <p><input type="button" id="C1" value="Add another animal" onClick="showLayer('page2')"></p>
        </div>

        <!-- PAGE 2 -->

        <div id="page2" class="page">

          <!-- NEXT ANIMAL NAME -->

          <label for="Enter-species" class="custom-question enter-species" id="one_name">What other animal are you interested in?</label>
          <input type="text" class="text-field w-input" maxlength="256" name="another_species" placeholder="Enter name of animal" id="Enter-species">

          <p><input type="button" id="B1" value="Go Back" onClick="showLayer('page1')">
            <input type="button" id="C2" value="Add another animal" onClick="showLayer('page2')">
            <input type="button" id="S1" value="Submit" action="/add_animal" </p>
        </div>
      </form>
    </div>
  </div>
</div>

CSS：

 <!-- CSS -->
  <style>
    .page {
      position: absolute;
      top: 10;
      left: 100;
      visibility: hidden;
    }
  </style>

JS：

  <!-- JAVASCRIPT -->
  <script language="JavaScript">
    var currentLayer = 'page1';

    function showLayer(lyr) {
      hideLayer(currentLayer);
      document.getElementById(lyr)
        .style.visibility = 'visible';
      currentLayer = lyr;
    }

    function hideLayer(lyr) {
      document.getElementById(lyr).
      style.visibility = 'hidden';
    }

    function showValues(form) {
      var values = '';
      var len = form.length - 1;
      //Leave off Submit Button
      for (i = 0; i < len; i++) {
        if (form[i].id.indexOf("C") != -1 ||
          form[i].id.indexOf("B") != -1)
          //Skip Continue and Back Buttons
          continue;
        values += form[i].id;
        values += ': ';
        values += form[i].value;
        values += '\n';
      }
      alert(values);
    }
  </script>

标签： javascripthtmlcssforms

Answer 1

我想你的意思是这样的：

    let currentLayer = 0;
        const animalList = [];
    const form = document.getElementById("wf-form-Email-Form");
    const [field, backButton, addButton, submitButton] = form.elements;
    function showLayer(lyr) {
      switch(lyr){
        case 1:
        currentLayer++;
        if (currentLayer-1 == animalList.length){
            animalList.push(field.value)
            form.reset();
            backButton.style.display = 'unset';
          }else{
            if (currentLayer == animalList.length){
              addButton.value = 'Add another animal';
              field.value = "";
            }else{
              addButton.value = 'Next';
              field.value = animalList[currentLayer];
            }
          }
          break;
        case -1:
            currentLayer--;
          if(!currentLayer) backButton.disabled = true; 
          if (currentLayer < animalList.length +1){
          field.value = animalList[currentLayer];
          addButton.value = 'Next';}
          break;
      }
    }

    submitButton.onClick = function(e){
      // serialize animalList and send using AJAX or add a hidden type input and set animalList as it's value
    }

    .page {
      position: absolute;
      top: 10;
      left: 100;
      visibility: hidden;
    }
    #backButton{
      display:none;
    }

<div class="section-25">
  <div class="container-5 w-container">
    <div class="text-block-6">Select the level of algorithm you&#x27;re looking to make</div>
    <div class="w-form">
      <form id="wf-form-Email-Form" name="wf-form-Email-Form" data-name="Email Form" method="post" action="/add_animal">
          <label for="Enter-species" class="custom-question enter-species" id="one_name">What other animal are you interested in?</label>
          <input type="text" class="text-field w-input" maxlength="256" name="another_species" placeholder="Enter name of animal" id="Enter-species">

          <p>
            <input type="button" id="backButton" value="Go Back" onClick="showLayer(-1)">
            <input type="button" id="addButton" value="Add another animal" onClick="showLayer(+1)">
            <input type="button" id="submit" value="Submit">
          </p>
      </form>
    </div>
  </div>
</div>