如何在表单的submit事件侦听器中放置回调等待用户对jquery impromptu的提示的响应？ [英] How to put a callback in the submit event listener of a form to wait for user's response to jquery impromptu's prompt?
问题描述
这里是我想做的 -
- 显示提示（使用jquery的impromptu）点击主窗体的提交按钮。
- 当用户点击时，主窗体（以及附加到主窗体上的密码值）将被发布。好的。
- 如果用户点击取消，则不会提交此表单。
/ strong>
我之前提出了一个问题 - jquery form submit（）在使用impromptu
阻止正常提交后不能在回调函数内工作，并且能够成功实现想使用javascript的本地提示方法。但是我想使用jquery的impromptu插件做同样的事情。
这里是使用原生JavaScript提示符的工作代码 -
$（'＃frmAddAdnetworkTemplate'）。submit（function（event）{
promptText =需要密码;
postedPassword = prompt（promptText）;
if（postedPassword）
{
$（form＃frmAddAdnetworkTemplate）。find（input＃manage_adnetwork_password）。 val（postedPassword）;
}
else
{
event.preventDefault（）;
}
}
这里是我迄今为止使用impromptu的代码 -
$（'＃frmAddAdnetworkTemplate'）。submit（callBackSubmit）;
function callBackSubmit（event）{
$ .prompt（passwordForm，{buttons：{Ok：true，Cancel：function（）{event.preventDefault（）;} ，submit：submitPasswordPrompt}）;
//如何调用event.preventDefault（）;当用户取消时。
//表单获得提交，它不等待submitPasswordPrompt（）中的代码执行。如何放置一些回调，并使提交事件侦听器等待，直到用户单击确定或取消？
}
函数submitPasswordPrompt（e，value，m，form）
{
if（value）
{
$（form＃frmAddAdnetworkTemplate）find（input＃manage_adnetwork_password）。val（postedPassword）;
//以主窗体的形式附加密码值
}
}
但是表单仍然提交，我不知道如何放置某种回调，以防止提交，直到响应即兴提示。它不会像在javascript的天真提示的情况下等待。另外，请注意，我已经尝试在开头使用event.preventDefault，并在之前的问题中使用form.submit（）。 stackoverflow.com/questions/9567300/jquery-form-submit-not-working-inside-callback-function-after-preventing-norma\"> jquery form submit（）在回调函数中不工作，防止在使用impromptu时正常提交< a>。但在这种情况下，形式只是不提交（没有显示JavaScript错误）。请看看你能否回答。
首先要注意的是你已经命名了你的提交按钮提交。这对应于 form.submit ，并使您无法提交表单。
当定义一个脚本
将与之交互的表单HTML时，最常见的错误是存在快捷方式
表单控件的访问器。它是给控件一个与FORM
元素的现有属性对应的NAME（或
可能的ID）。最常见的例子是INPUT元素
type =submit与NAMEsubmit。因为命名控件是
可用作FORM元素的命名属性，所以INPUT
元素在属性名称submit下可用。
不幸的是，FORM元素已经有一个名为
submit的属性，它是可以用于通过脚本提交
形式的submit方法。
资料来源： http://stackoverflow.com/a/3553600/ 896341
您甚至还使用了该插件 Impromptu 错误，不应将匿名函数作为按钮值传递。
还要注意提交事件处理程序函数在提交回调之前完成函数 $。prompt（）。
此 example 演示了执行流程以及如何防止表单提交。
$（'＃myForm'）。on（'submit'，function（event）{
var promptText =表单将被提交， b
$ b console.log（'阻止尝试使用preventDefault（）提交表单'）; // DEBUG
event.preventDefault（）; //阻止默认提交
$ .prompt（promptText，{
buttons：{//指定按钮及其返回值
Ok：true，
取消：false
}，
提交：函数（事件，值，消息，formVals）{
//console.log('submit'，event，value，message，formVals）; // DEBUG
if（value）{
console.log（'取消绑定提交事件处理程序并触发提交。 // DEBUG
//注意，您可能希望以后重新绑定事件。
$（'＃myForm'）。off（'submit'）。submit（）; // Submit form
}
}
}）;
console.log（'这是在$ .prompt（）的submit回调之前执行的。 // DEBUG
}）;
Here is what I want to do -
- Display a prompt (using jquery's impromptu) when user clicks on submit button of the main form. The prompt is again a form which has a password field and an Ok and Cancel button.
- The main form (along with the password value, appended to the main form) is posted when User clicks on Ok.
- The form is not submitted if user clicks on Cancel.
Details
I asked a question earlier - jquery form submit() not working inside callback function after preventing normal submit while using impromptu
and was able to successfully implement what I wanted using the native prompt method of javascript. But I want to do the same thing using jquery's impromptu plugin.
Here is the working code using native javascript prompt -
$('#frmAddAdnetworkTemplate').submit(function(event){
promptText = "Password required";
postedPassword = prompt(promptText);
if(postedPassword)
{
$("form#frmAddAdnetworkTemplate").find("input#manage_adnetwork_password").val(postedPassword);
}
else
{
event.preventDefault();
}
});
And here is the code I though so far using impromptu -
$('#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
}
}
But the form gets submitted anyway and I am not sure how to put some kind of callback to prevent submission until responds to the impromptu prompt. It does not wait like in case of the naive prompt of javascript.
Also, note that I have already tried using event.preventDefault in the beginning and form.submit() later in my earlier question jquery form submit() not working inside callback function after preventing normal submit while using impromptu. But in that case the form just does not submit (no javascript error displayed). Please see if you can answer that.
The first thing to notice is that you´ve named your submit button "submit". This corresponds with form.submit and making you unable to submit the form.
The most common mistake made when defining the form HTML that a script will interact with follows from the existence of the shortcut accessors for form controls. It is to give the control a NAME (or possibly ID) that corresponds with an existing property of FORM elements. And the most common example of that is an INPUT element of type="submit" with the NAME "submit". Because the named controls are made available as named properties of the FORM element this INPUT element is made available under the property name "submit". Unfortunately FORM elements already have a property with the name "submit", it is the submit method that can be used to submit the form with a script.
Source: http://stackoverflow.com/a/3553600/896341
You´re even using the plugin Impromptu wrong and should not pass anonymous functions as button values.
Also notice that the submit event handler function completes before the submit callback function of $.prompt().
This example demonstrates the execution flow and how you can prevent the form from submitting.
$('#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
});
这篇关于如何在表单的submit事件侦听器中放置回调等待用户对jquery impromptu的提示的响应？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
