form confirm before submit

Question

I am using a simple form and I want to allow the user to confirm before the form submits... I know this would be easy using jQuery, but I am a bit confused about code...

$(function() {
  $(".testform").submit(function() {
    $('.submitbtn').text('confirm');
  });
});

I know that the above code is not complete and I would like your help to finish it, so it would give an alert (using jQuery alert) that says 'Please confirm if everything is correct' and changes the text on the submit button to "confirm" instead of "submit". If the user clicks confirm again it would submit the form. I hope this makes sense. thanks.

There is another samples there: http://stackoverflow.com/questions/8541821/how-to-simplify-my-statefull-interlaced-modal-dialogs-in-asp-net-mvc — , Sep 10 '12 at 18:26

score 122 · Answer 1 · answered Jun 23 '11 at 16:56

122

$('#myForm').submit(function() {
    var c = confirm("Click OK to continue?");
    return c; //you can just return c because it will be true or false
});

answered Jun 23 '11 at 16:56

Nathan Romano

7,016
3
19
18

This is better than my solution. – nikhil Jun 15 '14 at 18:08
Can you get the confirm() to work with the JQuery dialog-confirm? Take a look at this: http://stackoverflow.com/a/17037698/3175526 – JoshYates1980 Oct 07 '15 at 19:31
1

Keep in mind that in new jQuery versions the preferred way of preventing the default action is `e.preventDefault()` instead of returning `false` in event handlers, since `return false` did too many things at once. – vinczemarton Oct 12 '16 at 12:02
After seeing this, I tried `
` and it worked lol. Why isn't this one of the solutions here? Does it not work with `method="get"` or on other browsers?
– tanmay_garg Sep 28 '20 at 13:55

score 25 · Accepted Answer · answered Jun 23 '11 at 17:04

25

sample fiddle: http://jsfiddle.net/z68VD/

html:

<form id="uguu" action="http://google.ca">
    <input type="submit" value="text 1" />
</form>

jquery:

$("#uguu").submit(function() {
    if ($("input[type='submit']").val() == "text 1") {
        alert("Please confirm if everything is correct");
        $("input[type='submit']").val("text 2");
        return false;
    }
});

answered Jun 23 '11 at 17:04

kei

20,157
2
35
62

thanks kei for your answer, i think this code will solve my probelm. 1 more thing my form is long so can i even send user at top of page after alert. – seoppc Jun 23 '11 at 17:43

score 19 · Answer 3 · edited Jun 11 '13 at 09:06

Here's what I would do to get what you want :

$(document).ready(function() {
    $(".testform").click(function(event) {
        if( !confirm('Are you sure that you want to submit the form') ) 
            event.preventDefault();
    });
});

A slight explanation about how that code works, When the user clicks the button then the confirm dialog is launched, in case the user selects no the default action which was to submit the form is not carried out. Upon confirmation the control is passed to the browser which carries on with submitting the form. We use the standard JavaScript confirm here.

score 13 · Answer 4 · answered Nov 24 '16 at 05:52

HTML

<input type="submit" id="submit" name="submit" value="save" />

JQUERY

$(document).ready(function() {
    $("#submit").click(function(event) {
        if( !confirm('Are you sure that you want to submit the form') ){
            event.preventDefault();
        } 

    });
});

score 7 · Answer 5 · answered Dec 25 '13 at 08:09

Simply...

  $('#myForm').submit(function() {
   return confirm("Click OK to continue?");
  });

or

  $('#myForm').submit(function() {
   var status = confirm("Click OK to continue?");
   if(status == false){
   return false;
   }
   else{
   return true; 
   }
  });

score 6 · Answer 6 · edited May 20 '16 at 13:19

6

<body> 
    <form method="post">
        name<input type="text" name="text">
        <input type="submit" value="submit" onclick="return confirm('Are you sure you want to Save?')">
    </form>
</body>

edited May 20 '16 at 13:19

Sam Hanley

4,707
7
35
63

answered May 20 '16 at 12:36

Hrushi

309
3
6

1

This is the easiest answer. I don't know why it's so low. – Dan Hoover Jul 20 '20 at 14:32

score 5 · Answer 7 · answered Sep 10 '12 at 18:20

Based on easy-confirm-plugin i did it:

(function($) {
    $.postconfirm = {};
    $.postconfirm.locales = {};
    $.postconfirm.locales.ptBR = {
        title: 'Esta certo disto?',
        text: 'Esta certo que quer realmente ?',
        button: ['Cancela', 'Confirma'],
        closeText: 'fecha'
    };
    $.fn.postconfirm = function(options) {
        var options = jQuery.extend({
            eventType: 'click',
            icon: 'help'
        }, options);
        var locale = jQuery.extend({}, $.postconfirm.locales.ptBR, options.locale);
        var type = options.eventType;
        return this.each(function() {
            var target = this;
            var $target = jQuery(target);
            var getDlgDv = function() {
                var dlger = (options.dialog === undefined || typeof(options.dialog) != 'object');
                var dlgdv = $('<div class="dialog confirm">' + locale.text + '</div>');         
                return dlger ? dlgdv : options.dialog;          
            }           
            var dialog = getDlgDv();
            var handler = function(event) {
                    $(dialog).dialog('open');
                    event.stopImmediatePropagation();
                    event.preventDefault();
                    return false;
            };
            var init = function() 
            {
                $target.bind(type, handler); 
            };
            var buttons = {};
            buttons[locale.button[0]] = function() { $(dialog).dialog("close"); };
            buttons[locale.button[1]] = function() {
                $(dialog).dialog("close");
                alert('1');
                $target.unbind(type, handler);
                $target.click();
                $target.attr("disabled", true);
            };            
            $(dialog).dialog({
                autoOpen: false,
                resizable: false,
                draggable: true,
                closeOnEscape: true,
                width: 'auto',
                minHeight: 120,
                maxHeight: 200,
                buttons: buttons,
                title: locale.title,
                closeText: locale.closeText,
                modal: true
            });
            init();
        });
        var _attr = $.fn.attr;
        $.fn.attr = function(attr, value) {
            var returned = _attr.apply(this, arguments);
            if (attr == 'title' && returned === undefined) 
            {
                returned = '';
            }
            return returned;
        };
    };
})(jQuery);

you only need call in this way:

    <script type="text/javascript">     
        $(document).ready(function () {
            $(".mybuttonselector").postconfirm({ locale: {
                        title: 'title',
                        text: 'message',
                        button: ['bt_0', 'bt_1'],
                        closeText: 'X'
                    }
                });
        });
    </script>

score 1 · Answer 8 · answered Jun 23 '11 at 17:00

1

$('.testform').submit(function() {
  if ($(this).data('first-submit')) {
    return true;
  } else {
    $(this).find('.submitbtn').val('Confirm').data('first-submit', true);
    return false;
  }
});

answered Jun 23 '11 at 17:00

Michael Mior

28,107
9
89
113

Just a habit I've gotten into. It's an easy way to store information associated with a particular DOM element. In this case, the form. This means you could easily replace `.testform` with any any other selector returning a form and the code would work independently for each form. – Michael Mior Jun 23 '11 at 18:13

score -2 · Answer 9 · edited Aug 03 '18 at 15:42

-2

var r = confirm('Want to delete ?'); 

if (r == true) { 
    $('#admin-category-destroy').submit(); 
}

edited Aug 03 '18 at 15:42

JJJ

32,902
20
89
102

answered Aug 03 '18 at 12:58

Aslam Shaikh

1

1

This answer doesn't really add anything that isn't already covered here. – Blue Aug 03 '18 at 13:16

form confirm before submit

9 Answers9

Linked