Good solution to the 'preventing default button on form from firing' problem?

Question

I need a solution for the age old problem of a 'default button' firing undesirably. i.e you hit enter in a text box, but there is a submit button on the form that isn't the one you want to fire (or maybe you don't want the form to fire at all).

I'm wondering about the following 'solution'. Slightly hacky but should be reliable as far as I can tell.

Inside the form the FIRST thing is a button which is invisible. Then some jquery to immediately disable it. If you hit enter on the form this button counts as the 'default button' and gets triggered, but does nothing because of the 'return false' event handler.

Solutions I've seen before rely on things like keydown event handlers, or other seemingly complex / hard to test in every browser.

My solution (that I haven't seen before but is probably not unique) seems much simpler and I think pretty reliable. You can even tell if javascript was disabled and someone hit enter because the server will receive this button in the form data.

<form action="/store/checkout" method="post">

    <input id="btnFakeSubmit" name="FakeSubmit" src="/images/pixel.gif"
     style="width:1px; height:1px; position:absolute;" type="image" /> 

        <script> 
            $('#btnFakeSubmit').click(function() {
                return false;
            });
        </script> 

Any advice on this solution - including the best way to hide the button in all browsers.

Answer 1

One thing you could do is:

• Set the submit action to javascript: return false;
• Don't create a submit button
• Create another button that does the sending; it calls a function that changes the action on the form to the real address and then calls submit() on the form object.

e.g. something like this:

<form id="myform" action="javascript: return false">
....
<input type="button" onclick="submit_myform">
...

function submit_myform()
{
   jQuery("#myform").attr("action", "post.php").submit(); //untested
}

This way, there's no way to submit the form other than explicitly hitting this button.

Answer 2

Just a question: Why would you need more than a single submit button and why would you want to hide it in all browsers?

Answer 3

You are (mostly) on the right track. Firstly you need a submit button. This should be the very first submit button in the form:

<input id="dummy" name="dummy" type="submit">

Now hide it:

#dummy { display: none; }

And disable submit:

$(function() {
  $("#dummy").click(function() {
    return false;
  });
});

If you want to cater for people who have Javascript disabled, check to see if there is a POST/GET (as appropriate) variable named "dummy" (as this only gets sent if that submit button is actually pressed). If you receive it just send the form back to the user as is. In most cases it's probably not worth the effort of catering for those with Javascript disabled however.

You can alternatively only allow submission of the form if Javascript is enabled by messing with the action and other methods but (imho) this is perhaps too heavy handed.

Answer 4

<script>
var statusSend = valse;
var checkSend = function(){return statusSend;}
</script>

<form id="myForm" action="/store/checkout" method="post" onSubmit="return checkSend();">
...
<button id="myButton">Send Data</button>
</form>

<script>
$("#myButton").click(function(e){
   e.stopPropagation();
   //check data ok
   statusSend = true;
   $("#myForm").submit();
});
</script>

Answer 5

Here is what I used to fix this problem in an ASP.net project.

<form runat="server" defaultbutton="DoNothing">
        <asp:Button ID="DoNothing" runat="server" Enabled="false" style="display: none;" />