Error calling javascript function in html button

Question

I'm trying to call a JavaScript function on a button in html. Both the button and the JavaScript function are in the same file, however I am having an error saying that the function is not available.

function countFiles() {
  $directory = "/uploadFiles";
  $filecount = 0;
  $files = glob($directory.
    "*");
  if ($files) {
    $filecount = count($files);
  }

  if ($filecount > 0) {
    echo '<script type="text/javascript">',
      'window.location.href = "decrypt.php";',
      '</script>';
  } else {
    echo "<script type='text/javascript'>alert('Precisa de inserir pelo menos 1 ficheiro');</script>";
  }
}

<button onclick="countFiles()">Desencriptar</button>

What you are doing mate? You are writing php code considering its js. — Rahul, May 16 '19 at 09:03
PHP runs _before_ the website loads. Not after. You can't call upon it with a button click — icecub, May 16 '19 at 09:03
Yes it is possible with Ajax. But to be fair: Ajax is a complicated concept that might be out of the scope of what you want to achieve in the first place and perhaps too dificult to play around with if you're still strugling with the basics. — icecub, May 16 '19 at 09:08
I want call a function in html button. This function counts the number of files that a directory has. If number of files > 1 the page is redirect. — Nelson Silva, May 16 '19 at 09:08

pr1nc3 · Answer 1 · 2019-05-16T09:25:11.310

First of all seperate your backend with the frontend. Your php code should be separate and the connection should happen through ajax (like you mention in your tag as well).

For test.php file:

<?php
$directory = "/uploadFiles";
$filecount = 0;
$files = glob($directory . "*");
if ($files){
    $filecount = count($files);
}

echo $filecount;
?>

Here you apply the logic you want and return your output.

In your Front end file you can handle the response coming from php like:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button onclick="countFiles()">Desencriptar</button>

<script>
    function countFiles(){
        $.ajax({
            url: "test.php",
            context: document.body
        }).done (function(result) {
            if(result <= 0){
                alert('Precisa de inserir pelo menos 1 ficheiro')
            }
            else{
                window.location.href = "decrypt.php"
            }
        });
    }
</script>

Qirel · Accepted Answer · 2019-05-16T09:29:19.423

From your comment,

I want call a function in html button. This function counts the number of files that a directory has. If number of files > 1 the page is redirect.

You can achieve this with an asynchronous call to PHP - through AJAX.

Method 1: Asynchronous call

<script>
function countFiles() {
  $.ajax({
    url: "getFileCount.php", 
    success: function(result) {
        if (result.count > 0) {
            window.location.href = "decrypt.php";
        } else {
            alert('Precisa de inserir pelo menos 1 ficheiro');
        }
    }}
);
</script>

Then, create a file called getFileCount.php

header('Content-Type: application/json');
$directory = "/uploadFiles";
$filecount = 0;
$files = glob($directory . "*");

if ($files){
     $filecount = count($files);
}
echo json_encode(['count' => $filecount]);

Method 2

However, if you don't expect the number of files to be changed between the page load and the click of the button, you don't need AJAX,

<?php 
$directory = "/uploadFiles";
$filecount = 0;
$files = glob($directory . "*");
if ($files){
    $filecount = count($files);
}
?>

<script>
function countFiles() {
    var fileCount = <?php echo $filecount; ?>;
    if(filecount > 0){
       window.location.href = "decrypt.php";
    }else{
        alert('Precisa de inserir pelo menos 1 ficheiro');
    }
}   
</script>

Just out of curiousity: What made you decide to give an answer using jQuery while its not being mentioned in a tag or even the code inside the question? OP is most likely a beginner and has no idea about it :) — icecub, May 16 '19 at 09:30
Perhaps, although then this could be a way to learn about it. ;-) jQuery is a great library, and simplifies so much when working with JavaScript - among those it simplifies, is AJAX calls. I would recommend jQuery AJAX over standard JS asynchronous calls any day of the week. My answer also shows how to achieve this synchronously as well, which is plain JS/PHP. — Qirel, May 16 '19 at 09:36
Yes I'm not saying its wrong. I'm just saying that if you gonna use a library for an answer that's not being mentioned, add that to your answer so the OP knows and also knows where to find this library. If OP has no idea, `$.ajax({` will not tell him / her "Oh hey! That's jQuery! I need to use it" — icecub, May 16 '19 at 09:39

Error calling javascript function in html button

2 Answers2