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 27 · Answer 1 · answered Apr 10 '14 at 13:49

27

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

answered Apr 10 '14 at 13:49

iHadaj

435
4
6

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

21

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

703
6
14

1

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

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 1 · 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" />

Zvonimir Burić · Answer 4 · 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ć

498
3
11

score 0 · Answer 5 · 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

5 Answers5