Javascript - Function problem that adds textbox

Question

On my PHP and Javascript page, I created a space that contains two Textbox and a clickable label to add more Textbox, if necessary, to 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>

And the function that adds more textbox is as follows.

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>";
});

However, if I have filled in some of the existing Textbox and clicked to add one more, the existing text I filled in goes away.

How can I keep the texts written in the existing Textbox as I click to add more to the form?

Answer 1

In this case you should use the function .append since every time you did the +=, for him it was as if you were giving a completely new html.

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>

Answer 2

Always copy the contents of the last input:

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

Example

Answer 3

The innerHTML substutui all content, to add more content at the end use the append.

Now two points in existing code:

• You are using javascript and jQuery in the same code, if you use jQuery, use as much as you can
• There is no <input></input> the tag is closed in itself - <input type="text" />.

See the example with the improvements pointed out.

$("#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>