从按钮中指定PHP函数单击HTML / Javascript

Question

I want to be able to call a specific PHP function by clicking on a button

Right now I have this snippet of code:

<table class='standardtable'>
<tr>
   <th>Event</th>
   <th>Group</th>
   <th>Course</th>
   <th>Due Date</th>
   <th>Due In/<span class='red'>Late By</span></th>
</tr>
<?php
echo $html->tableCells($evalUpcoming);
?>
<?php if (empty($evalUpcoming)):?>
<tr><td colspan="5" align="center"><b> No peer evaluations due at this time </b></td></tr>
<?php endif; ?>

I want to make it so that I can create 2 buttons, forward and reverse, and clicking on the forward button fills up the table cells with evalUpcoming as it already is, and clicking on reverse instead fills up the table cells with evalRevUpcoming.

Based on this post: How to Call a PHP Function on the Click of a Button

Here is what I have tried so far:

<table class='standardtable'>
<tr>
   <th>Event</th>
   <th>Group</th>
   <th>Course</th>
   <th>Due Date</th>
   <th>Due In/<span class='red'>Late By</span></th>
   <input type="submit" class="button" name="forward" value="forward" />
   <input type="submit" class="button" name="reverse" value="reverse" />
</tr>
<script>

    $(document).ready(function(){
        $('.button').click(function(){
            var clickBtnValue = $(this).val();
            var ajaxurl = 'ajax.php',
            data =  {'action': clickBtnValue};
            $.post(ajaxurl, data, function (response) {
                // Response div goes here.
                alert("action performed successfully");
            });
        });

    });
 </script>
<?php
if (isset($_POST['action'])) {
    switch ($_POST['action']) {
        case 'forward':
            forward();
            break;
        case 'reverse':
            reverse();
            break;
    }
}

function forward() {
    echo $html->tableCells($evalUpcoming);
    exit;
}

function reverse() {
    echo $html->tableCells($evalRevupcoming);
    exit;
}
?>
<?php
echo $html->tableCells($evalUpcoming);
?>
<?php if (empty($evalUpcoming)):?>
<tr><td colspan="5" align="center"><b> No peer evaluations due at this time </b></td></tr>
<?php endif; ?>

However, it does not seem to be doing anything, I am not even getting the alert about the action being performed successfully. Can anyone tell me what I am doing wrong?

Also, for the way I intend to do this, will this result in the contents of the table being changed immediately? I'm not too familiar with PHP and HTML so I'm not sure how the page changes as new php code is called.

I am wondering if there is an easier way to do this, i know php code is loaded before, but since it is only populating an html table cant this be done in html somehow?

Answer 1

Try to convert your button click code as below, it may cause a problem because it is inside of table.

$( ".standardtable tbody tr .button" ).on( "click", function() {
        var clickBtnValue = $(this).val();
        var ajaxurl = 'ajax.php',
        data =  {'action': clickBtnValue};
        $.post(ajaxurl, data, function (response) {
            // Response div goes here.
            alert("action performed successfully");
        });
});