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');
            
           
        });