如何在html中链接两个按钮

Question

我有一个包含两个部分的 HTML 文件。一个部分里面有一个表格。另一个有消息。 如果用户提交表单，则会显示一条消息，并且用户必须按下另一个按钮才能完成提交。

有没有办法链接一个按钮，让用户必须按下另一个按钮才能完成原始按钮工作？

<section>
  <form>
    <input>...
    <button> 
        // User presses the first submit button
      </button>
  </form>
</section>
<div>
  <button>
     // User has to press this button next inorder to complete the form
   </button>
  <div>

Answer 1

const form = document.querySelector("form"); // First grab the form
const btn2 = document.getElementById("button2"); // Second button, make sure to add the id or any other proper selector

let isSubmitted = false;

// Once form will be submitted from inside
// we will prevent the default behaviour of it so it does not do anything other than
// marking isSubmitted as true, so this can be checked in other actions
form.addEventListener("submit", (e) => {
  e.preventDefault();
  isSubmitted = true;
});

// Once the form is submitted once, only then 
// trigger programmatically the actual behaviour
btn2.addEventListener("click", () => {
  if (isSubmitted) {
    form.submit();
  }
});

这样，您还可以使用isSubmitted 变量，并将其再次标记为 false，每当有人执行需要表单本身额外确认的操作时。