Cannot trigger action on click event with jquery

Question

I have a basic login page with "login" and "password" input and a "login_button" submit. For a reason I do not find, I cannot trigger the ajax request when cliking on the login_button.
I came up with the following (simple) code using jquery:

$(document).ready(function(){
  // Perform login
  function log_in(login,password){
    alert("log_in"); // this is never triggered
    $.ajax({
    url : '/api/login',
    type : 'GET',
    dataType : 'json',
    data: 'login=' + login + '&password=' + password,
    success : function(data, status, jqXHR){
      alert("success");
      alert(JSON.stringify(data));
      alert(JSON.stringify(status));
      alert(JSON.stringify(jqXHR));
    },
    error : function(jqXHR, status, err){
      alert("error");
      alert(JSON.stringify(jqXHR));
      alert(JSON.stringify(status));
      alert(JSON.stringify(err));
    },
    complete : function(jqXHR, status){
      alert("complete");
      alert(JSON.stringify(jqXHR));
      alert(JSON.stringify(status));
    }
    });
  }

  // Add event on login button
  $('#login_button').click(function(){
    alert("click"); // this is triggered
    login    = $('#email').val();
    password = $('#password').val();
    log_in(login, password);
  });
});

Any idea of what I'm missing ?

EDIT

The form is a simple bootstrap form:

<form class="form-signin">
  <h2 class="form-signin-heading">Please sign in</h2>
  <input id='email' type="text" class="input-block-level" placeholder="Email address">
  <input id='password' type="password" class="input-block-level" placeholder="Password">
  <label class="checkbox">
    <input type="checkbox" value="remember-me"> Remember me
  </label>
  <button id='login_button' class="btn btn-large btn-primary" type="submit">Signin</button>
</form>

EDIT 2

Adding 'return false;' actually fixed the thing:

// Add event on login button
$('#login_button').click(function(){
  alert("click"); // this is triggered
  login    = $('#email').val();
  password = $('#password').val();
  log_in(login, password);
  return false;
});

Is your login button in a form that happens to submit when you click on the button? — Blender
– Blender, Commented Jun 16, 2013 at 19:27
Is the form being submitted? Or is the button doing nothing at all? Post the html form. — David Nguyen
– David Nguyen, Commented Jun 16, 2013 at 19:29
try adding return false; as the form probably refreshes the page — jacek_podwysocki
– jacek_podwysocki, Commented Jun 16, 2013 at 19:30

Shenron · Accepted Answer · 2013-06-17 08:47:42Z

2

If you want to keep native comportment (without JS, but with button submit) you must add action in your form and named input

<html>
    <form class="form-signin" action="/api/login" method="GET">
        <input name="email" id='email' type="text" class="input-block-level" placeholder="Email address">
        <input name="password" id='password' type="password" class="input-block-level" placeholder="Password">
        <button id='login_button' class="btn btn-large btn-primary" type="submit">Signin</button>

    </form>
</html>

And for browser which support JS you must kill native submit

$('#login_button').click(function(e){
    e.preventDefault();
    alert("click"); // this is triggered
    login    = $('#email').val();
    password = $('#password').val();
    log_in(login, password);
 });

edited Jun 17, 2013 at 8:47

answered Jun 17, 2013 at 8:37

Shenron

234 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jacek_podwysocki · Accepted Answer · 2013-06-17 12:19:02Z

1

You should add return false; or preventDefault(); to your script to prevent the page from reloading as form submitting does that by default.

The difference between these two is that you can add preventDefault(); at the beginning of the handler which will surely work while having return false; at the end may not be reached by the interpreter at some point.

answered Jun 17, 2013 at 12:19

jacek_podwysocki

80711 silver badges30 bronze badges

Collectives™ on Stack Overflow

Cannot trigger action on click event with jquery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest