在提交表單之前顯示 div 不起作用

Question

我有一個表單，我想在提交之前顯示一個確認 div，如果用戶在新 div 上單擊“確定”，則提交，如果不是，則不會提交，我正在使用 slideUp() 和 slideDown()，我很善良如果卡住，它不起作用，它只是重定向到下一頁，我如何通過新按鈕單擊返回 true 以實際提交表單，而不是使用原始提交按鈕？

<div class="choosing" id="choosing">
  <form action="rides.php" method="POST" id="tripinfo">
    <label> Date of the trip: <br>
      <input id="date" type="date" min="2021-06-21" required>
    </label> <br>
    <button type="submit" id="subBtn" class="btn"> Finish up</button>
  </form>
</div>

<div class="confirmation " id="confirmation" style="display:none" ;>
  //some stuff
  <button id="ok">ok</button>
</div>        

劇本：

<script>

  $('#tripinfo').submit(function () {

  $("#choosing").slideDown();
  $("#confirmation").slideUp();

  if ($('#ok').click)
    return true;
  else
    return false;
    //i'm pretty sure this if statement is wrong but i don't know what is wrong with it lol.
  }
  });

</script>

Answer 1

使用event.preventDefault()而不是 return false

Answer 2

您需要使用preventDefault()取消提交表單，然后在用戶單擊“確定”按鈕時使用不同的事件處理程序進行偵聽，並且僅提交表單：

 $('#tripinfo').submit(function(e) { if (e.originalEvent && e.originalEvent.isTrusted) //check if user clicked submit button or javascript clicked it e.preventDefault(); //prevent submitting the form if user clicked $("#choosing").slideUp(); $("#confirmation").slideDown(); }); $('#ok').click(function() { $('#tripinfo').submit(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="choosing" id="choosing"> <form action="rides.php" method="POST" id="tripinfo"> <label> Date of the trip: <br> <input id="date" type="date" min="2021-06-21" required> </label> <br> <button type="submit" id="subBtn" class="btn"> Finish up</button> </form> </div> <div class="confirmation " id="confirmation" style="display:none" ;> //some stuff <button id="ok">ok</button> </div>