Atributo id
de um elemento no HTML serve para definir um elemento único no DOM. Ou seja, adicionar campos dinamicamente utilizando um id
já definido não faz sentido algum. A resposta do otaciojb se preocupou com este detalhe, porém a solução não é das melhores, pois variando o atributo name
, para recuperar os valores no PHP seria necessário conhecer quantos campos existem e verificar cada variável global $_POST["episodioX"]
, sendo X um valor variável.
A melhor forma que eu vejo é utilizar []
no nome do elemento, desta forma, no PHP, receberemos um array com todos os valores informados. Por exemplo:
<input type="text" name="episodios[]" value="1">
<input type="text" name="episodios[]" value="2">
<input type="text" name="episodios[]" value="3">
No PHP, fazendo var_dump($_POST["episodios"])
teríamos ["1", "2", "3"]
.
Desta forma, seu código ficaria algo como:
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>
Nota: O botão Enviar
e o resultado no console foram adicionados para verificar o funcionamento do código, não fazendo parte do código original, tão pouco sendo essenciais para a implementação da solução apresentada.
Lembrando que se esses elementos adicionados dinamicamente forem já posicionados dentro do elemento form
automaticamente serão enviados ao PHP quando o formulário for submetido.