jquery form submit() not working inside callback function after preventing normal submit while using impromptu

Question

I am displaying a password prompt instead of submitting the form when user clicks the submit button of a form. I want the form to submit when the user clicks the "Ok" button of the prompt. I am using jquery impromptu plugin (tried both with Version 3.1 and 4.0.1). I am in a hurry abd not getting what is wrong with my code or am I missing something completely.

Here is my code -

Trial 1
HTML part

<form name="frmAddAdnetworkTemplate" id="frmAddAdnetworkTemplate" action="someAction">
  ...
  ...
  <input id="submit" type="submit" name="submit" value="Submit"  onclick="return promptPassword();" />
</form>

Javascript part

function promptPassword()
{
   /*prepared passwordForm = some html; here */
   $.prompt(passwordForm,{ buttons: { Ok:, Cancel: false , submit: }, callback: submitPasswordPrompt, focus: 1});

   return false; //so as to not submit the form
}

function submitPasswordPrompt(value,m,form)
{
    $("form#frmAddAdnetworkTemplate").submit(); //this does not work - no js error as well
}

But, the form does not submit.

Trial 1.1 Instead of calling submitPasswordPrompt on submit,

function promptPassword()
{
   $.prompt(passwordForm,{ buttons: 
                             { Ok: $("#frmAddAdnetworkTemplate").submit(), //this too does not work
                               Cancel: false }, 
                           focus: 1
                          });

}

Trial 1.2

I tried with preventDefault() -

HTML part

<input id="submit" type="submit" name="submit" value="Submit" onclick="promptPassword(event);"/>

Javascript part

function promptPassword(e)
{
  e.preventDefault();
  $.prompt(passwordForm,{ buttons: { Ok: true, Cancel: false }, submit: submitPasswordPrompt});

  function submitPasswordPromptTest(e, value,m,form)
  {
     if(value)
     {
        $("#frmAddAdnetworkTemplate").submit(); //does not work
     }
  }

Trial 2 I also tried calling the $.prompt inside document document .ready, by binding with click event on the submit button -

HTML part

<input id="submit" type="submit" name="submit" value="Submit" />

Javascript part

$("#submit").click(function(){
   $.prompt(passwordForm,{ buttons: { Ok: $("#frmAddAdnetworkTemplate").submit(), Cancel: false }});
   return false;
});

Got this error when I tried $("#frmAddAdnetworkTemplate").off('submit').submit(); -

e[h] is not a function

Answer 1

Mixing inline Javascript with jQuery functions and events makes it hard to follow.

Your "Trial 1.2" attempt doesn´t work because there are no "event" variable defined in onclick="promptPassword(event);" and the promptPassword() function doesn´t accept any arguments for it. Therefore you´re not able to use e.preventDefault() as e is not defined (as a jQuery object).

However, using jQuery you´re able to bind to the forms submit event to catch all types of submits. i.e when using the Enter key or clicking a submit button.

$(document).ready(function() {
    $('#myForm').submit(function(event) {
        var password = "password",
            promptText = "Password required",
            isAuthenticated = (password == prompt(promptText));

        if (!isAuthenticated) {
            event.preventDefault();
            //console.log("Invalid password");
        }
    });

});

View demo.