Responding to a click event using JQuery and PHP

Question

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?

Use some debugging and check for error messages. With this error description, it could be anything from a server side credential issue to not binding an event to the button in the first place. Narrow it down, please. — GolezTrol
– GolezTrol, Commented Dec 17, 2014 at 19:54
Definitely need to change the usage of several elements with the same ID. — josh.chavanne
– josh.chavanne, Commented Dec 17, 2014 at 20:13

josh.chavanne · Accepted Answer · 2014-12-17 20:12:43Z

2

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"/>

answered Dec 17, 2014 at 20:12

josh.chavanne

3293 silver badges11 bronze badges

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

Comments

Hackerman · Accepted Answer · 2014-12-17 20:14:03Z

2

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

edited Dec 17, 2014 at 20:14

answered Dec 17, 2014 at 20:00

Hackerman

12.3k2 gold badges37 silver badges47 bronze badges

2 Comments

meguli Over a year ago

Sorry about that, I handled those. I am quite new to all these and by the suggestion of the comment above by GolezTrol, I am trying to learn to use Chrome Developer Tools. But do you see anything wrong other than that? By the way, how can I see if the button is bound to an event or not?

meguli Over a year ago

With everyone's help, I am able to successfully bind correct event to the button. But PHP function returns empty string as data when I want to alert it, rather than "ok". Btw, I have changed it to return just "ok", before I was also returning cid as stated in the one of the answers below.

NewbornCodeMonkey · Accepted Answer · 2014-12-17 20:05:34Z

1

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

answered Dec 17, 2014 at 20:05

NewbornCodeMonkey

1982 silver badges13 bronze badges

3 Comments

meguli Over a year ago

I corrected this and other errors posted here but I can't still get it to work. I am trying to trace the call but debugging web apps is quite new to me.

NewbornCodeMonkey Over a year ago

This will likely not fix your issue, but you should not have two elements with the same id. An id is meant to be unique, you should instead make both inputs have class=submit, and call $('.submit').on

NewbornCodeMonkey Over a year ago

I am currently looking for the main issue.

P Clegg · Accepted Answer · 2014-12-17 20:06:38Z

1

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

answered Dec 17, 2014 at 20:06

P Clegg

7072 gold badges5 silver badges18 bronze badges

Collectives™ on Stack Overflow

Responding to a click event using JQuery and PHP

4 Answers 4

Comments

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related