frontendbr / forum

:beer: Portando discussões feitas em grupos (Facebook, Google Groups, Slack, Disqus) para o GitHub Discussions
MIT License
4.25k stars 234 forks source link

Como criar vários $_POST com increment em cada name via javascript? #1227

Closed alexandrecarreiro closed 6 years ago

alexandrecarreiro commented 6 years ago

Estou criando um formulário com input dinâmico que se duplicam ao clicar no botao "Adicionar" com imcrement. Meus códigos para exemplificar um pouco:

var count1 = 0;
    function duplicarCampos(){
        count1++;
        var clone = document.getElementById('ortipo1').cloneNode(true);
        var destino = document.getElementById('destipo1');
        destino.appendChild (clone);
        var camposClonados = clone.getElementsByTagName('input');
        if (count1 < 15) {
            for(i=0; i<camposClonados.length;i++){
                document.getElementById('tipo1').name = "TA"+count1;
            }
        } else {
            alert("Você chegou no numero máximo permitido.");
            var node1 = document.getElementById('destipo1');
            node1.removeChild(node1.childNodes[0]);
        }
    }
    function removerCampos(id){
        var node1 = document.getElementById('destipo1');
        node1.removeChild(node1.childNodes[0]);
    }
<form id="form1" method="post" action="categories-validate.php" style="border:2px solid gray;width:400px; height:auto; min-height:100px; max-height:1000px; padding:15px;background:#E1E1E1; position:relative; vertical-align: middle; ">
<div style="padding-top:20px;padding-bottom:10px; max-height: 800px; overflow:auto;">
            <ul>
                <h4 style="text-align:left; float:left;">Tipo 1</h4>
                <li style="float:right; margin-top:5px;">
                    <input type="button" onclick="duplicarCampos();" value="Adicionar">
                    <input type="button" onclick="removerCampos(this);" value="Remover">
                </li>
                <br><br>
            </ul>
            <ul style="max-width:180px; float:left;">
                <li id="ortipo1" style="float:left; padding-bottom:5px;">
                    <input type="text" id="tipo1" name="TA0"  maxlength="14" size="14" style="margin-top:5px;"/><br>
                </li>
                <div style="display:block; max-width:180px; float:left;"id="destipo1"></div><br>
            </ul>
        </div>
        <hr size="2">
</form>

Quero que no arquivo categories-validate.php que é para onde form vai ser redirecionado, o $_POST seja criado automaticamente no número de vezes desejado, pensei em duplicar um $_POST e alterar parte do name pela numeração criado pelo increment. Exemplo: (obs: onde tiver ponto de interrogação eu não sei oq colocar).

var a = 0;
    var count = 0;
    var counter4 = 10;
    function dup() {
        while (a < counter4){
            count++;
            var clone = document.getElementById('post').cloneNode(true);
            var destino = document.getElementById('dupdest');
            destino.appendChild (clone);
            var camposClonados = clone.getElementsBy??;
            for(i=0; i<camposClonados.length;i++){
                ???????
            }
            a++;
        }
    }
<div id="post"><?php echo $_POST['TA0']; ?></div>
<div id="dupdest">
luizbills commented 6 years ago

Vou te sugerir 2 opções:

seu html:

    <input type="text" name="TA[]" value="10">
    <input type="text" name="TA[]" value="20">
    <input type="text" name="TA[]" value="30">

no php se você der print_r na $_POST['TA'] vai mostrar:

Array (
  [0] => 10
  [1] => 20
  [2] => 30
)
// retorna todos inputs com name="TA"
var inputs = document.querySelectorAll('[name="TA"]')
// mas você também pode usar uma class querySelectorAll('.sua-class')

var values = [];
Array.from(inputs).forEach(function (input) {
  values.push(input.value)
}

// agora você serializa seus valores de algum jeito que preferir.
var serialized = values.join(','); // exemplo apenas
<?php

// no backend então você descompacta seus valores
$values = explode( ',', $_POST['values'] );
// não esqueça de sanitizar e validar também