1

Na minha página em PHP e Javascript, criei um espaço que contém duas Textbox e uma label clicável pra adicionar mais Textbox, se necessário, ao div numPart:

<div id="numPart">
    <div class="inputMGM"><input name="part" id="" class="validate[required]"></input></div>
    <div class="inputMGM"><input name="part" id="" class="validate[required]"></input></div>
</div>

<label id="addPart" class="SpaceEnviar" style="cursor: pointer; decoration: underline">ADICIONAR PARTICIPANTE</label>

E a função que adiciona mais textbox é a seguinte.

var x=1;
$("#addPart").click(function(){
   var d = document.getElementById('numPart');
   d.innerHTML += "<div class='inputMGM'><input name='part' id='' class='validate[required]'></input></div>";
});

Contudo, se eu tiver preenchido alguma das Textbox existentes e clicar pra adicionar mais uma, o texto existente que eu preenchi some.

Como eu posso fazer pra manter os textos escritos nas Textbox existentes a medida que eu for clicando pra adicionar mais ao formulário?

3 Respostas 3

2

Neste caso deves utilizar a função .append visto que cada vez que fazias o +=, para ele era como se estivesses a dar um html completamente novo.

var x=1;
$("#addPart").click(function(){
   $("#numPart").append("<div class='inputMGM'><input name='part' id='' class='validate[required]'></input></div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<div id="numPart">
    <div class="inputMGM"><input name="part" id="" class="validate[required]"></input></div>
    <div class="inputMGM"><input name="part" id="" class="validate[required]"></input></div>
</div>

<label id="addPart" class="SpaceEnviar" style="cursor: pointer; decoration: underline">ADICIONAR PARTICIPANTE</label>

1

Copiar sempre os conteudos do ultimo input:

$("#addPart").on('click', function() {
     var newField = $('.inputMGM').last().clone();
    $(this).before(newField)
});

Exemplo

2
  • Ótima ideia usar o last(). +1 23/05/2016 às 14:07
  • Obrigado @PedroCamaraJunior
    – Miguel
    23/05/2016 às 14:08
0

O innerHTML substutui todo o conteúdo, para adicionar mais conteúdo no final utilize o append.

Agora dois pontos no código existente:

  • Você está utilizando javascript e jQuery em um mesmo código, se usar jQuery, use o máximo que puder
  • Não existe <input></input> a tag é fechada nela mesma - <input type="text" />.

Veja o exemplo com as melhorias apontadas.

$("#addPart").on('click', function() {
  var html = "<div class='inputMGM'><input name='part' id='' class='validate[required]' /></div>";
  $('#numPart').append(html);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="numPart">
  <div class="inputMGM">
    <input name="part" id="" class="validate[required]" />
  </div>
  <div class="inputMGM">
    <input name="part" id="" class="validate[required]" />
  </div>
</div>

<label id="addPart" class="SpaceEnviar" style="cursor: pointer; decoration: underline">ADICIONAR PARTICIPANTE</label>

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 .