在提交表单之前显示 div 不起作用答案

【问题标题】：showing div before submitting form is not working在提交表单之前显示 div 不起作用
【发布时间】：2021-07-17 08:59:06
【问题描述】：

我有一个表单，我想在提交之前显示一个确认 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>

【问题讨论】：

您的 if...else 中缺少大括号。

标签： javascript html jquery

【解决方案1】：

使用event.preventDefault()而不是返回false

【讨论】：

【解决方案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>

【讨论】：

我确实阻止了它提交，但是 div 没有向上或向下滑动，它只是保持不变，可能是什么问题？以及如何添加另一个实际提交表单的偶数侦听器？我这样做了 var form = document.getElementById('tripinfo'); form.addEventListener('submit', function(e) { e.preventDefault(); $("#choosing").slideDown(); $("#confirmation").slideUp(); });
从事件监听器返回 false 什么都不做，你需要使用 event.preventDefault() 查看我的代码 sn-p。
哦，我刚刚意识到有一个代码 sn-p，它的作用就像一个魅力，非常感谢，你太棒了
你好，我发布了一个新问题，如果可以的话请检查一下，谢谢。