使用JQuery和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 + "
Error:" + 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?

Answer 1

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 + "
Error:" + err);
    }
});

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