CODEWITHSUNDEEP
phpjqueryajax
meguli
meguli

Reputation: 1526

Responding to a click event using JQuery and PHP

I need to monitor the click of a button in my page, when it is clicked I need to fire a POST request. With this request I need to send some course ID to the PHP so that I can delete that course from the database. To achieve this, I did something like this;

I have a table with course details and a button as following,

<table>
<tr><td>Course ID</td>
<td>Course Name</td>
<td>Avail.  Quota</td>
</tr>
<tr><td>CS101</td>
<td>Programming 1</td>
<td> 2 <input style="margin-left: 320px;"  type="button" id="submit" value="Cancel" cid="CS101"/></td>
</tr><tr><td>CS315</td>
<td>Objects</td>
<td>5<input style="margin-left: 320px;"  type="button" id="submit" value="Cancel" cid="CS315"/></td>
</tr></table>

I have a row of course details and a button at the end to delete the course. I have a JQuery like this set up to handle click event;

$(document).ready(function(e) {
$('#submit').on('click', function(event){
    e.preventDefault();
    $('#submit').fadeOut(300);

    $.ajax({
        url: 'del_course.php',
        type: 'post',
        data: {'action': 'delete', 'cid': '11239528343'},
        success: function(data, status) {
            if(data == "ok") {
                // Change page to indicate that deletion was successful
            }
        },
        error: function(xhr, desc, err) {
            console.log(xhr);
            console.log("Details: " + desc + "\nError:" + err);
        }
    });
)};
)};

At this stage, del_course.php is just redirecting to an empty page to see if click is detected. del_course.php is as follows;

<?php
if($_POST['action'] == "delete") {
    $cid = $_POST['cid'];             
    echo (''.$cid.' will be deleted.'); 
    echo "ok";
    header( 'Location: empty.php' );
}
?>

What am I missing here? Nothing happens when I click to that input element. Also, you can see that for this example, I am just hardcoding course ID as cid in AJAX script. How can I pass cid from the input element so that I will pass respective course ID for clicked buttons?

Upvotes: 1

Views: 949

Answers (4)

Hackerman
Hackerman

Reputation: 12305

I'm sure that those last:

)};
)};

Should be:

});
});

To track down your ajax response you can use console.log or something like this:

del_course.php

<?php
if($_POST['action'] == "delete") {
  $cid = $_POST['cid'];             
  echo (''.$cid.' will be deleted.');       
}
?>

Ajax call

success: function(data) {
   alert(data);
}

Upvotes: 2

josh.chavanne
josh.chavanne

Reputation: 329

You are binding to two elements which have the same ID, I suggest switching the buttons to classes and then using proper scoping through the 'this' object. 

$('.submit').on('click', function(event){
e.preventDefault();
$(this).fadeOut(300);

$.ajax({
    url: 'del_course.php',
    type: 'post',
    data: {'action': 'delete', 'cid': '11239528343'},
    success: function(data, status) {
        if(data == "ok") {
            // Change page to indicate that deletion was successful
        }
    },
    error: function(xhr, desc, err) {
        console.log(xhr);
        console.log("Details: " + desc + "\nError:" + err);
    }
});

and change the buttons to <input style="margin-left: 320px;" type="button" class="submit" value="Cancel" cid="CS101"/>

Upvotes: 2

P Clegg
P Clegg

Reputation: 697

if(data == "ok") {
            // Change page to indicate that deletion was successful
}

The data will not be just 

"ok"

Because of:

echo (''.$cid.' will be deleted.'); 
echo "ok";

See the issue? simple, remove the first echo

Upvotes: 1

NewbornCodeMonkey
NewbornCodeMonkey

Reputation: 198

for this code:

$(document).ready(function(e) {
$('#submit').on('click', function(event){
    e.preventDefault();

You have two event values, I believe you want:

event.preventDefault();

This should properly stop the POST so that you can do it asynchronously with your following AJAX call

Upvotes: 1

Related Questions