CODEWITHSUNDEEP
jqueryformsconfirm
Hans de Jong
Hans de Jong

Reputation: 2078

Confirmation before submitting form using jQuery

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?

Upvotes: 20

Views: 45272

Answers (6)

Chris75
Chris75

Reputation: 11

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.

Upvotes: 1

sharif779
sharif779

Reputation: 170

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

Upvotes: 2

brunozrk
brunozrk

Reputation: 783

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>

Upvotes: 25

Zvonimir Burić
Zvonimir Burić

Reputation: 548

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;
    });
});

Upvotes: 0

Tuhin
Tuhin

Reputation: 3373

    $(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>

Upvotes: 0

iHadaj
iHadaj

Reputation: 475

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

Upvotes: 31

Related Questions