button that works with either click or pressing enter

Question

I have only been able to get a button to work by creating 2 seperate events:

 $('#loginSubmit').click (function () { var userName = $('#userName').val(); var password = $('#password').val(); event.preventDefault(); $.ajax({ type: "POST", url: "auth.php", data:"userName="+userName+"&password="+password, success: function(result) { //$('#mainBody').html(result); window.location.replace('chooseGroup.php'); } }) }); $('input').keypress(function(event) { if (event.which == 13) { var userName = $('#userName').val(); var password = $('#password').val(); event.preventDefault(); $.ajax({ type: "POST", url: "auth.php", data: "userName="+userName+"&password="+password, success: function(result) { //$('#mainBody').html(result); window.location.replace('chooseGroup.php'); } }) } }) });

html:

 <div class='Lrow'><input type='button' id='loginSubmit' value='Login'></div>

i know there is probably a better way. Id love to hear it. In any event, in the keypress function "event" is undefined if i use mozilla browser. this works fine in chrome. Any thoughts?

Is this actually in a form? Why not handle the submit event of a form instead of the click of a button? — Evan Davis
– Evan Davis, Commented Jan 17, 2014 at 18:47
That's strange, I've always assumed hitting enter fires the click event, and a fiddle shows it does -> jsfiddle.net/cpr27 — adeneo
– adeneo, Commented Jan 17, 2014 at 18:48
@MillerKoijam - You have to preventDefault first & write the submit handler. — Venkata Krishna
– Venkata Krishna, Commented Jan 17, 2014 at 18:48

epascarello · Accepted Answer · 2014-01-17 18:57:47Z

Put the common code into a function.

var mySubmitFunction (event) { //the code } $('#loginSubmit').on("click", mySubmitFunction ); $('input').keypress(function(event){ if (event.which == 13) { mySubmitFunction(event); } });

BUT there is a better way without listening to clicks/enter key. The better way is to let the form do what it wants.

Forms will submit on enter when you write it correctly. You just to add a submit button and an onsubmit event. You cancelling the submission there and make your Ajax call. Set the button type to submit and it should work. Bonus is if JS is disabled, form still submits to the server.

$("#YourForm").on("submit", function(event){ /* code here */ });

seems tidier then what i have, which i will use. Thanks. however, how does this handle the press enter event?
There you go. Handling the button instead of the form itself is almost always the wrong approach.
No, I did! My "there you go" was in response to you updating to handle the submit. It accompanied my upvote. Apparently I am a poor communicator today!
I had too much coffee, new machine, had to try all the new options. So maybe I should read. lol
Using the submit event is the proper way to do this if it's a form, but it still doesn't explain why two event handlers would be needed, the click handler should fire just fine with the enter key.

Merlin · Accepted Answer · 2014-01-17 18:51:25Z

Put your code in a function Eg: ajaxSubmit() then use jquery on to call your function

function ajaxSubmit(){ var userName = $('#userName').val(); var password = $('#password').val(); event.preventDefault(); $.ajax({ type: "POST", url: "auth.php", data: "userName="+userName+"&password="+password, success: function(result){ //$('#mainBody').html(result); window.location.replace('chooseGroup.php'); } }); } $('#loginSubmit').on("click", ajaxSubmit ); $('#loginSubmit').on("click", function(event){ if (event.which == 13) { ajaxSubmit(event); } });

Shhade Slman · Accepted Answer · 2014-01-17 19:02:56Z

On method takes one or more params as event name as the following:

$('#loginSubmit').on("click keypress", function(event){ if (event.type == "keypress" ) { if(event.which == 13) { put your code here or call function } } else//click event { put your code here or call function } });

Collectives™ on Stack Overflow

button that works with either click or pressing enter

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related