Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Eduardo Honorato

Duplicar conteúdo e mudar nome nos campos

Por , em Javascript

Recommended Posts

Eduardo Honorato    0

Eduardo Honorato
Postado

Preciso clicar no botão de + e ele duplicar esses conteúdos em baixo, mudando os names dos conteudos, mas não tenho a minima ideia de como fazer isso, ja usei o appendChild mas nao ficou bom, alguem poderia me ajudar a fazer isso?

 

iT8mwcn.png

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Seria com appendChild mesmo, como você fez? e porque não ficou bom ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Eduardo Honorato    0

Eduardo Honorato
Postado 
        <script type="text/javascript">
         function duplicarCampos(){  
            var clone = document.getElementById('inserir').cloneNode(true);  
            var destino = document.getElementById('destino');  
                destino.appendChild (clone);  
      
                    var camposClonados = clone.getElementsByTagName('input');  
      
                        for(i=0; i<camposClonados.length;i++){  
                            camposClonados[i].value = '';  
            }     
        }    
        </script>

fiz isso, porém quando ele duplica ele joga um pouco abaixo, ou seja, ele fica sobreposto a div pai so que um pouco abaixo, e queria que quando duplicasse os names mudassem tipo name="preco2" e name="desc2" e assim por diante

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Mas ai é ruim cara... e muito trabalho até para receber no server-side.

O melhor é você ter arrays. E o name ser assim:

 

<input type="text" name="preco[]" />
<input type="text" name="desc[]" />
de verdade, isso de colocar um contador e preco1, preco2, preco3 só vai te dar mais trabalho no futuro.

Use name="foo[]"

 

Quanto a "jogar um pouco mais para baixo" ai é problema de CSS, e não do script em si, ele me parece bem correto.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Exato !

 

Ai você recebe, caso esteja utilizando php, assim:

 

$preco = $_POST['preco']; //array

echo $preco[0];
echo $preco[1];
echo $preco[2];

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marco Bruno    19

Marco Bruno
Postado

Boa tarde, Galera.

 

Acabei lendo o bate-papo de vocês e senti vontade de participar! :-)

Sendo assim, lá vai.

 

Um ponto importante é pensar em progressive enhancement(melhoria progressiva). Se o usuário não tiver com o JavaScript habilitado, não é necessário aparecer o sinal de mais(+), dado que a funcionalidade do sinal não vai funcionar.

 

Tomei a liberdade de fazer o código em VanillaJS(JavaScript Puro). Só pela diversão. rs*

 

HTML

 

<!DOCTYPE html>
<html>
    <head>
        <meta charset="uft-8">
        <title>Exemplo de como Criar um elemento por JavaScript</title>
    </head>
    <body>
        <form class="form" action="adicionarProduto.php" method="post">
            <label class="form-label">Nome:
                <input type="text" name="nome[]">
            </label>
            <label class="form-label">Descrição:
                <input type="text" name="descricao[]">
            </label>

            <input class="form-action" type="submit" value="Cadastrar">
        </form>

        <script src="js/main.js"></script>
    </body>
</html>

 

JavaScript(main.js)

 

(function (document) {
  'use strict'

  var $form = document.querySelector('.form');
  var $formAction = document.querySelector('.form-action');

  var $labels = document.getElementsByClassName('form-label');
  var $ultimoLabel = $labels[$labels.length - 1];

  var $mais = document.createElement('a');
  $mais.href = '#';
  $mais.textContent = '+';

  $form.insertBefore($mais, $formAction);

  $mais.addEventListener('click', function(event) {
    event.preventDefault();

    var $labelNome = $labels[0].cloneNode(true);
    var $labelDescricao = $labels[1].cloneNode(true);

    $form.insertBefore($labelNome, this);
    $form.insertBefore($labelDescricao, this);
  });
})(document);
[]'s

Marco Bruno

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito