Get value from dynamically created fields

Question

I have a page where the user can increase the amount of fields that will be needed, to do this I am using jQuery with the following code:

episodio = 2;
$(".addEpisodeField").click(function() {
  newField = $("#episodeField").append("<input type='text' class='form-control input-md' id='episode' value='Episódio " + episodio + "'>");
  episodio++;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="col-md-4 control-label" for="textinput">Episódios</label>
  <div class="col-md-3" name="episodeField" id="episodeField">
    <input id="textinput" name="textinput" type="text" value="Episódio 1" class="form-control input-md">
  </div>
  <a href="#" id="addEpisodeField" class="addEpisodeField">+</a>
</div>

This part is ok, works the way I wanted, but my problem is to take the value of these fields and send it to PHP to be added to the Database

Answer 1

Try as follows, passing the name and id as it did with the value, example:

episodio = 2;
$(".addEpisodeField").click(function () { 
newField = $("#episodeField").append("<input type='text' class='form-control input-md' name='Episódio "+episodio+"' id='Episódio "+episodio+"' value='Episódio "+episodio+"'>"
    episodio++;
  });

Answer 2

You can use the selector :jquery input to return all input tags inside the episodeField element. I added a button and an event to manipulate the action of capturing the values and serializing, already in x-www-form-urlencoded format.

Behold:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
    <label class="col-md-4 control-label" for="textinput">Episódios</label>  
    <div class="col-md-3" name="episodeField" id="episodeField">
        <input id="textinput" name="textinput" type="text" value="Episódio 1"class="form-control input-md">
    </div>
    <a href="#" id="addEpisodeField" class="addEpisodeField">+</a>
</div>

<button id="obtem_valores">Obter valores</button>

<script>
var episodio = 2;
var name_episodio = 2;
$(".addEpisodeField").click(function () { 
        newField = $("#episodeField").append("<input type='text' name=\"textinput" +  name_episodio
        + "\" class='form-control input-md' id='episode' value='Episódio "+episodio+"'>"); 
    name_episodio++;
    episodio++;
});

$("#obtem_valores").click(function(){

    alert($("#episodeField :input").serialize());
});
</script>

For the function to serialize working all its inputs must have the name attribute. So I modified the line that generates the inputs, I added the quotes escape with \".

Answer 3

Attribute id of an element in HTML serves to define an element single in DOM. That is, add fields dynamically using a id already defined does not make any sense. A reply otaciojb was concerned with this detail, but the solution is not the best, because varying the attribute name, to recover the values in PHP it would be necessary to know how many fields there are and check each global variable $_POST["episodioX"], where X is a variable value.

The best way I see is to use [] in the element name, this way, in PHP, we will receive a array with all values reported. For example:

<input type="text" name="episodios[]" value="1">
<input type="text" name="episodios[]" value="2">
<input type="text" name="episodios[]" value="3">

In PHP, doing var_dump($_POST["episodios"]) we would have ["1", "2", "3"].

This way, your code would look something like:

var episodios = 1;

$("#addEpisodeField").on("click", function(event) {

  episodios++;

  $("#episodeField").append("<input name=\"episodios[]\" type=\"text\" value=\"Episódio " + episodios + "\" class=\"form-control input-md\">");

});

$("button").on("click", function (event) {

  console.log($("form").serializeArray());

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <div class="form-group">
    <label class="col-md-4 control-label" for="textinput">Episódios</label>
    <div class="col-md-3" name="episodeField" id="episodeField">
      <input id="textinput" name="episodios[]" type="text" value="Episódio 1" class="form-control input-md">
    </div>
    <a href="#" id="addEpisodeField" class="addEpisodeField">+</a>
    <button type="button">Enviar</button>
  </div>
</form>

Note: The button Enviar and the result in console were added to verify the functioning of the code, not being part of the original code, nor being essential for the implementation of the presented solution.

Remembering that if these added elements dynamically are already positioned inside the element form will automatically be sent to PHP when the form is submitted.