jQuery function does not execute

Question

I'm trying to make a login form using Ajax and PHP backend. However, when I click on the submit button, nothing happens other than the modal box closing. I did some testing and it looks like the $("#login").click(function(){ does not even get called. Below is my code. Why is this happening?

Here's my JS code:

$(document).ready(function(){
    // Open login modal when login button is clicked
    $("#login_btn").click(function(){
        $('#login_modal').modal();
    });

    // Submit the login information when the sign in button is clicked
    $("#login").click(function(){ 
        var user=$("#user").val();
        var password=$("#password").val();
        var login_info="user="+user+"&password="+password;

        $.ajax({ 
            type: "POST",
            url: "../php/authentication.php",
            data: login_info, 
            success: function(msg){ 
                var msg=trim(msg);  
                // Redirect user if authentication is successful  
                if(msg == 'OK') { 
                    window.location = '../../action-log.php';
                 } 
                 // Print error message
                 else { 
                     $('#login_response').html(msg);
                 }     
            }     
        });
    }); 
});

Here's the code for the form:

<link type="text/css" rel="stylesheet" media="screen" href="assets/css/css_action-log-login.css">
<script type="text/javascript" charset="utf-8" src="./assets/js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./assets/js/jquery.simplemodal.js"></script>
<script type="text/javascript" charset="utf-8" src="./assets/js/js_action-log-login.js"></script>
<div id="login_modal" style="display: none;">
<div class="heading">Sign In</div>
<div id="login_response"></div>
<form id="login_form" method="post">
<table align="center" style="margin-top: 25px;" border="0">
<tr><td>
<label>Username: </label><br/><br/>
<label>Password: </label>
</td><td>
<input type="text" name="user" id="user" /><br/><br/>
<input type="password" id="password" name="password" />
</td></tr>
<tr><td></td><td align="left">
<input type="submit" name="login" id="login" value="Sign In" class="button blue" />
</td></tr>
</table>
</form>
</div>

Here's authentication.php:

<?php
// Requires
require('./config.inc.php');
require('./functions.inc.php');

// Session
session_start();

// Error messages
$errormsg=array();

// Check if the username field is empty
if(isset($_POST['user']) && !empty($_POST['user'])){
    $user=mysql_real_escape_string($_POST['user']);
} else {
    $errormsg[]='username';
}

// Check if the password field is empty
if(isset($_POST['password']) && !empty($_POST['password'])){
    $password=mysql_real_escape_string($_POST['password']);
} else {
    $errormsg[]='password';
}

// Print error message
if(count($errormsg) > 0) {
    echo 'Please enter your ';
    for($i=0; $i < count($errormsg); $i++){
         echo $errormsg[$i];
         if($i < count($errormsg)-2) echo ', ';
         if($i == count($errormsg)-2) echo ' and ';
     }
} 
// Verify authentication details
else {
    $db = new mysql();
    $salt = "*65'][as'``'fg4";
    $querySQL = ('
        SELECT COUNT(*)

        FROM al_users

        WHERE username = "'.$user.'"

        AND password = PASSWORD("'.$password.$salt.'")
    ');
    $result = mysql_query($querySQL); 
    if(!$result) die(mysql_error()); 
    $row = mysql_fetch_row($result); 
    if($row[0] == 0) {
        echo 'Invalid email or password.';
    } else {
        $_SESSION['name'] = $user;
        echo 'OK';
    }   
}
?>

Answer 1

Try adding event as a parameter and calling prevent default at the beginning.

$("#login").click(function(event){ 
event.preventDefault();

etc...

Answer 2

Try this

 $(document).on('click','#login',function (){
   //Do magic here
});

Answer 3

You are not cancelling the button click so the form is submitting. Cancel the default action with preventDefault()

$("#login").click(function(e){
    e.preventDefault()
    ...

Answer 4

You need to prevent the default function of the submit button.

Here is the jsFiddle

// Submit the login information when the sign in button is clicked
    $("#login").click(function(event){ 
        event.preventDefault();
        var user=$("#user").val();
        var password=$("#password").val();
        var login_info="user="+user+"&password="+password;
        // rest of your code

Hope it's useful to you :)

Answer 5

First I'd recommend checking in Firebug (Firefox) or Developer Tools in Chrome to see if you have any JavaScript error or if any JS file (jQuery) is not loading...

Then, if everything is loaded correctly, try using the <form>'s submit action like this:

$("#login_form").submit(function()
{
     var user=$("#user").val();
     var password=$("#password").val();
     var login_info="user="+user+"&password="+password;

     $.ajax({ 
             type: "POST",
             url: "../php/authentication.php",
             data: login_info, 
             success: function(msg){ 
             var msg=trim(msg);  
             // Redirect user if authentication is successful  
             if(msg == 'OK') { 
                window.location = '../../action-log.php';
             } 
             // Print error message
             else{ 
                 $('#login_response').html(msg);
             }     
         }     
    });

    return false; // Prevents normal form submit since you posted using AJAX

});

Answer 6

Click function is not working because of your input type is submit.

<input type="submit" name="login" id="login" value="Sign In" class="button blue" />
             ^^^^^

First option is change your Button type to Button then perform click function

<input type="button" name="login" id="login" value="Sign In" class="button blue" />

or perform submit event instead of click like:

$("#login_form").submit(function{


});