表格确认后才提交
我正在使用一个简单的表单，我希望允许用户在表单提交之前进行确认…我知道这很容易使用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>
