Event Handler

<button onclick="sayHello(this)">Click Me!</button> // By passing this as a parameter to the function in a JavaScript environment, you're referencing the DOM element (in this case, the <button> itself). This allows the function to interact directly with the button element, such as accessing its attributes, styles, or other properties.
  <button onclick="sayHello('param1', 'param1')">Click Me!</button> // sending arguments format
  <button onclick="sayHello({'id': 'yourID'})">Click Me!</button> // sending JSON format
  <input name="user" oninput="searchUser" type="search" placeholder="Search user..."/> // sending with name attribute
  <form onsubmit="createUser"> // sending on submit using inputs with the name attribute
    <input name="user" placeholder="User name"/>
  </form>

<div class="space-y-2">
      <Label for="password">Password</Label>
      <div class="relative">
          <Input
              id="password"
              type="password"
              placeholder="Enter your password"
              required />
          <Button
              type="button"
              variant="ghost"
              size="icon"
              class="absolute right-0 top-0 h-full px-3 py-2 hover:bg-transparent"
              onclick="togglePasswordVisibility(this)"
              aria-label="Hide password">
              <Visibility id="visibility" class="size-4" />
              <VisibilityOff id="visibility-off" class="size-4 hidden" />
          </Button>
      </div>
  </div>
  
  <script>
      function togglePasswordVisibility(element) {
          const passwordInput = document.getElementById('password');
          const visibilityIcon = document.getElementById('visibility');
          const visibilityOffIcon = document.getElementById('visibility-off');
  
          element.ariaLabel = passwordInput.type === 'password' ? 'Hide password' : 'Show password';
  
          if (passwordInput.type === 'password') {
              passwordInput.type = 'text';
  
              visibilityIcon.classList.add('hidden');
              visibilityOffIcon.classList.remove('hidden');
          } else {
              passwordInput.type = 'password';
  
              visibilityIcon.classList.remove('hidden');
              visibilityOffIcon.classList.add('hidden');
          }
      }
  </script>

<?php

  // PHP Function with the name sayHello will not be called from the HTML file because JavaScript function with the same name is called first.
  function sayHello($param1, $param2)
  {
      echo $param1 . ' ' . $param2;
  }
  
  ?>
  
  <button class="bg-blue-500 p-2 rounded-md text-white" onclick="sayHello('param1', 'param1')">Click Me!</button>
  <script>
      function sayHello(param1, param2) {
          alert(param1 + ' ' + param2);
      }
  </script>

<?php

  function sayHello($data)
  {
      return $data;
  }
  
  ?>
  
  <button class="bg-blue-500 p-2 rounded-md text-white" onclick="sayHello('param1', 'param1')" pp-after-request="getSayHelloResponse">Click Me!</button>
  <script>
      function getSayHelloResponse(data) {
          console.log("🚀 ~ getSayHelloResponse ~ data:", data)
          alert(`${data.response.args[0]}, ${data.response.args[1]}`);
      }
  </script>

<?php

  use Lib\StateManager;
  
  $count = StateManager::getState('count', 0);
  
  function increment()
  {
      global $count;
  
      StateManager::setState('count', ++$count);
  }
  
  function refresh() {}
  
  ?>
  
  <div class="w-screen h-screen grid place-items-center">
      <div class="flex flex-col gap-2">
          <p>Count: <?= $count ?></p>
          <button onclick="welcomeModal.showModal()">Show Dialog</button>
      </div>
  
      <dialog id="welcomeModal" class="rounded-md">
          <div class="bg-white rounded-lg shadow-lg p-6 max-w-md w-full relative">
              <form method="dialog">
                  <button onclick="refresh" class="absolute right-2 top-2 text-gray-500 hover:text-gray-700   focus:outline-hidden">
                      ✕
                  </button>
              </form>
              <h3 class="text-lg font-bold">Welcome to Prisma PHP!</h3>
            <p class="py-4 text-gray-700">We're thrilled to have you here. Explore the features and enjoy your experience. If you   need any help, don't hesitate to reach out to our support team.</p>
  
            <button onclick="increment" pp-after-request="@close" class="bg-blue-500 text-white px-4 py-2 rounded-md">Increment</button>
          </div>
      </dialog>
  </div>

<?php

  function handleInputWithNameAttribute($data) {
      echo $data->user;
  }
  
  function handleInputWithoutNameAttribute($data) {
      echo $data->value;
  }
  
  ?>
  
  <input oninput="handleInputWithNameAttribute" name="user" type="search" placeholder="With Name Attribute..." class="mt-2 p-2 border border-gray-300 rounded-sm" />
  <br>
  <input id="maintain-focus" oninput="handleInputWithoutNameAttribute" type="search" placeholder="Without Name Attribute..." class="mt-2 p-2 border border-gray-300 rounded-sm" />

<?php

  $myArray = [
      "Technology" => false,
      "Science" => false,
      "Health" => false,
      "Education" => false,
      "Sports" => false
  ];
  
  function handleMultipleCheckboxChange($data)
  {
      global $myArray;
  
      echo $data->categories->value . ": " . $data->categories->checked . "<br>";
  
      $myArray[$data->categories->value] = $data->categories->checked;
  
      echo json_encode($myArray);
  }
  
  ?>
  
  <h1>Select Categories</h1>
  <div>
      <label>
          <input id="technology" type="checkbox" name="categories" value="Technology" onchange="handleMultipleCheckboxChange">
          Technology
      </label>
      <label>
          <input id="science" type="checkbox" name="categories" value="Science" onchange="handleMultipleCheckboxChange">
          Science
      </label>
      <label>
          <input id="health" type="checkbox" name="categories" value="Health" onchange="handleMultipleCheckboxChange">
          Health
      </label>
      <label>
          <input id="education" type="checkbox" name="categories" value="Education" onchange="handleMultipleCheckboxChange">
          Education
      </label>
      <label>
          <input id="sports" type="checkbox" name="categories" value="Sports" onchange="handleMultipleCheckboxChange">
          Sports
      </label>
  </div>

<div class="w-screen h-screen grid place-items-center">
      <ul class="space-y-4">
        <li><a class="p-2 rounded-sm bg-blue-500 underline text-white" href="/ppbody-loaded">PPBodyLoaded</a></li>
        <li><a class="p-2 rounded-sm bg-blue-500 underline text-white" href="/ppbody-loaded?id=24">PPBodyLoaded?id=24</a></li>
      </ul>
  </div>
  
  <script>
      document.addEventListener('PPBodyLoaded', function() {
          console.log('PPBodyLoaded event fired');
      });
  </script>

<div class="w-screen h-screen grid place-items-center">
      <ul class="space-y-4">
        <li><a class="p-2 rounded-sm bg-blue-500 underline text-white" href="/ppbody-loaded">PPBodyLoaded</a></li>
        <li><a class="p-2 rounded-sm bg-blue-500 underline text-white" href="/ppbody-loaded?id=24">PPBodyLoaded?id=24</a></li>
      </ul>
  </div>
  
  <script>
      document.addEventListener('PPBodyLoaded', function() {
          const anchorTags = document.querySelectorAll('a');

          anchorTags.forEach((tag) => {
              tag.appendChild(document.createTextNode(' (PPBodyLoaded)'));
          });
      });
  </script>