0

Tenho uma página em que o usuário pode incrementar a quantidade de campos que serão necessários, para fazer isso estou utilizando o jQuery com o seguinte código:

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>

Essa parte está ok, funciona da forma que eu queria, mas meu problema é pegar os valor desses campos e enviar ao PHP para que sejam adicionados a Base de Dados

3 Respostas 3

0

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.

1
  • A solução funcionou para mim, tive que dar umas alteradinhas mas funcionou. Muito obrigado! Commented 28/04/2017 às 0:41
0

Tente da seguinte forma, passando os name e id como fez com os value, exemplo:

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++;
  });
0

Você pode usar o seletor :input do jquery para retornar todas as tags input dentro do elemento episodeField. Adicionei um botão e um evento para manipular a ação de capturar os valores e serializar, ja no formato x-www-form-urlencoded.

Veja:

<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>

Para a função serialize funcionar todos os seus inputs devem ter o atributo name. Por isso modifiquei a linha que gera os inputs, adicionei fiz o escape das aspas com \".

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 .