jQuery/Prestashop - Can't get value from input

Question

I'm strugling to get a value from an text input field inside a form. I'm trying to get the value of a field in the product page in PrestaShop, that field is created through a module and a client can insert text to ask for engraving.

The code I have works outside prestashop, like you can test below.

I've searched and tried a million things and cannot make it work, maybe because it's in Prestashop.

var textopresente = null;

$(document).on("click", "#symbol-heart", function () {

  console.log("click");

  textopresente = $('#formula').val();

  if ($("#formula")) {
    console.log(textopresente + "yes");
  };

  //testing purposes
  $("#formula").val(textopresente + 'Teste');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="text form-control an_pf_text" id="formula" name="{$input_name|escape:'htmlall':'UTF-8'}">

<div class="input-symbols">
  <span id="symbol-heart" class="symbol-btn">❤</span>
</div>

The HTML is inside the module tpl file for the hook in question. The JS is the JS file that's imported in the module aswell. I tried putting the js in the tpl file and in the global JS theme file but it never works.

I leave you the link to my sandbox store page: https://sandbox.anjo.com.pt/contas-mulher/conta-mulher-pandora-narval-798965c01

Hope someone can help me :)

Thank you in advance!

Answer 1

Please try with the below code and let me know if it works for you.

$(document).on("click", "#symbol-heart", function () {

            console.log("click");

            var textopresente = $('.an_pf_text').val();;

            if ($(".an_pf_text")) {
                console.log(textopresente + "yes");
            };

            $(".an_pf_text").val(textopresente + 'Teste');
            
           
        });