Recommand · October 14, 2021 0

Generating input blocks in a form using insertAdjacentHTML() works as well as createElement()?

Basically, it’s a form that needs specific information, "Tamanho"/"Tamanhos" means "size"/"sizes", which I have a list of acceptable sizes that goes from 8 to 30 that are registered in a database (to make it easier to add more acceptable sizes if needed), the user should be able to chose many "sizes" and put a quantity of "how many products of that size?" in an input right after it.

I was able to create an JavaScript function AddTam() called by a button that generates one more block to fill, with a select, and all the block’s select inputs are named Tam[], so their values pass as an array, and their respective inputs named as "TamQnt8", the number 8 at the end refers to the size chosen, it changes every time the user chooses other size for the same block using other function DefTam(), that way, I could verify the sizes array in the Back-End, and use it to get their respective quantities and organize it all in an array, to finally send it to the database.

But for some reason, when I test if the information is passing through correctly, it doesn’t send any data in the key "Tam" saying it’s undefined when I tested it, in PHP I’m testing: if(!empty($_POST['Tam'])) but i also tried isset().

I just don’t know what’s wrong, so I was asking if isn’t it the method I’m using insertAdjacentHTML() to generate the blocks, and if it works as well as createElement() in forms.

Also, when I created the blocks manually and instead of many selects I used checkboxes, it was working, just decided to change to the generated method because the checkboxes took way too much space in the screen, even worse for mobile.

Here’s a simplification of the code in HTML:

<form method="post">
    <section>
            <div class="littlebutton" id="addTamanho" onclick="AddTam()">Add Tamanho</div>
    </section>

    <script>
        var contador = 0;

        function AddTam(){
            let tamTitulo = document.querySelector('#addTamanho');

            tamTitulo.insertAdjacentHTML("afterend",
            '<div class="cellTam cell">'+
            '<select name="Tam[]" class="'+contador+'tam8 '+contador+'" onchange="DefTam(this)">'+
            '<?php foreach ($_SESSION["tamanhos"] as $key => $value) { ?>'+
            '<option value="<?php echo $value["tamanho"];?>"><?php echo $value["tamanho"];?></option>'+
            '<?php }?>'+
            '</select>'+
            'Tem => <input class="qnt" id="'+contador+'tam8" name="TamQnt8" type="number" min=1>'+
            '</div>');
            contador++
        }

        function DefTam(ElementTam){
            let infoTam = ElementTam.value;
            let refTam = ElementTam.getAttribute("class");
            refTam = refTam.split(" ");
            let relInput = document.getElementById(refTam[0]);

            ElementTam.setAttribute("class", refTam[refTam.length-1]+"tam"+infoTam+" "+refTam[refTam.length-1]);
            relInput.setAttribute("name", "TamQnt"+infoTam);
            relInput.setAttribute("id", refTam[refTam.length-1]+"tam"+infoTam);
        }
    </script>

    <button class="post" name="Inserir" type="submit">Postar</button>
</form>

Output: The Add Tamanho button, 3 generated blocks of the form and the HTML result

Sorry if I wrote something wrong or weirdly, still learning English, or if it’s just a silly mistake in my code, also, any help is welcome.