Add a confirmation alert before submitting a form

Question

I have a form which allows the user to delete some data from a database.

I want to have a bit of confirmation to prevent accidental deletes. I want to do the following:

When submit is pressed, alert pops up with "Are you sure?"
If user hits "yes" then run the script
If user hits "no" then don't submit the script.

How can this be done?

I have added the onSubmit alert but it does not show anything, and it still submits the form. How can I delay the submission of the form to only occur when the user selects "yes" from the alert?

<form 
  method="POST"
  action="actions/remove-daily-recipient.php"
  onSubmit="alert('Are you sure you wish to delete?');"
>
  ...
</form>

Does this answer your question? [JavaScript Form Submit - Confirm or Cancel Submission Dialog Box](https://stackoverflow.com/questions/6515502/javascript-form-submit-confirm-or-cancel-submission-dialog-box) — Flimm, Nov 11 '21 at 09:29

score 30 · Accepted Answer · edited Nov 12 '19 at 16:28

30

Instead of alert, you have to use confirm and return in your form, for an example:

<form 
    method="post"
    onSubmit="return confirm('Are you sure you wish to delete?');">
...
</form>

edited Nov 12 '19 at 16:28

Ícaro

1,432
3
18
36

answered Jan 13 '15 at 12:05

Tebogo Sewape · Answer 2 · 2015-01-13T12:15:56.950

3

on your form can you try with a js function like:

<form onsubmit="return submitResult();">

and on your function have something like?

function submitResult() {
   if ( confirm("Are you sure you wish to delete?") == false ) {
      return false ;
   } else {
      return true ;
   }
}

I think this will be a good start.

edited Jan 13 '15 at 12:15

answered Jan 13 '15 at 11:50

Tebogo Sewape

94
6

This acts the same as the code I had before. It just submits the form anyway and goes to the script. – Francesca Jan 13 '15 at 11:59
Replace
with
– Tebogo Sewape Jan 13 '15 at 12:14
The updated version is the right way you would get it working. – Tebogo Sewape Jan 13 '15 at 12:48

Anurag Peshne · Answer 3 · 2015-01-13T12:08:57.127

-1

Stop the default behaviour, ask for confirmation and then submit the form:

var form1 = document.getElementById('form1');
form1.onsubmit = function(e){
   var form = this;
   e.preventDefault();
   if(confirm("Are you sure you wish to delete?"))
       form.submit();
}

JS Fiddle: http://jsfiddle.net/dq50e963/

edited Jan 13 '15 at 12:08

answered Jan 13 '15 at 11:44

Anurag Peshne

1,547
12
29

By using this solution I lose my data that I was submiting with form i.e. in the backand the data is missing. How would you forward the data after preventing the default submission this way? – dsalaj Oct 23 '15 at 07:54
@dsalaj: if the submission is prevented, how will the form data reach the server. Isn't this the required behaviour? – Anurag Peshne Oct 23 '15 at 08:19
@AnuragPeshne What I meant is after the successfull confirmation and submission. When the `form.submit()` is executed after the user confirms the action, the form is submited but without the data. I don't think that that was required behaviour. – dsalaj Oct 23 '15 at 10:45

Add a confirmation alert before submitting a form

3 Answers3

Linked