表格确认后才提交

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

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

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

样品小提琴: 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; } }); 
 $('#myForm').submit(function() { var c = confirm("Click OK to continue?"); return c; //you can just return c because it will be true or false }); 

下面是我会做什么来得到你想要的:

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

关于代码如何工作的一个细微的解释,当用户点击button,然后启动确认对话框,以防用户select不执行提交表单的默认操作。 在确认后,控制权被传递给进行提交表单的浏览器。 我们在这里使用标准的JavaScript确认。

基于易于确认的插件,我做到了这一点:

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

只是…

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

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(); } }); }); 
 $('.testform').submit(function() { if ($(this).data('first-submit')) { return true; } else { $(this).find('.submitbtn').val('Confirm').data('first-submit', true); return false; } }); 
 <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>