如何在表单的submit事件监听器中放置一个回调来等待用户对jquery即兴提示的响应？
这是我想做的 –
- 当用户单击主窗体的提交按钮时，显示提示（使用jquery的即兴）。 提示再次是一个具有密码字段和“确定”和“取消”按钮的表单。
- 当用户点击确定时，将发布主窗体（连同密码值，附加到主窗体）。
- 如果用户单击“取消”，则不会提交表单。
细节
我之前问了一个问题 – 在使用即兴function阻止正常提交后，jquery表单submit（）在回调函数内部无效
并能够使用javascript的原生提示方法成功实现我想要的东西。 但我想用jquery的即兴插件做同样的事情。
这是使用本机javascript提示符的工作代码 –
$('#frmAddAdnetworkTemplate').submit(function(event){ promptText = "Password required"; postedPassword = prompt(promptText); if(postedPassword) { $("form#frmAddAdnetworkTemplate").find("input#manage_adnetwork_password").val(postedPassword); } else { event.preventDefault(); } }); 这是我到目前为止使用即兴的代码 –
$('#frmAddAdnetworkTemplate').submit(callBackSubmit); function callBackSubmit(event){ $.prompt(passwordForm,{ buttons: { Ok: true, Cancel: function(){event.preventDefault(); } }, submit: submitPasswordPrompt}); //how do I call event.preventDefault(); when user cancel's. //The form gets submitted anayway, it does not wait for the code inside submitPasswordPrompt() to execute. How do I put some callback and make the submit event listener to wait until the user clicks Ok or Cancel? } function submitPasswordPrompt(e, value,m,form) { if(value) { $("form#frmAddAdnetworkTemplate").find("input#manage_adnetwork_password").val(postedPassword); //append the password value in the main form } }
但无论如何，表单都会被提交，我不知道在响应即兴提示之前，如何进行某种回调以阻止提交。 它不会像javascript的天真提示那样等待。
另外，请注意我已经尝试在开头使用event.preventDefault而在我之前的问题中使用form.submit（） jquery表单中的submit（）在使用即兴function阻止正常提交后无法在回调函数内工作 。 但在这种情况下，表单不提交（没有显示javascript错误）。 请看看你是否可以回答这个问题。
首先要注意的是，您已将submit button命名为“提交”。 这与form.submit相对应，使您无法提交form 。
定义脚本将与之交互的表单HTML时最常见的错误来自表单控件的快捷方式访问器的存在。 它是为控件提供与FORM元素的现有属性相对应的NAME（或可能的ID）。 最常见的例子是类型=“提交”的INPUT元素，其中名称为“提交”。 因为命名控件可用作FORM元素的命名属性，所以此INPUT元素在属性名称“submit”下可用。 不幸的是，FORM元素已经有一个名为“submit”的属性，它是可用于通过脚本提交表单的submit方法。
资料来源： https ： //stackoverflow.com/a/3553600/896341
您甚至使用插件Impromptu错误，不应将匿名函数作为按钮值传递。 另请注意， submit event handler函数在$.prompt()的submit callback函数之前完成。
此示例演示了执行流程以及如何阻止form提交。
$('#myForm').on('submit', function(event) { var promptText = "The form will be submitted, continue?"; console.log('Blocking attempt to submit form using preventDefault().'); // DEBUG event.preventDefault(); // Prevent default submit $.prompt(promptText, { buttons : { // Specify buttons and their return value Ok: true, Cancel: false }, submit: function(event, value, message, formVals) { //console.log('submit', event, value, message, formVals); // DEBUG if (value) { console.log('Unbind submit event handler and trigger a submit.'); // DEBUG // Notice that you might want to rebind the event later on. $('#myForm').off('submit').submit(); // Submit form } } }); console.log('This is executed before the submit callback of $.prompt().'); // DEBUG });
我不知道插件，但我知道它是浏览器提示的html替代品。
我不会尝试重写您的代码，但可以看到可以更改流程逻辑的位置以使您更容易。
删除表单提交处理程序中的所有代码。
绑定一个单击处理程序以形成提交按钮并在按钮上阻止默认，因此表单在您告诉之前不会提交。
在插件逻辑中，如果用户单击“确定”时一切正常，请调用$('#frmAddAdnetworkTemplate').submit()
如果不是“OK”，您需要自己处理使用插件方法需要完成的工作。
我认为你试图过早地阻止默认操作。 使用您的代码单击取消 – 阻止默认操作，然后提交到submitPasswordPrompt。 为什么不尝试发送false取消然后在提交函数中执行preventDefault逻辑，如下所示：
$(function(){ $('#passwordForm').submit(function(){ $.prompt('blah blah',{ buttons: { Ok: true, Cancel:false }, submit: submitPasswordPrompt}); console.log('submitted'); return false; // Prevent submit }); }); function submitPasswordPrompt(e, value,m,form) { if(value) { console.log('submittin....'); } else { console.log('its false'); e.preventDefault(); } }