时间戳

首页 > 解决方案 > 阻止表单提交并提交另一个按钮

javascript - 阻止表单提交并提交另一个按钮

问题描述

我在表单中有一个 div，一旦用户单击一个按钮，我就会向上滑动 div 并向下滑动一个新的 div，用户可以从新的 div 提交，但我需要提交按钮位于第一个 div 上所以 javascript可以工作，因为我在字段上设置了 required ，我怎样才能使第一个按钮成为提交按钮，然后阻止它提交，而是滑动旧 div 并滑动新 div 并在新 div 的按钮中是实际的总和？

现在我将第一个 div 的按钮设置为 type="button"，将新 div 的按钮设置为提交按钮，但是这样它不会验证您的输入字段之一是否为空，我知道我应该使用 preventDefault() 但是javascript语法让我发疯，我不知道怎么写，请帮助我。

<form>
  <div id="choosing">
    //inputs

    <button type="button" id="show"> Finish up</button>
  </div>
  
  <div id="confirmation">
     
    <button type="submit" id="formSubmit"> Finish up</button
  </div>

javascript

$('#show').click(function(e) {
     
  $("#choosing").slideUp();
  $("#confirmation").slideDown();

标签： javascripthtml

解决方案

不完全确定我的问题是否正确。但是，这可能会对您有所帮助。

我们可以禁用确认按钮，所以一开始它是不可点击的。

<form>
    <div id="choosing">
      //input
      <button type="button" id="show"> Finish up</button>
    </div>
    <div id="confirmation">  
      <button type="submit" id="formSubmit" disabled> Finish up</button>
    </div>
</form>

然后在 JS 中我们定义了一个函数，如果单击显示按钮将执行该函数。在该功能中，确认按钮将被启用，并且可以再次点击

$(document).on('click', '#show', function() {
    $("#choosing").slideUp();
    //enable confirmation button
    const formSubmit = document.getElementById('formSubmit');
    formSubmit.disabled = false;
    $("#confirmation").slideDown();
});

希望有帮助，让我知道它是否按预期工作。

推荐阅读