views:

95

answers:

2

I'm having trouble understanding why a click event binded to the document would be triggered through an 'enter' form submission. Here's the test page I'm looking at:

<html>
<head>
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js'&gt;&lt;/script&gt;
    <script type='text/javascript'>
     $(function(){
      // Form Submission
      $('form').bind('submit', function(event){
       console.log('Submit: ', event);
       return false;
      });
      // Input events
      $('input[type=text]').bind('keyup', function(event){
       console.log('Keyup: ', event);
      }).bind('keydown', function(event){
       console.log('Keydown: ', event)
      });
      // Doc Click
      $(document).click(function(event){
       console.log('Document Click: ', event);
      });
     });
    </script>
</head>
<body>
    <form action='test.html' method='GET'>
     <input type='text'>
     <input type='submit' value='Submit'>
    </form>
</body>
</html>

Any idea's?

+2  A: 

Change type='submit' to type='button'. Tested on IE8 and FF3.5.

Ambrosia
That's a good fix, but why is it happening?
Corey Hart
I deleted it because it works when you want to use enter to submit the form but the submit button doesn't. You can however provide another call to the submission action from the button's onclick event.$('input[type=button]').click(function(){$('form').submit();});However I am not sure why the click event is called for your action, voting up the question to get more answers. If my workaround works for you (with the additional changes in this comment) feel free to vote it up a bit.
Ambrosia
Mm after a little bit more research it seems that the enter key in a form calls the submit button to be pressed which triggers the document click. There won't be a way to avoid this until you change the submit type to something like I have above or a button tag with an onclick event :D
Ambrosia
Do you have a link to that info?
Corey Hart
Just this, not sure how credible it is though, http://kreotekdev.wordpress.com/2007/11/16/disabling-the-enter-key-on-forms-using-javascript/
Ambrosia
It's something, you should include that link within your original answer in case someone else comes across this.
Corey Hart
A: 

The form will submit when you only have 1 field and you hit enter. If you put more than one input field on it it will not do this. This is a browser dependent behavior.

Philip Schlump