Want form not to submit when confirm command on submit button returns false

Question

I have a simple form. When the form's submit button is pressed, I want a JS confirm statement to capture if the user really wants to submit the form. The dialog comes up. confirm() does return false if Cancel is pressed in the confirm dialog, but the form is still submitted. The other buttons can submit the form. What am I doing wrong?

<!DOCTYPE html>
<html>
<head>
<style>
.bg2 {background-color: #E1EBF2;}
html, body {
  color: #536482;
  background-color: #F5F7FA;
  label: font-weight: 800;
}
</style>
<script>
function confirm_check() {
    return confirm('Does this post conform to the board rules? If unfamiliar with the board rules, click Cancel then read the Board rules on the navigation bar. If it complies, submit the form again and select OK.')
}
</script>
</head>
<body>
<title>Posting form</title>
<h1>Posting form</h1>
<div class="bg2">
<form action="./thanks.html" method="get">

<div>

<dl>
<dt><label for="subject">Subject:</label></dt>
<dd><input type="text" name="subject" id="subject" size="45" maxlength="120" tabindex="2" value="" class="inputbox autowidth" /></dd>
</dl>
</div>

<div>
<textarea name="message" id="message" rows="15" cols="76" tabindex="4" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);" onfocus="initInsertions();" class="inputbox" style="position: relative;">
</textarea>
</div>
<input type="submit" accesskey="k" tabindex="7" name="save" value="Save draft" class="button2">&nbsp;
<input type="submit" tabindex="5" name="preview" value="Preview" class="button1">&nbsp;
<input type="submit" accesskey="s" tabindex="6" name="post" onclick="confirm_check();" value="Submit" class="button1 default-submit-action">&nbsp;
        
</form>

</body>
</html>

Please see [How to prevent form from being submitted?](/q/3350247/4642212). Inline event handlers like `onclick` are [bad practice](/q/11737873/4642212). They’re an [obsolete, cumbersome, and unintuitive](/a/43459991/4642212) way to listen for events. Always [use `addEventListener`](//developer.mozilla.org/en/docs/Learn/JavaScript/Building_blocks/Events#inline_event_handlers_%E2%80%94_dont_use_these) instead. — Sebastian Simon, May 11 '23 at 00:56

score 0 · Answer 1 · answered May 11 '23 at 01:42

You would need onclick="return confirm_check();" to have it work with inline event handlers (for which returning false prevents the default action). Just calling confirm_check() ignores the return value.

To have the confirm appear for any method of submitting the form (e.g. pressing enter in an <input> or clicking any of the 3 submit buttons), you should handle the submit event instead. With inline event handlers, you would remove the onclick and use onsubmit="return confirm_check();" on the <form> element.

However, using inline event handlers is NOT best practice with modern JavaScript. You should prefer addEventListener and use event.preventDefault() instead.

The code for that would look something like this (remove all the inline event handlers first):

document.querySelector('.default-submit-action').addEventListener('click', e => {
    if (!confirm_check()) e.preventDefault();
});

Want form not to submit when confirm command on submit button returns false

1 Answers1