Calling Javascript Function With PHP

Question

I'm trying to call a javascript function with PHP.

Javascript function as below:

<script type="text/javascript">
function printDiv(divName)
{
    var printContents = document.getElementById(divName).innerHTML;
    var originalContents = document.body.innerHTML;
    document.body.innerHTML = printContents;
    window.print();
    document.body.innerHTML = originalContents;
}
</script>

I use this code to run function with PHP:

if (array_key_exists('ykpost', $_POST)) {
    // do something with php
    $printyk = '<script type="text/javascript">printDiv("PrintableArea");</script>';
    echo $printyk;
}

Print content as below:

<div id="printableArea" class="printDiv">
    //some content with created by php
</div>

I post with this form:

<form id="ykbarcodepost" method="post">
    <input type="submit" class="btn" value="Print Barcode" name="ykpost" />
</form>

But it doesn't open print window. If I change $printyk variable as "Hello" it writes Hello. So thought problem with javascript. But when I try with another button as below

<input type="button" class="btn" onclick="printDiv('printableArea')" value="Print Barcode" />

It shows printDiv. Is there anything which I couldn't see ?

As far as I see the param passed to a finction and the id of your div are diffent. Param is `PrintableArea` and id is `printableArea` id's are case-sensitive, so this is two different id's — Eugene Anisiutkin, Feb 18 '20 at 07:07
Good point, I tried but still doesn't work @EugeneAnisiutkin . Thanks — serdar, Feb 18 '20 at 07:13
Yes, I checked. "ReferenceError: printDiv is not defined", but it's defined. Is it possible to set variable as script instead of function. So directly add codes inside of $printyk ? @Barmar — serdar, Feb 18 '20 at 07:48
Make sure the definition of `printDiv` is before you `echo $printyk` — Barmar, Feb 18 '20 at 07:50
I moved function to top of page. "TypeError: document.getElementById(...) is null". Now can not acces div. @Barmar — serdar, Feb 18 '20 at 07:56
See https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element — Barmar, Feb 18 '20 at 07:59

score 0 · Accepted Answer · answered Feb 18 '20 at 08:27

You have errors in your HTML based on what you provided, in this code:

...
// do something with php
$printyk = '<script type="text/javascript">printDiv("PrintableArea")
...

PrintableArea should be printableArea,

One thing to mention here is always use alternative if syntax when mixing if statement and HTML for readability.

Here is a working PHP code I reproduced on my local machine:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>PRINCE Is Not a Cheat-sheet for Emacs</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="generator" content="Prince Backend" />
<meta name="date" content="2020-01-25T19:09:08" />
<meta name="description" content="A mind map for the Emacs commands." />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

<body>
  <div id="printableArea" class="printDiv">
    //some content with created by php
    <div>ASDAD</div>
  </div>
  <form id="ykbarcodepost" method="post">
  <input type="submit" class="btn" value="Print Barcode" name="ykpost" />
</form>
<script type="text/javascript">
  function printDiv(divName)
  {
      var printContents = document.getElementById(`${divName}`).innerHTML;
      var originalContents = document.body.innerHTML;
      document.body.innerHTML = printContents;
      window.print();
      document.body.innerHTML = originalContents;
  }

  <?php if (array_key_exists('ykpost', $_POST)) : ?>
    // do something with php
    printDiv("printableArea");
  <?php endif ?>
</script>
</body>
</html>

Calling Javascript Function With PHP

1 Answers1