表格在提交前确认

时间:2011-06-23 16:52:28

标签: jquery

我使用的是一个简单的表单,我希望允许用户在表单提交之前进行确认...我知道使用jQuery会很容易,但我对代码有点困惑......

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

我知道上面的代码不完整,我希望得到你的帮助来完成它,所以它会发出警告(使用jQuery警报),说“请确认一切是否正确”并更改提交上的文字按钮“确认”而不是“提交”。如果用户再次点击确认,则会提交表单。我希望这是有道理的。感谢。

9 个答案:

答案 0 :(得分:111)

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

答案 1 :(得分:19)

示例小提琴: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;
    }
});

答案 2 :(得分:16)

以下是我要做的事情,以获得你想要的东西:

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

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

答案 3 :(得分:8)

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

    });
});

答案 4 :(得分:6)

...简单地

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

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

答案 5 :(得分:5)

基于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);

你只需要这样打电话:

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

答案 6 :(得分:3)

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

答案 7 :(得分:1)

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

答案 8 :(得分:-2)

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

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