CODEWITHSUNDEEP
javascriptphpjqueryajax
Oke Tega
Oke Tega

Reputation: 883

Ajax script not function

I have a request with ajax that still loads the php script instead of performing its function without refreshing. Am guessing there is an issue with my ajax Below is anything wrong with the ajax script

HTML

<form action='connect_exec.php' method='post' id='connect_form' enctype='multipart/form-data'>
    <input type='text' name='conn_id' id='conn_id' value='$ad_id'>
    <input type='submit' name='connect' class='conn_text' id='connect' value='connect +'>
</form>

Ajax request

$('#connect_form').submit(function(e) {
    e.preventDefault();
    var ad_id = $('#conn_id').val();
    $.ajax({
        type: "POST",
        url: "connect_exec.php",
        data: ad_id
    }).done(function(response) {
        console.log(response);
    }).fail(function(data) {
        console.log(data);
    });
});

PHP SCRIPT

require_once("db.php");
$db = new MyDB();
session_start();
if (isset($_POST['connect'])) {
    $my_id = $_SESSION['log_id'];
    $ad_id = $_POST['conn_id'];
    $rand_num = rand();
    $hsql = <<<EOF
    SELECT COUNT(hash) as count FROM connect WHERE(user_one = '$my_id'
        AND user_two = '$ad_id') OR(user_one = '$ad_id'
        AND user_two = '$my_id');
    EOF;
    $hret = $db->querySingle($hsql);
    if ($hret == 1) {
        $response = "Your are already connected to '$ad_id'";
    } else {
        $csql = <<<EOF
        INSERT INTO connect(user_one, user_two, hash) VALUES('$my_id', '$ad_id', '$rand_num');
        EOF;
        $cret = $db - > exec($csql);
        if (!$cret) {
            echo "Error connecting to '$ad_id'";
        } else {
            echo "Successful";
        }
    }
}

The form executes but not without refreshing the page. Please what is the issue with the ajax?

Upvotes: 0

Views: 57

Answers (2)

Mihai Alexandru-Ionut
Mihai Alexandru-Ionut

Reputation: 48367

I recommend you to send form data serialized, using serialize() method.

Also, use submit event for form: $('form').on('submit', function (e) {}

$('form').on('submit', function (e) {
    e.preventDefault();
    $.ajax({
        type: "POST",
        url: "connect_exec.php",
        data: $('form').serialize()
    }).done(function(response) {
        console.log(response);
    }).fail(function(data) {
       console.log(data);
    });
});

Upvotes: 1

Sagar V
Sagar V

Reputation: 12478

$('#connect').click(function(e) {
        e.preventDefault();
        var ad_id = $('#conn_id').val();
        console.log(ad_id);

        $.ajax({
            type: "POST",
            url: "connect_exec.php",
            data: ad_id
        })
        .done(function (response) {
           console.log(response);
        })
        .fail(function (data) {
           console.log(data);
        });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='connect_exec.php' method='post' id='connect_form' enctype='multipart/form-data'>
        <input type='text' name='conn_id' id='conn_id' />
        <input onclick="return;" type='submit' name='connect' class='conn_text' id='connect' value='connect +'>
        </form>

Upvotes: 0

Related Questions