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

Try $('#login_form').submit() instead of $('#login').click() — Albzi
– Albzi, Commented May 7, 2014 at 13:20

Samy Massoud · Accepted Answer · 2014-05-07 13:22:55Z

2

Try this

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

answered May 7, 2014 at 13:22

Samy Massoud

4,3852 gold badges37 silver badges50 bronze badges

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

Comments

Nick Manning · Accepted Answer · 2014-05-07 13:22:31Z

0

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

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

etc...

answered May 7, 2014 at 13:22

Nick Manning

2,9791 gold badge36 silver badges55 bronze badges

Comments

epascarello · Accepted Answer · 2014-05-07 13:21:50Z

0

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

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

answered May 7, 2014 at 13:21

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

mohamedrias · Accepted Answer · 2014-05-07 13:33:49Z

0

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

answered May 7, 2014 at 13:33

mohamedrias

18.6k3 gold badges41 silver badges47 bronze badges

Comments

Leniel Maccaferri · Accepted Answer · 2014-05-07 13:34:57Z

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

});

Manwal · Accepted Answer · 2014-05-07 13:25:28Z

-1

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{


});

answered May 7, 2014 at 13:25

community wiki

Manwal

Collectives™ on Stack Overflow

jQuery function does not execute

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related