Ajax script not function

Question

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?

Monitor server side echo statements on console and debug your ajax call that where the execution is gone and where it is taking time etc. — Nitin Dhomse
– Nitin Dhomse, Commented Feb 17, 2017 at 11:54
Not at all. When i click submit, it loads the form action PHP file — Oke Tega
– Oke Tega, Commented Feb 17, 2017 at 11:54
So it ignores your preventDefault, which is why we ask for errors. It should not really post the form with preventDefault there — L L
– L L, Commented Feb 17, 2017 at 11:55
You say at the beginning, the the form is submitted instead of executing the Ajax request. At the end you say that the form executes without refreshing. This sounds confusing and contradictory — Lorenz Meyer
– Lorenz Meyer, Commented Feb 17, 2017 at 11:56

Mihai Alexandru-Ionut · Accepted Answer · 2017-02-17 12:43:19Z

1

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);
    });
});

edited Feb 17, 2017 at 12:43

answered Feb 17, 2017 at 11:55

Mihai Alexandru-Ionut

48.6k14 gold badges106 silver badges132 bronze badges

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

Comments

Sagar V · Accepted Answer · 2017-02-17 11:56:00Z

$('#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>

Collectives™ on Stack Overflow

Ajax script not function

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related