Why is my form submitted after cancelling the confirm dialog?

Question

Here is my sample code:

<button onClick="CheckData()" type="submit">

I have some conditions in CheckData function:

if (5<6) {
   warning = "sure?";
} else if (5>3) {
   warning = "really?";
} else {
  warning = '';
}

Then I check:

if (warning.length>0) {
   return confirm(warning);
} else {
   return true; //also tried false
}

So I need the confirm dialog for the first two conditions, otherwise, I don't want the dialog to be displayed.

Now, when one of the first two conditions are met, the confirm dialog pops up, but when I click on cancel, it still submits the form.

Any suggestions?

PS: This code is a demo and different from the real one. But the concept is the same.

Well you do not have a return in the inline event listener and you have a bug with a typo — epascarello, Aug 02 '18 at 15:34
Possible duplicate of [JavaScript Form Submit - Confirm or Cancel Submission Dialog Box](https://stackoverflow.com/questions/6515502/javascript-form-submit-confirm-or-cancel-submission-dialog-box) — Krisztián Balla, Aug 02 '18 at 15:38

Krisztián Balla · Answer 1 · 2018-08-02T15:49:14.513

0

Change your HTML to this:

<form onsubmit="return CheckData()">
    <button type="submit" />
    ...
</form>

Explanation:

The onsubmit event handler is called when the form is submitted.
When the event handler returns false the submission is aborted.

edited Aug 02 '18 at 15:49

answered Aug 02 '18 at 15:36

Krisztián Balla

19,223
13
68
84

score 0 · Accepted Answer · answered Aug 02 '18 at 15:36

You can pass in the event Object to the CheckData function and prevent the default action if the confirm returns false with event.preventDefault().

<form>
<button onClick="CheckData(event)" type="submit">Submit</button>
</form>
<script>
function CheckData(e){
 var warning;
 if (5<6) {
   warning = "sure?";
} else if (5>3) {
   warning = "really?";
} else {
  warning = '';
}
if (warning.length>0) {
   var con = confirm(warning);
   if(con){
   return true;
   } else {
   e.preventDefault();
   return false;
   }
} else {
   return true; 
}
}
</script>

You can also return the result of CheckData so the default action will be prevented if it returns false.

<form>
<button onClick="return CheckData()" type="submit">Submit</button>
</form>
<script>
function CheckData(){
 var warning;
 if (5<6) {
   warning = "sure?";
} else if (5>3) {
   warning = "really?";
} else {
  warning = '';
}
if (warning.length>0) {
   var con = confirm(warning);
   return con;
} else {
   return true; 
}
}
</script>

@LashaPalelashvili No problem. – Unmitigated Aug 02 '18 at 16:07 — Unmitigated, Aug 02 '18 at 16:07

Why is my form submitted after cancelling the confirm dialog?

2 Answers2