How to call a PHP function in JavaScript?

Question

I have

index.php

<select id="year_list" name="year_list" onchange="check_year_event('year_list', 'event_list');" > . . .  </select>

<select id="event_list" name="event_list" onchange="check_year_event('year_list', 'event_list');" > . . . </select>
.
.
.
<?php 
 function checkYearandEvent($year, $event) {
  $year_event = mysql_query("SELECT * FROM year_event WHERE year = '$event' AND event = '$event'")

  if (mysql_num_rows($year_event) > 0) {
   // do this
  }

 }
?>

myscripts.js

function check_year_event(year_id, event_id) {
 var year = document.getElementById(year_id).value;
 var event = document.getElementById(event_id).value;

 // call PHP function (but I don't know how): checkYearandEvent(year, event);

}

My question is how do I call the PHP function every time the user changes the value of any of the select element.

Answer 1

You need to use ajax. There is a basic example:

myscripts.js

function AjaxCaller(){
    var xmlhttp=false;
    try{
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    }catch(e){
        try{
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }catch(E){
            xmlhttp = false;
        }
    }

    if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}

function callPage(url, div){
    ajax=AjaxCaller(); 
    ajax.open("GET", url, true); 
    ajax.onreadystatechange=function(){
        if(ajax.readyState==4){
            if(ajax.status==200){
                div.innerHTML = ajax.responseText;
            }
        }
    }
    ajax.send(null);
}

function check_year_event(year_id, event_id) {
 var year = document.getElementById(year_id).value;
 var event = document.getElementById(event_id).value;

    callPage('file.php?year='+year+'&'+'event=+'+event,document.getElementById(targetId));
}

file.php

<?php 

     function checkYearandEvent($year, $event) {
      $year_event = mysql_query("SELECT * FROM year_event WHERE year = '$event' AND event = '$event'")

      if (mysql_num_rows($year_event) > 0) {
       // do this
      }

     }
    echo checkYearandEvent($_GET['year'], $_GET['event']);
?>

Answer 2

You won't be able to do this in the way you might be expeting to. PHP is executed on the server, before the browser receives the HTML. On the other hand, JavaScript runs in the browser and has no knowledge of the PHP (or any other server side language) used to create the HTML.

To "call" a php function, you have to issue a request back to the server (often referred to as AJAX). For example, you could have a checkYear.php script which checks the event and returns some HTML indicating whether the check succeeded. When the HTML fragment gets back to the JavaScript, you inject it into the page.

Hope this helps!

Answer 3

JavaScript is a client side language, PHP is a server side language. Therefore you can't call PHP functions directly from JavaScript code. However, what you can do is post an AJAX request (it calls a PHP file behind the scenes) and use that to run your PHP code and return any data you require back to the JavaScript.

Answer 4

Basically, you are mixing server-side (PHP) and client-side (JS) scripting.

It is however possible - thanks eg. to AJAX. Because you was not specific about what do you exactly need to be done after the select box changes, I can only point you to some resources and propose following:

• learn and start using jQuery (jquery.com) - it will help you get started and maintain cross-browser compatibility,
• learn how to make AJAX requests (eg. in the function you just were firing when onchange event was fired) - eg. using .post() jQuery function,
• learn how to return data from PHP (eg. using json_encode() in PHP, but raw HTML is also ok) and use it in JS,

Answer 5

There may be many ways to do this. The one I prefer, is using MooTools Request object.

For example, you have a script called ajaxCallable.php, which receives thru $_REQUEST variables some parameters, then you do (in the Javascript side):

function check_year_event(year_id, event_id) {
    var year = document.getElementById(year_id).value;
    var event = document.getElementById(event_id).value;

    var myRequest = new Request({method: 'get', url: 'ajaxCallable.php'});
    myRequest.send('yearVar=' + year + '&eventVar=' + event);
}

then, your ajaxCallable.php will be able to access the variables: $_REQUEST['yearVar'] and $_REQUEST['eventVar'].

Answer 6

I was working on a project this week and came up with an easy way to call a php script from an onclick(). It goes like this.

I define an onclick() call in this case on a div called "sidebarItem"…

<a><div class="sidebarItem" onclick="populate('#content', 'help', 'open')">Click me for new content</div></a>

Then I made a simple little JS function that loads an external file into the target container…

function populate($container, $page, $item){
$($container).load('cyclorama/includes/populate.php?$page='+$page+'&$item='+$item);}

Then I write a small php file that gets the $page and $item, queries the database and returns the new content.

<?php
$page = $_GET['$page'];
$item = $_GET['$item'];
$getContentQuery = "SELECT content FROM myTable WHERE page='".$page."' AND item='".$item."'";
$content = mysql_query($getContentQuery, $db);
$myContent = mysql_fetch_assoc($content);
echo $myContent['content'];?>

The php script echoes the new content and it's loaded into the container. I think there are a lot of places this could serve. I'd be interested in finding out if there are any obvious reasons NOT to do this. It doesn't use AJAX just javascript and php but it's fast and relatively easy.