Ir para conteúdo
orbitdigital

Input adicionado com .append() não envia os dados POST

Recommended Posts

Olá, preciso de uma ajuda com um código.

 

O script abaixo adiciona grupos de campos em um formulário. Até aí ok. Os campos são adicionados porém quando envio o formulário só recebo os dados dos inputs fixos, os que são adicionados dinamicamente não são recebidos.

 

Este é o código:

 

$(document).ready(function() {
  var max_fields = 100; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var token = $('#token').val();
  var x = 1; //initlal text box count
  
  $(add_button).on({click: function(e){ //on add input button click
    e.preventDefault();
    var length = wrapper.find("input:text").length;

    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div class="box-footer"><a href="#" class="remove_field btn btn-danger pull-right"><i class="fa fa-close"></i></a><div class="col-md-12"><h2>Novo Evento</h2></div><div class="form-group col-md-6"><label for="nome_evento">Evento</label><input type="text" class="form-control" id="nome_evento" name="evento[]" placeholder="Nome do Evento" required /></div><div class="form-group col-md-3"><label for="carencia">Carência</label><input type="text" class="form-control" id="carencia" name="carencia[]" placeholder="Dias de Carência" required /></div><div class="form-group col-md-3"><label for="reducao_carencia">Redução de Carência</label><input type="text" class="form-control" id="reducao_carencia" name="reducao_carencia[]" placeholder="Dias de Redução" /></div><div class="clearfix"></div><div class="form-group col-md-12"><label for="descricao">Mais Informações</label><textarea class="textarea" name="descricao[]" placeholder="Descreva as informações aqui!" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;" required></textarea></div></div>'); //add input box
    }

    wrapper.find("input:hidden").each(function() {
      $(this).val()
    });
    
    $(function (){
    $('.select2').select2()
    });


  }});

 

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })

});

Compartilhar este post


Link para o post
Compartilhar em outros sites

tipa esse código como código q fica melhor para vermos, e coloca o html... usa o jsfiddle se possivel.

 

Assim conseguimos "testar"

 

o html é importante para vermos onde você esta incluindo esse html... qual o elemente q recebe o append.... ele esta dentro de um form? etc

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Vamos lá, fiz um teste e os campos são enviados, o problema pode ser em como você está capturando eles no seu php.

 

Meu teste com 3 eventos:

 

nome=Nome &mais_informacoes=Mais Informações text area&evento[]=nome do evento1&carencia[]=carencia1&reducao_carencia[]=reducaocarencia1&descricao[]=mais infos evento1&evento[]=evento 2&carencia[]=carencia2&reducao_carencia[]=redu2&descricao[]=amsiinfo2&evento[]=evento3&carencia[]=carencia3&reducao_carencia[]=reducarencia3&descricao[]=mais info 3

Compartilhar este post


Link para o post
Compartilhar em outros sites

Assim:

 

<?php
if(isset($_POST['evento'])) {
extract($_POST);
foreach(array($evento) as $info1)
foreach(array($carencia) as $info2)
foreach(array($reducao_carencia) as $info3)
foreach(array($descricao) as $info4)
for($i = 0; $i < count($info1); $i++) {
echo $info1[$i]." e ".$info2[$i]." e ".$info3[$i]." e ".$info4[$i]."<br>";
}
}
?>

Compartilhar este post


Link para o post
Compartilhar em outros sites
if(isset($_POST['evento'])) {
	$evento = $_POST['evento'];
	$carencia = $_POST['carencia'];
	$reducao_carencia = $_POST['reducao_carencia'];
	$descricao = $_POST['descricao'];
	foreach( $evento as $key => $n ) {
		echo $evento[$key]." e ".$carencia[$key]." e ".$reducao_carencia[$key]." e ".$descricao[$key]."<br>";
	}
}

tenta algo parecido com isso

  • +1 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Fiz o teste e funcionou perfeitamente...

 

com certeza a info está em alguma parte que não está chegando no seu código.

 

Usei esse html e o arquivo abaixo é: "teste.php"

 

o retorno é cada "Evento" em uma linha

 

 

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

<script>
  
  $(document).ready(function() {
  var max_fields = 100; //maximum input boxes allowed
  var wrapper = $(".input_fields_wrap"); //Fields wrapper
  var add_button = $(".add_field_button"); //Add button ID
  var token = $('#token').val();
  var x = 1; //initlal text box count
  
  $(add_button).on({click: function(e){ //on add input button click
    e.preventDefault();
    var length = wrapper.find("input:text").length;

    if (x < max_fields) { //max input box allowed
      x++; //text box increment
      $(wrapper).append('<div class="box-footer"><a href="#" class="remove_field btn btn-danger pull-right"><i class="fa fa-close"></i></a><div class="col-md-12"><h2>Novo Evento</h2></div><div class="form-group col-md-6"><label for="nome_evento">Evento</label><input type="text" class="form-control" id="nome_evento" name="evento[]" placeholder="Nome do Evento" required /></div><div class="form-group col-md-3"><label for="carencia">Carência</label><input type="text" class="form-control" id="carencia" name="carencia[]" placeholder="Dias de Carência" required /></div><div class="form-group col-md-3"><label for="reducao_carencia">Redução de Carência</label><input type="text" class="form-control" id="reducao_carencia" name="reducao_carencia[]" placeholder="Dias de Redução" /></div><div class="clearfix"></div><div class="form-group col-md-12"><label for="descricao">Mais Informações</label><textarea class="textarea" name="descricao[]" placeholder="Descreva as informações aqui!" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;" required></textarea></div></div>'); //add input box
    }
  

  
  wrapper.find("input:hidden").each(function() {
      $(this).val()
    });
  
  }});

  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
  })
  


});
</script>
<form action="teste.php" method="post">
  <div class="form-group col-md-6">
    <label for="nome">Nome Plano</label>
    <input type="text" class="form-control" id="nome" name="nome" placeholder="Nome do Plano" required />
  </div>
  <div class="form-group col-md-6">
    <label for="mais_informacoes">Mais Informações</label>
    <textarea class="textarea" name="mais_informacoes" placeholder="Descreva as informações adicionais aqui!" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;" ></textarea>
  </div>
  <div class="input_fields_wrap">
  <!-- RECEBE OS NOVOS INPUTS -->
  </div>
  <div class="form-group col-md-12">
    <button type="button" class="btn btn-full add_field_button"><i class="fa fa-plus"></i>Adicionar Evento</button>
    
    <button type="submit" class="btn btn-info pull-right" id="teste">Cadastrar</button>
  </div>
  
</form>
<?php
if(isset($_POST['evento'])) {
	$evento = $_POST['evento'];
	$carencia = $_POST['carencia'];
	$reducao_carencia = $_POST['reducao_carencia'];
	$descricao = $_POST['descricao'];
	foreach( $evento as $key => $n ) {
		echo $evento[$key]." e ".$carencia[$key]." e ".$reducao_carencia[$key]." e ".$descricao[$key]."<br>";
	}
}

?>

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Opa valeu!

 

Consegui não estava enviando porque eu estava fechando o form antes da tag section no meu codigo.

 

estava assim:

 

<form>

  <section>

</form>

</section>

 

quando ajustei a hierarquia funcionou perfeitamente.

 

Obrigado pela ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por _badi_
      Preciso de ajuda! Pode parecer uma dúvida besta, mas sou nova nessa área e não estou conseguindo resolver essa questão da facul!
      A questão é:
      1)      Faça o fluxograma e depois faça o código em Javascript de um programa  que lê  3 notas obtidas por um aluno e depois calcule  e imprima a média dos para avaliação, usando  a fórmula abaixo. Imprimir depois o conceito, conforme a tabela abaixo. Use o prompt no javascript e um botão que mostre a média e o conceito depois que do clique no mesmo.
      MA = (Nota1 + Nota2 x 2 + Nota3 x 3 + ME )/7
      Média de Aproveitamento
      Conceito
      10
      A
      7,5 e < 10
      B
      4,0 e < 7,5
      C
      < 4,0
      D
       
      Meu código ficou assim:
      <!DOCTYPE html> <html> <head>      </head> <body> Para calcular sua media e saber seu conceito, clique no botao abaixo: <br> <br> <button onclick='mostra()'>Try it</button> <p id="resp"></p> <br> <br> <script>     function mostra(){         var nota1 = prompt ("Digite a nota 1");         var resp1 = parseInt (nota1);         var nota2 = prompt ("Digite a nota 2");         var resp2 = parseInt (nota2);         var nota3 = prompt ("Digite a nota 3");         var resp3 = parseInt (nota3);         var ME = (resp1 + resp2 + resp3)/3;         var MA = resp1 + (resp2 * 2) + (resp3 * 3) + ME/7;         if (MA=10) {             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi A!");         } else if (MA=7.5&&MA<10){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi B!");         } else if (MA=4&&MA<7.5){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi C!");         } else if (MA<4){             document.getElementById("resp").innerHTML=("Sua media foi " + ME + " e seu conceito foi D!");         }         }          </script> </body> </html>  
      Mas sempre volta como conceito A, não importa os valores que coloco :(
      Obrigado!
       
    • Por Eduardo S. B. de Oliveira
      Senhores, preciso de uma ajuda, estou criando um formulário onde o checkbox fique "checked" quando clicar em cima, mas o detalhe e que quando atualizar a pagina o checkbox permaneça marcado. É possível? 
    • Por alh
      Estou seguindo as especificações corretamente do git. https://github.com/opencartbrasil/opencart-rest-api/blob/master/README.md
      Estou tendo o erro ao acessar minha página de integração:
      ERRO: Not found (entity)
      Ao acessar minha página que contém o seguinte código: categorias.php
       
      No arquivo abaixo estou colocando a minha KEY e domínio correto.
      <?php $headers = array(); $headers[] = 'Content-Type: application/json'; $headers[] = 'key: MINHAKEY'; // // Replace key value for API key OpenCart (Only numbers and letters) $ch = curl_init(); curl_setopt_array($ch, [ CURLOPT_URL => 'http://www.NOMEDOMEUDOMINIO.com.br/api.php/categories', // Replace domain and table name CURLOPT_HTTPHEADER => $headers, CURLOPT_CUSTOMREQUEST => 'GET', CURLOPT_RETURNTRANSFER => true, CURLOPT_SSL_VERIFYHOST => false, CURLOPT_SSL_VERIFYPEER => false ]); $out = curl_exec($ch); curl_close($ch); print_r( $out ); // Result json ?>
    • Por gersonab
      Tenho este sql que funciona normal:
      <?php $idtor = (int)$_GET['id_tor']; $dia = $_GET['dia']; $sql3 = "SELECT * FROM cantos INNER JOIN campeonato ON id_camp = id_campeonato INNER JOIN torneio ON id_tor = id_torneio WHERE data = :dia AND id_torneio = :idtor ORDER BY cantosfim DESC, pontos DESC, cantos DESC"; $stmt = $pdo->prepare($sql3); $stmt->bindParam(':idtor', $idtor); $stmt->bindParam(':dia', $dia); $stmt->execute(); while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) { ?> porém este outro não retorna nada, nem erro...
      <?php $idtor = (int)$_GET['id_tor']; $consul = "SELECT id_cantos, id_torneio, id_campeonato, SUM(cantosfim) AS cantfin, SUM(pontos) AS pontfin FROM cantos INNER JOIN campeonato ON id_camp = id_campeonato INNER JOIN torneio ON id_tor = id_torneio WHERE id_tor = :idtor ORDER BY pontfin DESC, cantfin DESC"; $stmt = $pdo->prepare($consul); $stmt->bindValue(':idtor', $idtor); $stmt->execute(); while ($lin = $stmt->fetch(PDO::FETCH_ASSOC)) { ?> não consigo encontrar o erro.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.