Javascript - Problem in function that adds textbox

Question

Javascript - Problem in function that adds textbox

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

1

In my page in PHP and Javascript, I created a space that contains two Textboxes and a clickable label to add more Textbox, if necessary, to the numPart div:

<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 one of the existing Textboxes and clicked to add one more, the existing text that I filled in disappears.

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

javascript html jquery label textbox

asked by anonymous 23.05.2016 / 15:45

3 answers

2

In this case you should use the .append function since every time you did += , it was like 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><divid="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>

23.05.2016 / 15:51

1

Always copy the contents of the last input:

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

Example

23.05.2016 / 15:54

How to debug errors in Realm DB? #REF! When you exclude cells in another worksheet

score 0 · Accepted Answer

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

Now two points in the existing code:

You are using javascript and jQuery in a same code, if using jQuery, use as much as you can
There is no <input></input> the tag is closed on it - <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><divid="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>