Edit History

Hello, I have a tpl page with a button and a div which is hidden. On the button click, I want to execute an ajax function and show the div on success, but its not doing anything.

HTML Elements:

<input id="showVerifCode" type="button" value="Get Verification Code" style="background: #3e64ff; border-color: #3e64ff; color: #fff; padding: 11px 16px; cursor: pointer; border-width: 1px; border-radius: 2px; font-size: 14px; font-weight: 400; margin-top: 16px; margin-bottom: 0px;">

  <div id="verifCode" style="display: none;">
    <p style="margin-top: 5px;"><small id="email-send-info" style="color: #6fdc6f;">Please check your mail for the verification code!</small></p>
    <P style="margin-bottom: 0; margin-top: 16px;">Verification Code:</P>
    <input placeholder="E.g 1234567890" width="50px" name="verifCode" required type="text" style="margin-top: 1px; width: 100%; padding: 12px 20px; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;"/>
  </div>

JavaScript Function:

{literal}
    <script type="text/javascript">
      const targetDiv = document.getElementById("verifCode");
      const btn = document.getElementById("showVerifCode");
      btn.onclick = function () {
        
        $.ajax({
          url: {$link->getModuleLink('prestashopbeam', 'AjaxSendMail.php', array())},
          type: 'GET',
          data: 'ajax=true&clientgroups='+ 'test5858',
          cache: false,
          success: function(data) {
            if (targetDiv.style.display === "none") {
              targetDiv.style.display = "block";
            }
          }
        });

      };
    </script>
  {/literal}

PHP Ajax page (located in /modules/my_module/AjaxSendMail.php

<?php
return;

I only have this return there because I want to test out the ajax part first.

Sorry if this a very noob question but this is the first time I am using ajax, and I am no PHP or JavaScript master either.

Thank you in advance.

EDIT: I fixed it by using jquery and changing the URL