How to put a callback in the submit event listener

Question

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.

Answer 1

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
});

Answer 2

I think you're trying to prevent the default action too early. With your code your clicking cancel - preventing default action, then submitting to submitPasswordPrompt. Why not try sending false for cancel then doing preventDefault logic in your submit function like this:

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

Answer 3

I don't know the plugin but am aware it is an html replacement for browser prompt.

I'm not going to try to rewrite your code, but can see where the process logic could to be changed to make it easier for you.

Remove all the code you have in form submit handler.

Bind a click handler to form submit button and preventDefault on the button so form doesn't submit until later when you tell it to.

Within the plugin logic , if all is OK when user clicks "OK", call $('#frmAddAdnetworkTemplate').submit()

If not "OK" you need to handle that yourself as to what needs to be done by using the plugin methods.