0

Quero criar um formulário com um botão +, que crie mais campos para que o usuário possa enviar quantos formulários quiser.

Tentei este código, mas sem sucesso:

   var coluna = 1;
    function plus() {
        document.write('<button onclick="plus()">+</button><br><hr><br>');
        document.write("<form action='teste.php' name='form'>");
        coluna = coluna + 1;
        botao = coluna - 1;
        espacos = '<br><input type="text" name="assunto'+coluna+'"><br><br><textarea name="texto'+coluna+'" rows="3" cols="20"></textarea><br><br><button onclick="plus()">+</button><br><hr><br>';
        document.write("teste");
        document.write(coluna);
        document.write(espacos);
        document.write('<button onclick="document.form.submit()" id="submit'+coluna+'" name="rows" value="'+coluna+'">Enviar</button><br>');
        //document.write('<input type="submit" id="submit'+coluna+'" name="submit'+coluna+'" value="enviar">');
        document.getElementById('submit'+botao+'').style.visibility = "hidden";
        document.write("</form>");
    }
0

1 Resposta 1

2

Segue um exemplo bem simples de como adicionar divs com campos em um form já existente:

var line = 1;
function addInput(divName) {
  var newdiv = document.createElement('div');
  newdiv.innerHTML  = '['+line +']';
  newdiv.innerHTML += '<input type="text" name="text'+line +'_1" id="text'+line +'_1">';
  newdiv.innerHTML += '<input type="text" name="text'+line +'_2" id="text'+line +'_2">';
  document.getElementById(divName).appendChild(newdiv);
  line++;
}

addInput('lines');
<form id="myForm">
  <div id="lines"></div>
  <button type="button" onclick="addInput('lines')">+</button>
  <input type="submit" value="Enviar">
</form>

Se preferir, teste no CODEPEN.

Note que não estamos usando document.write, mas sim criando os elementos diretamente com createElement.

Se quiser realmente forms separados, basta trocar o ('div') por ('form'), e remover o form do html. Mas lembre-se que neste caso você pode ter problemas com o envio dos dados, caso o usuário altere mais de um campo.

O button precisa do type="button" para evitar que ele envie o form (o type padrão é submit).

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .