阻止表单提交并提交另一个按钮答案

【问题标题】：prevent form from submitting and make another button submit阻止表单提交并提交另一个按钮
【发布时间】：2021-08-15 18:19:55
【问题描述】：

我在表单中有一个 div，一旦用户单击一个按钮，我会向上滑动 div 并向下滑动一个新 div，用户可以从新 div 提交，但我需要提交按钮位于第一个 div所以javascript可以工作，因为我在字段上设置了required，我怎样才能让第一个按钮成为提交按钮，然后阻止它提交，而是slideUp旧div和slideDown新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();

【问题讨论】：

标签： javascript html

【解决方案1】：

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

我们可以禁用确认按钮，这样一开始就不能点击。

<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();
});

希望对您有所帮助，如果它按预期工作，请告诉我。

【讨论】：