CODEWITHSUNDEEP
javascriptphpjqueryfunctionclick
Oliver
Oliver

Reputation: 19

jQuery function does not execute

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';
    }   
}
?>

Upvotes: 0

Views: 945

Answers (6)

Leniel Maccaferri
Leniel Maccaferri

Reputation: 102378

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

});

Upvotes: 0

mohamedrias
mohamedrias

Reputation: 18566

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 :)

Upvotes: 0

Manwal
Manwal

Reputation: 23816

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{


});

Upvotes: -1

Samy Massoud
Samy Massoud

Reputation: 4385

Try this

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

Upvotes: 2

Nick Manning
Nick Manning

Reputation: 2989

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

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

etc...

Upvotes: 0

epascarello
epascarello

Reputation: 207501

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

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

Upvotes: 0

Related Questions