How to link two buttons in html

Question

I have an HTML file that has two sections. One section has a form inside of it. And the other one has a message. If the user submits the form, then a message shows up and there will be another button the user has to press in order to complete the submission.

Is there any way to link a button so that the user has to press the other button in order to complete the original button job?

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

This way, you can also play with isSubmitted variable, and mark it again false, whenever someone does an action which requires additional confirmation from the form itself.