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

enter image description here

Please update your code with the form's `action` parameter to avoid future confusion. — tvanfosson, Mar 05 '12 at 13:38
@tvanfosson - I also tried doing $("#frmAddAdnetworkTemplate").off('submit').submit(); as suggested by you, by switching to jquery 1.7.1, but got some error (attaching screenshot). Will $("#frmAddAdnetworkTemplate").unbind('submit').submit(); mean the same? I tried that too and no success. — Sandeepan Nath, Mar 05 '12 at 13:44
The problem is that you have an input named "submit" in your form. If you name an input "submit" then you can't submit your form with form.submit. Check out the following Stackoverflow Question/answer with a better explanation: http://stackoverflow.com/questions/3553584/cannot-submit-form-with-submit/3553600#3553600 — The Dog, May 25 '12 at 19:35

score 1 · Answer 1 · answered Aug 30 '12 at 23:38

The problem is caused by id="submit" for some reason this gets mixed up with the HTML submit. I had this problem before, and the answer is change the id and the name (to be on the safe side) to something else:

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

score 1 · Answer 2 · edited Oct 16 '12 at 10:43

Use your button id with submit

for my senario

$.prompt(msg, {
    buttons: btns,
    submit: function (v) {
        //this is simple pre submit validation, the submit function
        //return true to proceed to the callback, or false to take 
        //no further action, the prompt will stay open.
    },
    callback: function (e, v, m, f) {
        if (v) {
            $("#MainContent_HiddenFieldIsContinueWithSave").val('1');
            $("#MainContent_buttonSave").submit();
        }
        else { }
    }
});

score 1 · Answer 3 · answered Mar 05 '12 at 15:20

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.

@Stefan... I am sorry, once again, I made a copy mistake while putting the question. The "event" variable was actually defined in my code. I have corrected the same in my code. However, your answer helped me understand that I need not call event.preventDefault() in the beginning every time and and then call form.submit() later depending on some condition. I could instead, just call event.preventDefault() once in the end depending on the condition. Please check this question of mine - http://stackoverflow.com/q/9570592/351903. — Sandeepan Nath, Mar 05 '12 at 16:54

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

3 Answers3

Linked