PHP Code Returns Its Script and Doesn't Work in JQuery Ajax

Question

I would like to do a web site using Aptana IDE and xampp, and it has a few pages. Index page is where all users which does not log in the system and home is where all users which does log in the system must visit. I am very new to develop web site.

I decided to use Ajax for log in sign up pages. It was actually works properly. But now I do not know why it does not.

In my login.html page

<form id="login-form" class="text-left" method="post">
                <div class="main-login-form">
                    <div class="login-group">
                        <div class="form-group">
                            <label for="lg_username" class="sr-only">Username</label>
                            <input type="text" class="form-control" id="lg_username" name="username" placeholder="username"
                                   data-container="body" data-toggle="popover" data-placement="left" data-content=""
                                   value="">
                        </div>
                        <div class="form-group">
                            <label for="lg_password" class="sr-only">Password</label>
                            <input type="password" class="form-control" id="lg_password" name="password" placeholder="password" 
                                   data-container="body" data-toggle="popover" data-placement="left" data-content="">
                        </div>
                        <div class="form-group login-group-checkbox">
                            <input type="checkbox" id="lg_remember" name="lg_remember">
                            <label for="lg_remember">remember</label>
                        </div>
                    </div>
                    <button type="submit" class="login-button">Submit</button>
                </div>
            </form>

and form validate with JQuery validation

$(document).ready(function () {
        $('#login-form').validate({
    rules: { //rules goes here},
    messages: { //messages goes here},
    submitHandler: submitForm
});

It works correctly. All my rules are implemented.

submit function:

function submitForm(){
            var username = $('#lg_username').val();
            var password = $('#lg_password').val();
            var checkbox = $('#lg_remember').is(":checked");

            var strAjax = "username=" + username + "&password=" + password + "&checkbox=" + checkbox;
            alert(strAjax);
            $.ajax({
                type: 'POST',
                url: 'loginAjax.php',
                data: strAjax,
                cache: false,
                success: function(data) {
                    alert(data);
                    if(data == "1") {
                        window.location.href = "home.php";
                    }
                    else {
                        //Error messages
                    }
                }
            });
            return false;
            }

loginAjax.php file:

<?php
require_once 'dbcon.php';
session_start();

$username = mysql_real_escape_string($_POST["username"]);
$password = mysql_real_escape_string($_POST["password"]);

$sql = "SELECT * FROM tbl_user WHERE userName = '$username' AND password = '$password'";

$result = mysql_query($sql);
$count = mysql_num_rows($result);
$row = mysql_fetch_array($result);

if($count == 1){
    if($_POST['checkbox'] == TRUE) {
        if(!isset($_COOKIE['name'])) {
            setcookie( 'name', $row['userName'], time() + (86400 * 30) );
        }
    }
    $_SESSION['user_session'] = $row['userName'];
    echo TRUE;
}
else {
    echo FALSE;
}
?>

dbcon.php file connect to mysql database. I try to control is it enter the ajax method or what is returning from php file with alert. strAjax seems correct but alert(data) show my php code like this;

php returns this

I change login file as php file instead html. But the problem is not about it. All my ajax codes get data from php something like that. In my computer php files run normally. If you need more information I can edit my post. Why this ajax conk?

Actually it is not. Starts with 127.0.0.1:8020 instead of localhost — kimdirbilmem
– kimdirbilmem, Commented Feb 15, 2016 at 7:13
when I changed its as localhost it is fixed. OMG you re awesome! Thank you — kimdirbilmem
– kimdirbilmem, Commented Feb 15, 2016 at 7:21

Matt Magallo · Accepted Answer · 2016-02-15 07:02:40Z

2

var formData = {
    'username'              : $('input[name=username]').val(),
    'password'             : $('input[name=password]').val(),
    'lg_remember'    : $('input[name=lg_remember]').val()
};

// process the form
$.ajax({
    type        : 'POST', // define the type of HTTP verb we want to use (POST for our form)
    url         : 'process.php', // the url where we want to POST
    data        : formData, // our data object
    dataType    : 'json', // what type of data do we expect back from the server
                encode          : true
})

Try this one instead

answered Feb 15, 2016 at 7:02

Matt Magallo

3261 silver badge20 bronze badges

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

1 Comment

kimdirbilmem Over a year ago

I've changed as you said. When I do all of thing, it does not submit, and when I just use formData I get same result

Mr. Engineer · Accepted Answer · 2016-02-15 06:47:27Z

1

Problem is your ajax code. You are using POST method and passing parameter as query string. You just need to use serialize() for passing data.

Just change your ajax code with this :

$.ajax({
                type: 'POST',
                url: 'loginAjax.php',
                data: $('#login-form').serialize(),
                cache: false,
                success: function(data) {
                    alert(data);
                    if(data == "1") {
                        window.location.href = "home.php";
                    }
                    else {
                        //Error messages
                    }
                }
            });

And just remove strAjax variable, it's not required.

Side note : Please dont use mysql_*. It is deprecated and removed from PHP 7. Use mysqli_* or PDO

answered Feb 15, 2016 at 6:47

Mr. Engineer

3,5254 gold badges20 silver badges34 bronze badges

4 Comments

Mr. Engineer Over a year ago

Please put exit at the end of your PHP file.

Mr. Engineer Over a year ago

It looks like there is something wrong with your configuration.

kimdirbilmem Over a year ago

What can I do to solve this problem. Can you say anything that I can try?

Mr. Engineer Over a year ago

Refer this : stackoverflow.com/questions/5121495/… and see the accepted answer.

Matt Magallo · Accepted Answer · 2016-02-15 06:52:40Z

1

try to use data: $("#login-form").serialize() on your ajax function

answered Feb 15, 2016 at 6:52

Matt Magallo

3261 silver badge20 bronze badges

Comments

madalinivascu · Accepted Answer · 2016-02-15 07:18:16Z

1

Add this to your loginAjax.php on the second line

 header('Content-Type: application/json');

note: your url should be:

url         : 'loginAjax.php',

answered Feb 15, 2016 at 7:18

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

Comments

kimdirbilmem · Accepted Answer · 2016-02-15 07:25:41Z

0

I have figured out. Previously I try to connect with http://127.0.0.1:8020/. When I changed this as localhost all problem has gone. Thank you all I appreciate all your efford.

answered Feb 15, 2016 at 7:25

kimdirbilmem

611 silver badge7 bronze badges

Comments

Matt Magallo · Accepted Answer · 2016-02-15 07:35:33Z

<html>
<head>
    <title></title>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('#login-form').on("submit", function(){
       $.ajax({
            type: 'POST',
            url: 'loginAjax.php',
            data: $("#login-form").serialize(),
            success: function(data) {
                alert(data);
                // if(data == "1") {
                //     window.location.href = "home.php";
                // }
                // else {
                //     //Error messages
                // }
            }
        });
       return false;
    });
});
</script>
<form id="login-form" class="text-left" method="post">
                <div class="main-login-form">
                    <div class="login-group">
                        <div class="form-group">
                            <label for="lg_username" class="sr-only">Username</label>
                            <input type="text" class="form-control" id="lg_username" name="username" placeholder="username"
                                   data-container="body" data-toggle="popover" data-placement="left" data-content=""
                                   value="">
                        </div>
                        <div class="form-group">
                            <label for="lg_password" class="sr-only">Password</label>
                            <input type="password" class="form-control" id="lg_password" name="password" placeholder="password"
                                   data-container="body" data-toggle="popover" data-placement="left" data-content="">
                        </div>
                        <div class="form-group login-group-checkbox">
                            <input type="checkbox" id="lg_remember" name="lg_remember">
                            <label for="lg_remember">remember</label>
                        </div>
                    </div>
                    <button type="submit" class="login-button">Submit</button>
                </div>
            </form>
</body>
</html>

try the whole page i just print_r() the result in php since you are using $() of jQuery i presume that you include the jQuery lib already, cheers bro. try to use the code in a sample page.

I thank you. I figured out what is the problem. When I changed from 127.0.0.1:8020 to localhost, then fixed the problem

Collectives™ on Stack Overflow

PHP Code Returns Its Script and Doesn't Work in JQuery Ajax

6 Answers 6

1 Comment

4 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

4 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related