0

I am working with html / php and I would like to realize the following situation:

enter image description here

If I click on the "green" button, it should start a php function with the parameter startLoop(5)

If I click on the "red" button, it should start a php function with the parameter startLoop(10)

<?php
function startLoop($loops) {
   for ($x = 0; $x < $loops; $x++) {
      $array[] = $x;
   }
   return $array;
}
?>

the orange area should show the result of the call functions linke this:

<?php
/** orange Area - all values of the array **/
for ($x = 0; $x < count($array); $x++) {
  echo $array[$x];
}
?>

and now is my problem, that i don't know, how I can realize it. This all should happen without a site reload.

Can anybody help me?

Trombone0904
  • 4,132
  • 8
  • 51
  • 104
  • 5
    Without a page refresh, you'd need to make ajax calls to your PHP script. – Alex Jan 15 '18 at 20:23
  • 1
    Possible duplicate of [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) – Qirel Jan 15 '18 at 20:25
  • since PHP is server side, you cannot accomplish this without a page refresh, you'll need to use javascript (either to do the same as the PHP is expected to, or call a php script asynchronously) – Marcelo Origoni Jan 15 '18 at 20:26
  • can you show ne how I can solve my situation with a asynchronously php call? I didn't do this ever before :( – Trombone0904 Jan 15 '18 at 20:29
  • 1
    Honestly I'm not seeing why this logic needs to be server-side in the first place. JavaScript is perfectly capable of having loops and creating arrays. In any event, if what you're asking is how to interact with server-side code from client-side code then what you're looking for is tutorials on using AJAX with PHP. – David Jan 15 '18 at 20:32
  • if you use jQuery simplest example is to set ajax call method on `onclick` event of the element: ``. More examples are on the https://api.jquery.com/jquery.get/ and https://api.jquery.com/jQuery.post/ pages. – user1597430 Jan 15 '18 at 20:32
  • If you absolutely must use PHP, and absolutely can't use AJAX, you can fudge this by making the orange area an iframe, and have your buttons target that iframe which is populated via a PHP script. It would be a kludge, and it would involve part of the page reloading, but not the whole page. – kmoser Jan 15 '18 at 20:48
  • The best way is to make an ajax call to the function with the respective url or assign an annotation. – Krish Bhanushali Jan 15 '18 at 22:11

1 Answers1

0

index.html

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button onclick="loop(5)">Green</button><br/>
        <button onclick="loop(10)">Red</button><br/>

        <input type="text" />

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
            //$.get(url, data, callback)

            function loop(loopsFunctionParameter) {
                $.get(
                    "ajax.php",
                    {
                        loopsFromGet: loopsFunctionParameter
                    },
                    function(result) {
                        $("input").val(result);
                    }
                );
            }
        </script>
    </body>
</html>

ajax.php

<?php
    function startLoop($loops) {
       for ($x = 0; $x < $loops; $x++) {
          $array[] = $x;
       }
       return $array;
    }

    if(isset($_GET["loopsFromGet"])) {
        $result = startLoop($_GET["loopsFromGet"]);
        echo json_encode($result);
    }

We have a JavaScript function that accepts the parameter loops and then it sends the GET request to the ajax.php script and passes the same parameter it accepts. ajax.php returns an array in JSON format but it can be anything really.

Notice: JavaScript is perfectly capable of doing the same thing.

Anis Alibegić
  • 2,941
  • 3
  • 13
  • 28