Calling a JavaScript Function From PHP?

Trying to call a JavaScript function from PHP? Nine times out of ten, you will want to do this instead.

Published Categorized as PHP, Web Dev

So you want to call a JavaScript function from PHP, and you’re wondering how best to do it.

For starters, you can’t. At least not unless you have the V8js extension, which enables Google’s v8 JavaScript rendering engine, installed and configured on your server.

But, before you click away and start reading about it, there’s one thing you need to know about V8js: nine times out of ten, you don’t really need it. Sounds confusing, I know. Allow me to explain 🙂

Why You Can’t Call JavaScript From PHP

PHP, you see, is a server-side programming language. This means that your PHP app’s code, and all the logic that comes with it, runs in the server.

JavaScript, on the other hand, is a client-side programming language. In other words, a JavaScript app’s code runs in the client, a.k.a. your user’s browser.

(If you want to learn more, refer to this article at CloudFlare.)

The two can co-exist. For example, most of the websites on the Internet are powered by WordPress, a content management system written in PHP. However, these websites are styled by WordPress themes, which also feature JavaScript.

Part of the work to render a WordPress website happens on the server (the PHP part), and the other part takes place in the user’s browser (the JavaScript part).

To PHP, JavaScript source code is just a bunch of symbols that can be output to a file.

To put it simply, “it don’t speak the language.” So you can’t call a JavaScript function from PHP per se. Instead, what you may want to do is output it to the frontend, so that it runs in the user’s browser.

What You Probably Want to Do Instead

I wrote “probably” in the heading because there’s always—and I mean always—an exception. What I’m about to propose will work for 99% of the people who will read this article. And yet, there will be 1% or more of you who want to do something more sophisticated.

Suppose you’re developing a PHP app, and you want to call a JavaScript function. What you want to do in such a case is to echo the function in your PHP code, so that it’s part of the output to the frontend and it runs in the user’s browser.

(If you’re wondering why I’m suggesting echo and not print, check out this article at W3Schools.)

To achieve this, you need to write an echo statement with the following three steps:

  • Defines the JavaScript function
  • Calls the JavaScript function
  • Wraps it all in a <script>

This is how the steps above look like in terms of code:

<?php
echo "<script>
/* Define the JavaScript function */
function functionName(params) {}

/* Call the JavaScript function */
functionName(params);
</script>"
?>

You’re wrapping the function in a <script> because the Domain Object Model (DOM) expects executable code to be encapsulated in <script> HTML elements. Without it, it will treat the source code as plain text, and the function won’t run.

If the JavaScript function hasn’t been defined yet, you need to define it. There’s where you name it, give it parameters (if any), and write the specific statements for the business logic you’re looking to enable.

If you try to call a function that hasn’t been defined, the browser will throw you a “function not defined” error.

Finally, you need to call the function (just like any JavaScript function needs to be called).

Calling a Function That’s Already Defined

Suppose your function has already been defined in your code, and all you need to do is call it.

Were we building the index.php page for a very simple website, where the <head> and <body> are outputted dynamically, and there’s a <script> in the head with a function that’s defined but not called, our source code would resemble this:

<!doctype html>
<html class="no-js" lang="en-US">
<head>
  <meta charset="utf-8">
  <?php the_head(); ?>

  // Define the JavaScript function
  <script>function functionName(params){}</script>
</head>
<body>
  <?php the_body(); ?>

  // Call the JavaScript function
  <?php echo "<script>functionName(params);</script>" ?>
</body>
</html>

What we’ve done is take the JavaScript code from this post’s first section and split it in two parts: a definition in the HTML document’s <head> and a call in the <body>.

Important: For this approach to work, you must always—without exception—call the JavaScript function after it’s already been defined. Otherwise, you will come across a “function not defined” error in the browser as the JavaScript interpreter tries to run a function that it hasn’t seen the definition for yet.

So if you try to do this (notice that the call appears on line 8, and the definition doesn’t appear until line 11):

<!doctype html>
<html class="no-js" lang="en-US">
<head>
  <meta charset="utf-8">
  <?php the_head(); ?>

  // Call the JavaScript function
  <?php echo "<script>functionName(params);</script>" ?>

  // Define the JavaScript function
  <script>function functionName(params){}</script>
</head>
<body>
  <?php the_body(); ?>
</body>
</html>

It won’t work.

In Conclusion

You can’t call a JavaScript function from PHP, but you can output a call for your JavaScript function from your PHP source code. Then, the user’s browser will take care of the rest.

If the JavaScript function you want to call is already defined, make sure the code for the call appears under the code for the definition. Otherwise, you will get back a “function not defined” error.

Image courtesy of micrologia /Depositphotos

Leave a comment

Your email address will not be published.