Submit form data both on clicking enter and hitting the submit button

Question

Here's a form that I have:

<form class="form-horizontal" id="login-form">
<input name="email" id="email" type="email" size="30" class="span4" placeholder="Email" style="margin-top:20px; margin-left:20px; width: 270px;"/>
<br>
<input name="passwd" id="passwd" type="password" class="span4" placeholder="Password" style="margin-top:10px; margin-left:20px; width: 270px;"/>
<br><br>
<input type="button" id="login" name="login" value="Go" class="btn btn-custom" style="width:30%; margin-left:30px; margin-top:20px"/>
 <br>
 <br>
</form>

Here a ajax call I make using JavaScript to submit the data on clicking the button:

$('#login').click(function(){
    $.ajax({
        url:"script.php",
        type:'POST',
        dataType:"json",
        data: $("#login-form").serialize()
    }).done(function(data){
       //do domething
    });
});

How can I submit the data both by pressing the enter key and clicking on the submit button?

Check this: http://stackoverflow.com/questions/905222/enter-key-press-event-in-javascript — Felipe Pereira, Oct 10 '13 at 12:51

Rajiv Ranjan · Accepted Answer · 2013-10-10T12:57:30.210

4

I have updated code. Create a function and call it on both textbox keypress event and identify submit button then call function and on click event of button.

function submitLogin() {
$.ajax({
    url:"script.php",
    type:'POST',
    dataType:"json",
    data: $("#login-form").serialize()
}).done(function(data){
   //do domething
});
}

$('#email').keypress(function(e) {
if (e.which == '13') {
         submitLogin();
   }
});
$('#passwd').keypress(function(e) {
if (e.which == '13') {
         submitLogin();
   }
});
$('#login').click(function(){
    submitLogin();
});

edited Oct 10 '13 at 12:57

answered Oct 10 '13 at 12:52

Rajiv Ranjan

1,869
1
11
20

1

You should change selectors for elements that have IDs. #email and #passwd are sufficient, no need for tag element in front as there should be only one id per page. – EnterSB Oct 10 '13 at 12:58
1

You could put the if statement in a function, passing in 'e', to reduce some code as well. – Brian Oct 10 '13 at 12:58
Yes, removed element tag before #id – Rajiv Ranjan Oct 10 '13 at 13:01
Have a look at this: http://stackoverflow.com/questions/19297520/submit-form-data-both-on-clicking-enter-and-hitting-the-submit-button-from-a-boo – Anon Oct 10 '13 at 13:46

score 1 · Answer 2 · answered Oct 10 '13 at 12:53

How about to change input type to "submit" and input click event into form submit?

<input type="submit" id="login" name="login" value="Go" class="btn btn-custom" style="width:30%; margin-left:30px; margin-top:20px"/>

JQuery

$('#login-form').submit(function(){
    $.ajax({
        url:"script.php",
        type:'POST',
        dataType:"json",
        data: $("#login-form").serialize()
    }).done(function(data){
       //do domething
    });
});

score 1 · Answer 3 · answered Oct 10 '13 at 12:54

1

You should be able to add keypress function on both email and password fields.

$('#email').keypress(function(e){
    if (e.keyCode == 13) {
    $('#login-form').submit(/*...*/);
    }
}

I gave you example for one field.

answered Oct 10 '13 at 12:54

EnterSB

984
2
10
27

score 1 · Answer 4 · edited Aug 25 '15 at 06:18

1

this is the idea:

$("input").keypress(function(event) {
    if (event.which == 13) {
        event.preventDefault();
        runAjax();
        // or
        // runSubmit();
    }
});

$('#login').click(function(){
    runAjax();
    //or 
    //runSubmit();
});

function runAjax(){
    $.ajax({
        url:"script.php",
        type:'POST',
        dataType:"json",
        data: $("#login-form").serialize()
    }).done(function(data){
       //do domething
    });
}

function runSubmit(){
    $("form").submit();
}

edited Aug 25 '15 at 06:18

Félix Adriyel Gagnon-Grenier

8,422
10
52
65

answered Oct 10 '13 at 12:56

Skid Kadda

482
3
14

Too general to do keypress on input, since it will collect on whole page. Update solution to include only inputs in form. – EnterSB Oct 10 '13 at 12:59

score 1 · Answer 5 · answered Oct 10 '13 at 13:06

Use On method to work on Entering and clicking

 $('#element').on('click keypress', function(event) {
var check = 1; // Default for Click
if (e.keyCode == 13) //When Enter Key is pressed
{
var check = 1;
 }
else
{
 var check = 0; // other keys pressed
}

if (check == 1)
{
 $.ajax({
    url:"script.php",
    type:'POST',
    dataType:"json",
    data: $("#login-form").serialize()
}).done(function(data){
   //do domething
    });
  }
         });

Submit form data both on clicking enter and hitting the submit button

5 Answers5