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>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.