Specifying a PHP function from a button click in 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?

@Pepo_rasta is not a typo. Actual is correct. – Alex Char Dec 02 '15 at 11:14 — Alex Char, Dec 02 '15 at 11:14

Govinda Rajbhar · Answer 1 · 2015-12-02T11:29:56.603

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

madalinivascu · Answer 2 · 2015-12-02T11:37:26.163

0

First use e.preventDefault(); to prevent the default event of form submit from happening then move all you php to another file and lastly ajax to that file

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

    });

your ajax.php file should look like this:

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

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

function reverse() {
    echo $html->tableCells($evalRevupcoming);
    exit;
}
?>

edited Dec 02 '15 at 11:37

answered Dec 02 '15 at 11:17

madalinivascu

32,064
4
39
55

I have everything all on the ajax.php file, would this not work? – Steven Hsu Dec 02 '15 at 11:20
i think there is still something wrong with my ajax request because i dont ever get the alert – Steven Hsu Dec 02 '15 at 11:33
what does your console say? – madalinivascu Dec 02 '15 at 11:37
im running this code as a web app, im not sure how to run just this file in a console – Steven Hsu Dec 02 '15 at 11:41
the webapp has to run in a browser,doesn't that browser have a developer tool with a console? – madalinivascu Dec 02 '15 at 11:43
it was giving me an error because i was using ajaxurl = 'student_index.ctp' which is my file name, but it looks like it expects http://localhost:2000/ajaxurl? I was under the impression that ajaxurl is the name of the php file you are accessing – Steven Hsu Dec 02 '15 at 11:53
ajaxurl should be the file with the php – madalinivascu Dec 02 '15 at 11:59
from what i can tell you are using cakephp se a simple ajax call here http://stackoverflow.com/a/14771763/4613398 – madalinivascu Dec 02 '15 at 12:05
yes i am, im just trying to figure out a way to specify which php array i want to import into my html, but for some reason nothing is working.. – Steven Hsu Dec 02 '15 at 12:16

Specifying a PHP function from a button click in HTML/Javascript

2 Answers2