0

in my form I have my button like this

<button id="mybutton" type="submit"></button>

I am using query submit to submit the form

 $('#mybutton').click(function()
    {
        $('form#myform').submit();
}

It works for most besides when I hit enter it still submits the form totally by passing the click catch. I changed button type to button 

<button id="mybutton" type="button"></button>

but then it doesn't do anything when I hit enter.

I heard I could use bind or on but not sure how would that help me in this case. Any help will be appreciated EDIT

If I change the button type from submit TO button, then it does not do anything when I press enter. then I have to manually click the button. If I leave the type to submit it submits my forms on enter by passing jquery net.

Asim Zaidi
  • 27,016
  • 49
  • 132
  • 221
  • I said if I change the button type from submit TO button, then it does not do anything when I press enter. then I have to manually click the button. If I leave the type to submit it submits my forms on enter by passing jquery net. – Asim Zaidi Jul 23 '12 at 20:31

5 Answers5

1

You should bind to the submit event of the form if you want it to be triggered when the form submits by either submit button or pressing enter on the last input.

the form:

<form id="myform">

... input fields here ...

<button type="submit">Submit</button>

</form>

js:

$("#myform").submit(function(){
    alert("the form submit event happened!");
    // here you can either prevent the form 
    // from submitting and do an ajax request, 
    // or do nothing and let it submit naturally.
});
Kevin B
  • 94,570
  • 16
  • 163
  • 180
  • 1
    What does didn't work mean? What did you try? The code I gave isn't a complete working sample. – Kevin B Jul 23 '12 at 20:51
1

It won't do anything because it's an button type.

But you can try this to "simulate" it and do submit when pressing enter.

$(document).keypress(function(e) {
   if(e.which == 13) {
       $('form#myform').submit();
   }
});

Just to add something, some people claims that you will write 2 times the code like this:

$(document).ready(function(){

   $(this).keypress(function(e) {
     if(e.which == 13) {
       $('form#myform').submit();
     }
   });

   $('#mybutton').click(function() {
     $('form#myform').submit();
   });  

});​

Isn't much but I will try to do a short way :-)

Oscar Jara
  • 14,129
  • 10
  • 62
  • 94
  • word removed if you mean that. – Oscar Jara Jul 23 '12 at 20:36
  • problem using that is that if I would have to duplicate everything for enter that I have for click. since I want .click and .keypress (enter key only) to behave same way – Asim Zaidi Jul 23 '12 at 20:39
  • I meant that I would have to duplicate all the code I have for click to use with your keypress code...is there a way I can check it with one call?? – Asim Zaidi Jul 23 '12 at 20:47
  • I know but question was just to "simulate" the enter not to short the code. But yeah, as you said @Autolycus will be good to have a short way. I'll try something :-) – Oscar Jara Jul 23 '12 at 20:48
  • fair enough. I will accept your answer. Here is the other question – Asim Zaidi Jul 23 '12 at 21:01
  • http://stackoverflow.com/questions/11620436/how-to-make-this-code-short-for-both-events – Asim Zaidi Jul 23 '12 at 21:01
0

try it as an input tag rather than button? Worth a try

are you trying to make this so if they hit enter it doesn't do anything? only if they actually click it?

to stop a default click:

.click(function(e){
    e.preventDefault();
});
Joel Grannas
  • 2,016
  • 2
  • 24
  • 46
0

To stop the form from submitting inside the click() event, use return false; at the end of the callback.

Matt Bradley
  • 4,395
  • 1
  • 20
  • 13
0

I don't think the issue is live vs bind. It probably has more to do with the fact that you are only creating a handler for the click event.

andyzinsser
  • 2,463
  • 2
  • 18
  • 18