Submitting HTML form using Jquery Ajax to check login

Question

I am working with jquery ajax , html form , mysql and php. I have some registered users in the database. What I want to do now with the login form is; When someone click the submit button of the login form, serialize the form and make the isset() method true in the php file so that it can receive the sent data from the form. And check it with the database and return the user information but unfortunately its not working for me. Do any one know whats the problem . For now i have commented out the query from php, just to make clear that the form data is not echoing .

Below is the Form

 <form class="login-form" method="post" id="login-form"> <div class="flow-text center-align">LOGIN</div> <div class="input-field col s12 "> <i class="material-icons prefix">account_circle</i> <input id="icon_prefix" name="login_email" type="email" class="validate" required autocomplete="off"> <label for="icon_prefix">Email</label> </div> <div class="input-field col s12"> <i class="material-icons prefix">security</i> <input id="icon_prefix" name="login_pass" type="password" class="validate" required autocomplete="off"> <label for="icon_prefix">Password</label> </div> <div class="input-field col s12"> <button type="submit" name="login_btn" id="lb" class="btn-flat waves-effect waves-blue-grey darken-4 right" > Submit <i class="fa fa-paper-plane"></i> </button> </div> </form> 

Jquery Ajax, serializing the form

 $("#lb").on("click",function(){ $.ajax({ url: "connections.php", method: "post", data: $("#login-form").serialize() + "&checkLogin=true", success: function(r){ console.log(r); } }); }); 

The php file to receive login information

 if(isset($_POST["checkLogin"])) { echo $_POST["login_email"]; echo $_POST["login_pass"]; //$sel_whole_tab = "SELECT * FROM fb_data WHERE user_email='$le' AND user_pass='$lp' "; //$q = $con -> query($sel_whole_tab); //if(mysqli_num_rows($q)>0){ // while($s_r = mysqli_fetch_assoc($q)){$curr_arr = $s_r;} // echo json_encode($curr_arr); //} } 

Answer 1

First you should prevent form submit on click.

$("#lb").on("click",function(){        
    $.ajax({
        url: "connections.php",
        method: "post",
        data: $("#login-form").serialize() + "&checkLogin=true",
        success: function(r){
             console.log(r);
        }
    });  
    return false; // this one
});

It works, I see sent ajax request. Check the fiddle https://jsfiddle.net/ishukshin/npdavsz9/

Answer 2

You could try this.

<script type="text/javascript">
                $("#lb").on("click", function () {

                    alert('ok');

                    $.ajax({
                        url: "connections.php",
                        method: "post",
                        data: $("#login-form").serialize() + "&checkLogin=true",
                        success: function (r) {
                            console.log(r);
                        }
                    });
                });
            </script>

Answer 3

Try this, In your JS

var str = $("#login-form").serializeArray();
$.ajax({  
    type: "POST",  
    url: "connections.php,  
    data: str,  
    success: function(value) {  
            console.log(value);
    }
});