多步驟表單，不在最后階段提交

Question

更新：

我添加了新的js代碼來修復我的問題，並通過在此處添加它來幫助其他人。

多步驟表單工程（codepen），並且我已經將其集成到服務器端腳本中。 還在工作。 此處提供所有代碼。 （ https://codepen.io/ActiveCodex/pen/OVBeMg#code-area ）標記為“下一步”的按鈕元素將使用戶逐步前進。 在最后一步，JS將按鈕“下一步”的標簽更改為“提交”按鈕，但是它沒有提交到任何地方。 我想添加“提交”功能而不破壞“下一步”按鈕的功能。 可以通過Ajax提交，也可以通過通常的表單“ post”方法提交。

我將div id ='form'包裝到一個<form>元素中，盡管可以提交，但即使單擊了“下一步”按鈕，它也這樣做，不僅是單擊了提交按鈕。 （由於perl和php是我的規范，因此我沒有.js經驗）。 我添加了一個事件監聽器，但是數據不在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標簽。 當選擇的等於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>