jQuery 提交前确认表格

form confirm before submit

提问by seoppc

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...

我正在使用一个简单的表单，我想让用户在表单提交之前进行确认……我知道使用 jQuery 会很容易，但我对代码有点困惑……

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

我知道上面的代码不完整，我希望你的帮助完成它，所以它会发出一个警报（使用 jQuery 警报）说“请确认一切是否正确”并将提交按钮上的文本更改为“确认”而不是“提交”。如果用户再次单击确认，它将提交表单。我希望这是有道理的。谢谢。

采纳答案by kei

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

示例小提琴：http: //jsfiddle.net/z68VD/

html:

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

回答by Nathan Romano

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

回答by nikhil

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.

关于该代码如何工作的轻微解释，当用户单击按钮时，将启动确认对话框，以防用户选择不执行提交表单的默认操作。确认后，控件将传递给浏览器，浏览器继续提交表单。我们在这里使用标准的 JavaScript 确认。

回答by Kalaivani M

HTML

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

    });
});

回答by NiksD

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

回答by f4s5d4s65d4

Based on easy-confirm-plugini did it:

基于easy-confirm-plugin我做到了：

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

回答by Hrushi

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

回答by Michael Mior

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

回答by Aslam Shaikh

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

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