Ajax login not working on enter key

Question

I have a login form in PHP which works on ajax, it works very well when i click on the login button, but not on pressing the enter key.

I did a lot of research on it and tried all the solutions posted on this site regarding the same and tried out all the solutions, but nothing is working for me.

My HTML is wrapped in a div id ="mini-login"

<div class="content-login">
<h4>Email Address:</h4>
<input type="text" name="email" value="" />
<h4>Password:</h4>
<input type="password" name="password" value="" id="pasword"/>
<br />
<a href="<?php echo $forgotten; ?>"><?php echo $text_forgotten; ?></a><br />
<br />
 <input type="button" value="<?php echo $button_login; ?>" id="button-login-mini" class="button" />

And my script-

$('#button-login-mini').live('click', function() {
$.ajax({
url: 'index.php?route=module/login/validate',
type: 'post',
data: $('#mini-login .content-login :input'),
dataType: 'json',
beforeSend: function() {
  $('#button-login-mini').attr('disabled', true);
  $('#button-login-mini').after('<span class="wait">Please wait</span>');
},  
complete: function() {
  $('#button-login-mini').attr('disabled', false);
  $('.wait').remove();
},        
success: function(json) {
  $('.warning, .error').remove();
  if (json['redirect']) {
    $('#mini-login .content-login').fadeOut('slow');
    location = json['redirect'];
  } else if (json['error']) {
    $('#mini-login .content-login').prepend('<div class="warning" style="display: none;">' + json['error']['warning'] + '</div>');

    $('.warning').fadeIn('slow');
  }
},
error: function(xhr, ajaxOptions, thrownError) {
  alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
}
}); 
});

So the above is working very well, but i tried to call it on enter key using- keyup, keydown, keypress and checking the keyCode==13, but it did not work, tried using forms as well, now going nuts over this!!! what am i doing wrong?? and how to make it work??

Note: The login page is not an entire document, it slides down on clicking login link on home page.

This is how the login page is called-

$(document).ready(function() {
$('#mini-login > .heading-login a').live('click', function() {
    $('#mini-login').addClass('active');

    $('#mini-login').load('index.php?route=module/login #mini-login > *');

    $('#mini-login').live('mouseleave', function() {
        $(this).removeClass('active');
    });
});
});

http://stackoverflow.com/questions/699065/submitting-a-form-on-enter-with-jquery — Prasanth Bendra, Mar 25 '13 at 05:37

alwaysLearn · Accepted Answer · 2013-03-25T07:19:20.940

2

try this

 $(document).ready(function() {
$('#mini-login > .heading-login a').live('click', function() {

 $(document).bind('keydown', function(e){         
    if (e.which == 13){
       $('#button-login-mini').trigger('click');   
   }     
      });


$('#mini-login').addClass('active');

$('#mini-login').load('index.php?route=module/login #mini-login > *');

$('#mini-login').live('mouseleave', function() {
    $(this).removeClass('active');
    $(document).unbind('keydown');
});
});
});

edited Mar 25 '13 at 07:19

answered Mar 25 '13 at 05:41

alwaysLearn

6,882
7
39
67

It works, but it throws login error everytime i press enter, no matter whether i'm trying to login or not. It is submitting the form even if i'm not trying to login!! – ShoibAhamed Mar 25 '13 at 05:48
your login div will be hidden until you press login button right .. ? – alwaysLearn Mar 25 '13 at 05:59
just edited my code .. try if it helps you .... – alwaysLearn Mar 25 '13 at 06:01
check now ... tell me if error still pesists ... – alwaysLearn Mar 25 '13 at 06:07
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/26840/discussion-between-new-developer-and-razor) – alwaysLearn Mar 25 '13 at 06:12

score 1 · Answer 2 · answered Mar 25 '13 at 05:38

1

Heres a code snippet i use with jQuery

            $(".login").keyup(function(event){
                if(event.keyCode == 13){
                    $("#loginBtn").click();
                }
            });

keyCode 13 = enter key the #loginBtn is the ID i attached to the button itself that calls th onClick and the .login is just the div class its held in.

hope this helps

answered Mar 25 '13 at 05:38

NodeDad

1,519
2
19
48

My input field is not responding to enter key, i tried a simple alert, but doesnt work!! – ShoibAhamed Mar 25 '13 at 05:41
Give me a minute to look into your code further. – NodeDad Mar 25 '13 at 05:43
I noticed that with my snippet on my application it doesnt want to work either with me when i press enter when inside a password field. Is it the same for you too or is it for any field? – NodeDad Mar 25 '13 at 05:48
Well i just tried Bipen answer bellow and that one worked for me alot better then mine did for myself Lol.. go figure. Go Bipen! lol... sorry about that Razor. Hopefully you get it figured out. – NodeDad Mar 25 '13 at 05:50
I have many search fields on my document and they all work fine on keyup or keydown and keycode==13, but its only the input fields in login which are not working!! – ShoibAhamed Mar 25 '13 at 05:51
do you have any firebug console or google chrome browser to check for errors? I really dont see anything wrong with your code. And i just tried mine again, and it actually did work, i even simulated your code. Maybe if you an get a JSFiddle i can just get it working and comment where i made the changes. Without simulating your code exactly i dont think i am much of help. Im kind of new to this as well. – NodeDad Mar 25 '13 at 06:04
I have updated my question. Please have a look at it. – ShoibAhamed Mar 25 '13 at 07:12

score 1 · Answer 3 · answered Mar 25 '13 at 05:40

1

use trigger to trigger the click event when pressed enter....

try this

  $(document).keypress(function(event){  // i called a clicked event in document here you can chnage it to any other event like.. input field keyup event or so....
   var keycode = (event.keyCode ? event.keyCode : event.which);
   if(keycode == '13'){
     $('#button-login-mini').trigger('click');   
   }

});

and use on() instead of live

$(document).on('click', '#button-login-mini',function() {....

closest static parent is preffered than document in on.... which in your case is #content-login i think

answered Mar 25 '13 at 05:40

bipen

36,319
9
49
62

This gives same results as the solution given by new_developer above, no matter in which page i'm in, it is submitting the login form and giving login error even if i dont want to login – ShoibAhamed Mar 25 '13 at 05:57
on top of that it is messing up with my search fields!! – ShoibAhamed Mar 25 '13 at 05:58
I have updated my question. Please have a look at it. – ShoibAhamed Mar 25 '13 at 07:11

Joseph Caracuel · Answer 4 · 2013-03-25T06:29:00.197

you could actually call the event when you press enter in your email textbox or password textbox:

put your ajax code on a function and call it on your events:

function login(){
    $.ajax({
    url: 'index.php?route=module/login/validate',
    type: 'post',
    data: $('#mini-login .content-login :input'),
    dataType: 'json',
    beforeSend: function() {
      $('#button-login-mini').attr('disabled', true);
      $('#button-login-mini').after('<span class="wait">Please wait</span>');
    },  
    complete: function() {
      $('#button-login-mini').attr('disabled', false);
      $('.wait').remove();
    },        
    success: function(json) {
      $('.warning, .error').remove();
      if (json['redirect']) {
        $('#mini-login .content-login').fadeOut('slow');
        location = json['redirect'];
      } else if (json['error']) {
        $('#mini-login .content-login').prepend('<div class="warning" style="display: none;">' + json['error']['warning'] + '</div>');

        $('.warning').fadeIn('slow');
      }
    },
    error: function(xhr, ajaxOptions, thrownError) {
      alert(thrownError + "\r\n" + xhr.statusText + "\r\n" + xhr.responseText);
    }
    }); 
}

$document.ready(function(){
$('#button-login-mini').on('click', function() {
  login();
});
$('input[name="email"],input[name="password"]').bind('keypress',function(e){
    var code = (e.keyCode ? e.keyCode : e.which);
    if(code == 13) {
      login();
    }
  });
});

With this, neither click works nor enter key – ShoibAhamed Mar 25 '13 at 06:14 — ShoibAhamed, Mar 25 '13 at 06:14
I have updated my question. Please have a look at it. – ShoibAhamed Mar 25 '13 at 07:12 — ShoibAhamed, Mar 25 '13 at 07:12

Ajax login not working on enter key

4 Answers4