Question

I have jQuery go though all the submit buttons with the class button, and turn them each into an anchor element with the class button.

$("input.button").each(function(i) {

    var anchorButton = $("<a class='"+this.className+"' href='#'>"+this.value+"</a>")



    anchorButton.click(function(eventObject) {

        $(this).blur().prev("input.hidden").click();

        return false;

    });



    $(this)

        .after(anchorButton)

        .addClass("hidden")

        .removeClass("button pill-left pill-center pill-right");

});

I can then style the anchor element with CSS, cross-browser-ly. There’s only one problem. Whenever I press the Enter key on form input elements, the form doesn’t submit. However, if I un-hide the submit button, it works again. In conclusion, I can’t get the Enter/Return key to submit the form unless I have a submit button visible (display != none).

How can I get the form to submit when I press Enter when I have the submit button hidden?

Answer 1

$("input.button").keydown(function(event) {
   if(event.keyCode == 13)
      $("...find the form...").submit();
});

This should work.

If it doesn’t try this:

   $("..find the input button you hide..").css('position', 'absolute')
         .css('top', '-1000px');

This is better than the proposed visibility: hidden solutions since if you set the visibility to hidden the button will still “take up space”.