jQuery form Plugin and Return Key Submit

On April 16, 2009, in Javascript, by Anuj Gakhar

I have been using this excellent jQuery Form Plugin lately and I came across a little gotcha today. First of all, this jQuery Form Plugin allows you to easily and unobtrusively upgrade HTML forms to use AJAX. The main methods, ajaxForm and ajaxSubmit, gather information from the form element to determine how to manage the submit process. Both of these methods support numerous options which allows you to have full control over how the data is submitted.

So, I had this code to submit my form :-

[javascript]
var options = {
success: showResponse  // post-submit callback
};

$(‘.btnLogin’).click(function(){
$(‘.frmLogin’).ajaxSubmit(options);
return false; // prevent default behaviour
});

// post-submit callback
function showResponse(responseText, statusText)  {
if(jQuery.trim(responseText) == "Success"){
window.location.href = ‘home/index.html’;
} else {
$(‘.loginStatus’).html(responseText);
}
}
[/javascript]

This code is for a simple login form. As is obvious, this code attaches the click event to a Button and then submits the form whenever the button is clicked. The submit is done using the Form Plugin and the response is handled by the ‘showResponse’ function, which checks the response from the server. If successful, it reloads the browser, otherwise it updates the DOM with the error message from the server. Nothing fancy there!

Now, the weird behaviour was that if you use the ‘Return’ Key to submit your form, instead of pressing the button, it would not use the AJAX form, but simply go to the action page as if it were a normal form. And to make things worse, it was in-consistent across all browsers. It was only happening in Safari and Chrome and not happening in IE and Firefox. I did not test any other browsers.

I did not know what the issue was, to be honest, but I thought, surely, capturing and binding the enter key would solve the problem here. So, I came up with this little code:-

[javascript]
//capture the return key
$(".txtLoginForm").bind("keydown", function(e) {
if (e.keyCode == 13) {
$(‘.frmLogin’).ajaxSubmit(options);
return false; //prevent default behaviour
}
});
[/javascript]

So, I assigned my two text fields (username and password) a class of ‘txtLoginForm’ and captured the enter/return key and then submitted the form using AJAX. That works for me!

I thought this might be useful for someone!

Tagged with:  

11 Responses to jQuery form Plugin and Return Key Submit

  1. If you do it this way (http://pastebin.com/m4cc753cc), You won’t care if they hit the return key or the button.

  2. Anuj Gakhar says:

    @Todd, that would work if I had a submit button in my form. I have an image which needs to trigger the form submit on click.

  3. No, you’re missing my point. Regardless of what triggers the submit, all you care is that the form was submitted.

    That’s what the code catches. Image, Button, Enter Key… it doesn’t care other than the fact that the form was submitted. Only issue then would be is if javascript was turned off.

  4. Anuj Gakhar says:

    Ok, but how would the form submit be triggered on the click of an Image? unless I had input type=’image’ …it wont…

  5. … Uh, you could $(‘img .class’).click(function(){ $(‘#myform’).submit(); }); ? You can make anything can trigger a form. You can make a link trigger a form.

    That’s not what I was trying to help you with. I was trying to let you know that you don’t need to capture the “enter” key because all you care about is the attempt to submit a form.

  6. Anuj Gakhar says:

    Thats exactly what I did in my example , Todd.

    $(‘.btnLogin’).click(function(){
    $(‘.frmLogin’).ajaxSubmit(options);
    return false; // prevent default behaviour
    });

    However, what you are suggesting would mean I will have to do the above and the .submit() binding as well. which is the same as the extra step of listening to the enter key, I think.

    Thanks for the suggestion though. I think instead of using the ajaxSubmit(), if you just use ajaxForm() , that handles this as well. That just doesnt fit my situation as I have to validate before submit as well.

  7. Understood, but back up a sec. Let the buttons/links/images worry about submit() and let form submit() worry about ajaxSubmit().

    Instead of trying to focus on what could possibly trigger the ajaxSubmit(), let the form worry about it. Your forms will be much more flexible if you do.

    I guess that’s my .02 cents. I wasn’t trying to pick a fight or anything. You solved your issue, I was just trying to present another option.

  8. Anuj Gakhar says:

    Hey, I didnt know we were fighting:)

    And yes, I agree to your alternative. It kinda makes sense to let anything trigger form submit and then the submit handler to worry about ajaxSubmit(). I could change that in my code.

  9. Mujtaba says:

    hi!!!
    I am also using the form plugin for a contact form for my upcoming site…
    Today i ran into a problem which has left me exhausted and searching for help…
    Since my form is dynamically added i am binding the ajaxForm to my form using live()
    here is the code:
    $(“#submit-button”).live(“click”,function(){
    $(“#form”).ajaxForm(options);
    });
    i am using beforeSubmit and Success to alert mesages stating “about to submit” and “submitted successfully” and the target value is set to #status
    but the problem is , when the submit button is clicked for the first time i get both the messages from beforeSubmit and success, but nothing is sent to the server script and my status div becomes empty!!! But when u click the submit button second time it works!!! I’ve tried everything…I even tried ajaxSubmit instead of ajaxForm but that only messes up more!!!
    Can u give any suggestions??? Plz.

  10. Karl says:

    Thanks for the suggestion though. I think instead of using the ajaxSubmit(), if you just use ajaxForm() , that handles this as well.
    how to change your life

Leave a Reply to Todd Rafferty Cancel reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

© 2011 Anuj Gakhar
%d bloggers like this: