Подтвердить форму перед отправкой

Я использую простую форму, и я хочу разрешить пользователю подтвердить, прежде чем форма отправит... Я знаю, что это будет легко с помощью jQuery, но я немного запутался в коде...

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

Я знаю, что приведенный выше код не является полным, и я бы хотел, чтобы ваша помощь завершила его, поэтому он даст предупреждение (используя предупреждение jQuery), в котором говорится: "Пожалуйста, подтвердите, все ли правильно" и измените текст в submit чтобы подтвердить "подтвердить" вместо "отправить". Если пользователь снова нажмет кнопку подтверждения, он отправит форму. Я надеюсь в этом есть смысл. спасибо.

Ответ 1

образец скрипта: 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

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

Ответ 3

Вот что я сделал бы, чтобы получить то, что вы хотите:

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

Небольшое объяснение того, как работает этот код, Когда пользователь нажимает кнопку, открывается диалоговое окно подтверждения, если пользователь не выбирает действие по умолчанию, которое должно было отправить форму, не выполняется. После подтверждения управление передается в браузер, который продолжает подавать форму. Мы используем стандартный JavaScript-подтверждение здесь.

Ответ 4

На основе 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>

Ответ 5

Просто...

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

Ответ 6

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

    });
});

Ответ 7

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

Ответ 8

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