Confirmation before submitting form using jQuery

Question

I am trying add a confirmation before a form is submitted using jQuery. I found a nice example in another Stack Overflow question form confirm before submit but I can't get it to work.

jQuery:

$(function() {
    $('form#delete').submit(function() {
        var c = confirm("Click OK to continue?");
        return c;
    });
});

Template:

<form id="delete" action="{% url 'item_delete' item.id %}" method="post">{% csrf_token %}
    <input class="floatright" type="submit" value="Delete" />
</form>

How can we achieve this?

score 31 · Answer 1 · answered Apr 10 '14 at 13:49

31

   $('#delete').submit(function(event){
     if(!confirm("some text")){
        event.preventDefault();
      }
    });

answered Apr 10 '14 at 13:49

iHadaj

475
5
7

brunozrk · Accepted Answer · 2015-08-17T19:14:15.483

25

You are submitting the form and after are checking for confirm, you need to the inverse

JS:

$(function() {
   $("#delete_button").click(function(){
      if (confirm("Click OK to continue?")){
         $('form#delete').submit();
      }
   });
});

HTML:

<form id="delete" action="{% url 'item_delete' item.id %}" method="post">{% csrf_token %}
    <input id="delete_button" class="floatright" type="button" value="Delete" />
</form>

edited Aug 17 '15 at 19:14

answered Apr 10 '14 at 13:42

brunozrk

773
1
7
14

1

I added `event.preventDefault();` in an 'else' condition – campeterson May 15 '14 at 15:39
3

This will **not** work if you submit the form in any way besides clicking this button (e.g., pressing enter in another input). @user3311206's answer is better because of this. – Ben Mar 26 '17 at 20:08
1

To follow up on Ben's comment, the user3311206 he is referencing is iHadaj's answer from April 4, 2010 - https://stackoverflow.com/a/22989986/160830 – Scott Mitchell Sep 24 '18 at 22:05

score 2 · Answer 3 · answered Aug 27 '20 at 05:49

Use following line of code on your submit button

onclick="if (confirm('some text')) return true; else return false;"

Example

<form id="delete" action="{% url 'item_delete' item.id %}" method="post">{% csrf_token %}
<input class="floatright" type="submit"  onclick="if (confirm('some text')) return true; else return false;" value="Delete" />

score 1 · Answer 4 · edited Apr 11 '23 at 09:10

The onclick solution on the button by sharif779 (above) was the only solution that worked for me, because it actually intercepts the submit event BEFORE it is executed.

This is just to show what is possible with a function inside the onclick attribute of a button (which can be easily inserted by js/jQuery). https://www.w3schools.com/jsref/event_onclick.asp

var $confirm_message = "'Do you really want to change me?'";
var $save = jQuery('<button type="submit" onclick="if(confirm(' + $confirm_message + ')){return true;}else{jQuery(this).next().click();}">Save</button>');

First problem I ran into was quotation mark caos in the code embedded in the attribute. I solved this by defining the variable for the message with the single quotation marks already included.

The second problem was: if I just return false in the else branch of the confirmation, it works but the original dialog keeps staying open. So I added the click action for the cancel button, which comes next to the save button (sibling). So, jQuery(this).next().click(); executes the click on the Cancel button.

In summary, this effectively prevents the submit event and it does so by by clicking cancel first. It works like a charm also with ENTER events in Edge and Firefox just the same as with mouseclick.

Zvonimir Burić · Answer 5 · 2014-04-10T13:58:58.863

0

Make sure that you put your code in $(document).ready(), like this:

$(document).ready(function () {
    $('form#delete').submit(function() {
        var c = confirm("Click OK to continue?");
        return c;
    });
});

edited Apr 10 '14 at 13:58

answered Apr 10 '14 at 13:47

Zvonimir Burić

528
3
11

score 0 · Answer 6 · answered Apr 10 '14 at 13:50

    $(function() {
       $('form#delete').click(function(e) {
        e.preventDefault();
        var c = confirm("Click OK to continue?");
        if(c){
            $('form#delete').submit();
          }
      });
  });

    <form id="delete" action="www.google.com">
        <input id="deletesubmit" type="submit" value="Delete" />
    </form>

Confirmation before submitting form using jQuery

6 Answers6