Here is what I want to do -
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: https://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
});