javascript - 多步骤表单，不在最后阶段提交

Question

更新:

我添加了新的 js 代码来解决我的问题，通过在此处添加它，可能会对其他人有所帮助。

多步骤表单有效 (codepen)，我已将其集成到我的服务器端脚本中。还在工作。代码都可以在这里找到。 ( https://codepen.io/ActiveCodex/pen/OVBeMg#code-area ) 标记为“Next”的按钮元素让用户完成这些步骤。在最后一步，JS 将“下一步”按钮的标签更改为“提交”按钮，但它不会提交到任何地方。我想在不破坏“下一步”按钮功能的情况下添加“提交”功能。通过 Ajax 或通常的表单“发布”方法提交。

我将 div id='form' 包装到一个

元素中，虽然它会提交，但即使在单击“下一步”按钮时它也会这样做，而不仅仅是在单击提交按钮时。(我在 .js 方面没有经验，因为 perl 和 php 是我的常态)。我添加了一个事件监听器，但数据不在 js 变量中。我正在询问有关我应该寻找什么的提示 - 例如，监听器或提交功能或我可以通过谷歌搜索的内容。我尝试过“preventDefault()”，但这阻止了表单上的所有内容。

首先是html代码...

  <div id='form' class='form' action="/cgi-bin/real-estate-dashboard-dev/processing_scripts/edit-listings-data.pl" method='get'> 
    <h1 class='property_summary'>Property Summary</h1>

    <input id="one" type="radio" name="stage" checked="checked" />
    <input id="two" type="radio" name="stage" />
    <input id="three" type="radio" name="stage" />
    <input id="four" type="radio" name="stage" />
    <input id="five" type="radio" name="stage" />
    <input id="six" type="radio" name="stage" />

    <div class="stages">
        <label for="one">1</label>
        <label for="two">2</label>
        <label for="three">3</label>
        <label for="four">4</label>
        <label for="five">5</label>
        <label for="six">6</label>
    </div>

    <span class="progress"><span></span></span>
    <div class='panels'>
      <div data-panel="one">
        <h4>Stage 1</h4>

        <p>Number of Receptions</p>
        <select name="number_of_reception_rooms" style='padding: 10px;font-size:1.5em;'> 
          <option value='' style='font-weight:700;'>Number of Receptions</option>
          <option value="1">1</option>
          <option value="2" selected='selected'>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>       
        </select> 
      </div>
      <div data-panel="two">
        <h4>Stage 2</h4>

        <p>Number of Ensuites</p>
        <select name="number_of_ensuites" style='padding: 10px;font-size:1.5em;'> 
          <option value='' style='font-weight:700;'>Number of Ensuites</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5" selected='selected'>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>       
        </select> 
      </div> 


   <button>Next</button>

  </div>


<script src="https://static.codepen.io/assets/common/stopExecutionOnTimeout-de7e2ef6bfefd24b79a3f68b414b87b8db5b08439cac3f1012092b2290c719cd.js"></script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script id="rendered-js">
      $('.form .stages label').click(function () {
  var radioButtons = $('.form input:radio');
  var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
  selectedIndex = selectedIndex + 1;
});

$('.form button').click(function () {
  var radioButtons = $('.form input:radio');
  var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));

  selectedIndex = selectedIndex + 2;

  $('.form input[type="radio"]:nth-of-type(' + selectedIndex + ')').prop('checked', true);

  if (selectedIndex == 6) {
    $('button').html('Submit');


  }
});

     // not working at all as I mentioned.
     document.getElementById("form").addEventListener("click", function(e) 
      {
      var bedrooms = e.number_of_bedrooms;

      e.preventDefault();
      console.log( 'number_of_bedrooms   ' + number_of_bedrooms);
     }) 

    //document.getElementById("myForm").submit();


    </script>  






```document.getElementById("form").addEventListener("click", function(e) 
      {
      //var number_of_bedrooms = e.target.number_of_bedrooms;

      e.preventDefault();
      //console.log( 'number_of_bedrooms   ' + number_of_bedrooms);
})

So the expected result is that the 'Next' button continues to step me through the form but on the last step, the submit button must submit the data in the div &lt;id='form'&gt; to a new script when I click it.

...code that fixed my issue...

$('#myForm button').click(function(e) {


      var radioButtons = $('#myForm input:radio');
      var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
      var numberForButtonAction = selectedIndex;
      numberForButtonAction = numberForButtonAction + 2;
      selectedIndex = selectedIndex + 2;

      $('.form input[type="radio"]:nth-of-type(' + selectedIndex + ')').prop('checked', true);




      if (numberForButtonAction <= 5 ){  
          $('button').html('Next');
          document.getElementById("myForm").addEventListener("click", function(event){
          e.preventDefault();  
          });

      }

      if (numberForButtonAction == 6 ){  
          $('button').html('Submit');
          document.getElementById("myForm").addEventListener("click", function(event){
          e.preventDefault();  
          });

      }

      if (selectedIndex > 6) {
          $('button').html('Submit');    
      }

  }); 

Answer 1

我想我有一个解决方案。

首先，我用 form 标签包裹了整个表单，并设置了 onsubmit 函数(根据您的需要进行更改)。

我做的第二件事是更改下一个按钮上的 onclick 监听器。我将它从 button 标签更改为带有 type="button" 的 input 标签。当 selected 等于 6 时，我将其更改为 type="submit"。这样，当您单击提交时，表单将提交!当您单击下一步时，它将执行常规操作。

代码如下:

$('.form .stages label').click(function() {
  var radioButtons = $('.form input:radio');
  var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));
  selectedIndex = selectedIndex + 1;
});

$('#last').click(function() {
  var radioButtons = $('.form input:radio');
  var selectedIndex = radioButtons.index(radioButtons.filter(':checked'));

  selectedIndex = selectedIndex + 2;

  $('.form input[type="radio"]:nth-of-type(' + selectedIndex + ')').prop('checked', true);

  if (selectedIndex == 6) {
    document.getElementById('last').value = "Submit";
    document.getElementById('last').type = "submit";
    return false;
  }
});

function doSomething() {
  console.log('submitted');
}

.stages {
  font-size: 0;
  text-align: justify;
}

.stages:after {
  content: '';
  display: inline-block;
  font-size: 0;
  text-align: justify;
  width: 100%;
}

input[type="radio"] {
  display: none;
}

.stages label {
  background: #ffffff;
  border: solid 5px #c0c0c0;
  border-radius: 50%;
  cursor: pointer;
  display: inline-block;
  font-size: 0;
  font-weight: 700;
  height: 50px;
  line-height: 50px;
  position: relative;
  text-align: center;
  vertical-align: top;
  width: 50px;
  z-index: 1;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.stages label:after {
  content: '\2713';
  color: #0cc39f;
  display: inline-block;
  font-size: 16px;
}

#one:checked~.stages label[for="one"],
#two:checked~.stages label[for="two"],
#three:checked~.stages label[for="three"],
#four:checked~.stages label[for="four"],
#five:checked~.stages label[for="five"],
#six:checked~.stages label[for="six"] {
  border-color: #0cc39f;
}

.stages label.active {
  border-color: purple !important;
}

#one:checked~.stages label,
#two:checked~.stages label[for="one"]~label,
#three:checked~.stages label[for="two"]~label,
#four:checked~.stages label[for="three"]~label,
#five:checked~.stages label[for="four"]~label,
#six:checked~.stages label[for="five"]~label {
  font-size: 1rem;
}

#one:checked~.stages label:after,
#two:checked~.stages label[for="one"]~label:after,
#three:checked~.stages label[for="two"]~label:after,
#four:checked~.stages label[for="three"]~label:after,
#five:checked~.stages label[for="four"]~label:after,
#six:checked~.stages label[for="five"]~label:after {
  display: none;
}

.progress>span {
  background: #c0c0c0;
  display: inline-block;
  height: 5px;
  transform: translateY(-2.75em);
  transition: 0.3s;
  width: 0;
}

#two:checked~.progress span {
  width: calc(100% / 5 * 1);
}

#three:checked~.progress span {
  width: calc(100% / 5 * 2);
}

#four:checked~.progress span {
  width: calc(100% / 5 * 3);
}

#five:checked~.progress span {
  width: calc(100% / 5 * 4);
}

#six:checked~.progress span {
  width: calc(100% / 5 * 5);
}

.panels div {
  display: none;
}

#one:checked~.panels [data-panel="one"],
#two:checked~.panels [data-panel="two"],
#three:checked~.panels [data-panel="three"],
#four:checked~.panels [data-panel="four"],
#five:checked~.panels [data-panel="five"],
#six:checked~.panels [data-panel="six"] {
  display: block;
}


/* Custom code for the demo */

html,
button,
input,
select,
textarea {
  font-family: "Segoe UI", Frutiger, "Frutiger Linotype", "Dejavu Sans", "Helvetica Neue", Arial, sans-serif;
}

body {
  background-color: #0cc39f;
  margin: 0;
  padding: 0 2em;
}

a {
  color: #0cc39f;
}

h2,
h4 {
  margin-top: 0;
}

.form {
  background: #ffffff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, .4);
  margin: 4em;
  min-width: 480px;
  padding: 1em;
}

.panels div {
  border-top: solid 1px #c0c0c0;
  margin: 1em 0 0;
  padding: 1em 0 0;
}

input {
  box-sizing: border-box;
  display: block;
  padding: .4em;
  width: 100%;
}

#last {
  background-color: #0cc39f;
  border: 0;
  color: #ffffff;
  cursor: pointer;
  font-weight: 700;
  margin: 1em 0 0 0;
  padding: 1em;
  width: unset;
}

#last:hover {
  opacity: 0.8;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form">
  <h2>Multi Page Form (Pure CSS)</h2>
  <p>Divide long forms, enable users to flick back and forward.</p>
  <p>Use JS to validate form at the end of the stage and highlight tab(s) that contain(s) error.</p>
  <form onsubmit="doSomething(); return false;">
    <input id="one" type="radio" name="stage" checked="checked" />
    <input id="two" type="radio" name="stage" />
    <input id="three" type="radio" name="stage" />
    <input id="four" type="radio" name="stage" />
    <input id="five" type="radio" name="stage" />
    <input id="six" type="radio" name="stage" />

    <div class="stages">
      <label for="one">1</label>
      <label for="two">2</label>
      <label for="three">3</label>
      <label for="four">4</label>
      <label for="five">5</label>
      <label for="six">6</label>
    </div>

    <span class="progress"><span></span></span>

    <div class="panels">
      <div data-panel="one">
        <h4>Stage 1</h4>
        <input type="text" placeholder="First Name" />
      </div>
      <div data-panel="two">
        <h4>Stage 2</h4>
        <input type="text" placeholder="Last Name" />
      </div>
      <div data-panel="three">
        <h4>Stage 3</h4>
        <input type="text" placeholder="Address" />
      </div>
      <div data-panel="four">
        <h4>Stage 4</h4>
        <input type="text" placeholder="Email" />
      </div>
      <div data-panel="five">
        <h4>Stage 5</h4>
        <input type="text" placeholder="Phone Number" />
      </div>
      <div data-panel="six">
        <h4>Stage 6</h4>
        <input type="text" placeholder="Comment" />
      </div>
    </div>

    <input type="button" id="last" value="Next">
    <br><br>
  </form>
</div>