0

Primeiramente antes que digam que já tem respostas, procurei antes e não achei.

Seguinte, estou querendo fazer um form, com vários inputs dinâmicos onde a pessoa escolhe uma peça de roupa em cada input e no final gera o pdf (Essa parte já está ok) Como assim ? Inicia primeiramente com um botão "Clique aqui", após isso ele cria o primeiro input, e em seguida, de acordo com o clique da pessoa, ele vai criando mais.

A parte da criação do input eu já consegui fazer, o problema é que ele cria no body e não dentro do form. E a div lsRef também não é criada

Segue o código

var CountProds = 1;

function AddInput() {
  h = CountProds;
  var form = document.getElementById("divForm");
  var input = document.createElement("INPUT");
  var div = document.createElement("div");

  input.setAttribute("type", "text");
  input.setAttribute("id", "ref" + h);
  input.setAttribute("onkeyup", "lsRef()");
  input.setAttribute("name", "ref" + h);

  div.setAttribute("id", "lsRef" + h);
  div.setAttribute("name", "lsRef" + h);

  form.appendChild(input);
  CountProds++;

}
   
<!DOCTYPE html>
<html>

<head>
  <script type="text/javascript" src="javascript/functionsCatalogo.jsx"></script>
  <title>Criar Catalogo</title>
</head>

<body>
  <div id="div1" style="border: 1px solid #606060">
essa div seria um cabeçario
<h2 style="color: red; text-align: center; font-size: 50px;">Crie seu catálogo</h2>
<p style="font-size: 20px;">Escolha as fotos que deseja:</p>
<br>

<form id="formProd" method="post" action="CatalogoPDF.php">
  <div id="divForm"></div>
  <input type="button" onclick="AddInput()" value="Clique Aqui" />
  <!--
  <input type="hidden" id="ref1" value="015EP" name="ref1" />
  <input type="hidden" id="ref2" value="002E" name="ref2" />
  <input type="hidden" id="ref3" value="015" name="ref3" />
  -->

  <input type="submit" name="submitCatalogo" value="Gerar PDF">
</form>
  </div>
  <div style="border: 1px solid #606060">div onde o usuário vai escolher os produtos<br>usar javascript para seguir o processo: 1- cliente escolhe qual referencia. <br>Ai aparece as imagens (pequenas) pra ele escolher quais das imagens daquela referencia ele quer. Após escolhido, deixar
um Vezinho de confirmação. 2-c javascript criar outra div pra ver se o usuario deseja outra referencia.. depois chamar a makeCatalogoPDF, que deve ser uma classe em PHP.
<br>
<br>


  </div>
</body>

</html>

6
  • Os campos estão sendo inseridos dentro do form, mais precisamente dentro do divForm... O seu problema é em capturar esses campos no CatalogoPDF.php por que ele está esperando uma coleção de lsRef ao invés de lsRef1, lsRef2 ... ao infinito e além? Commented 14/09/2018 às 17:07
  • Quando eu crio manualmente no HTML os input dentro do form, funciona normal. Mas quando eu vou criar o input através do javascript, ele não cria no form, ele cria diretamente no body (fora de tudo quanto é div) e assim não recebo os dados dele via post Commented 14/09/2018 às 17:27
  • Estruturalmente eles estão sendo criados dentro do form, veja pela inspeção no browser, o que talvez esteja acontecendo é que eles não estão sendo incluídos no FormData, inclua o trecho do CatalogoPDF.php, onde está recebendo o posto Commented 14/09/2018 às 17:53
  • Então o html e o script que você está testando é diferente do que você postou na pergunta Commented 14/09/2018 às 18:10
  • Descobri o problema, eu tinha um functionsCatalogo.jsx e um functionsCatalogo.js. Eu arrumei o functionsCatalogo.js e estava chamando o functionsCatalogo.jsx Commented 20/09/2018 às 18:20

1 Resposta 1

0

Veja o exemplo abaixo que reproduz o comportamento e algumas observações:

  • não existe a tag </br>
  • nomeie as suas variáveis com algo que faça sentido, não utilize x,y,z

inserir a descrição da imagem aqui

var CountProds = 1;

function AddInput() {
  h = CountProds;
  var form = document.getElementById("divForm");
  var input = document.createElement("INPUT");
  var div = document.createElement("div");

  input.setAttribute("type", "text");
  input.setAttribute("id", "ref" + h);
  input.setAttribute("onkeyup", "lsRef()");
  input.setAttribute("name", "ref" + h);

  div.setAttribute("id", "lsRef" + h);
  div.setAttribute("name", "lsRef" + h);

  form.appendChild(input);
  CountProds++;

}
input {
  display: block;
  margin: 5px;
}
<html>

<head>
  <script type="text/javascript" src="javascript/functionsCatalogo.jsx"></script>
  <title>Criar Catalogo</title>
</head>

<body>
  <div id="div1" style="border: 1px solid #606060">
    essa div seria um cabeçario
    <h2 style="color: red; text-align: center; font-size: 50px;">Crie seu catálogo</h2>
    <p style="font-size: 20px;">Escolha as fotos que deseja:</p>
    <br>

    <form id="formProd" method="post" action="CatalogoPDF.php">
      <div id="divForm"></div>
      <input type="button" onclick="AddInput()" value="Clique Aqui" />
      <!--
      <input type="hidden" id="ref1" value="015EP" name="ref1" />
      <input type="hidden" id="ref2" value="002E" name="ref2" />
      <input type="hidden" id="ref3" value="015" name="ref3" />
      -->

      <input type="submit" name="submitCatalogo" value="Gerar PDF">
    </form>
  </div>
  <div style="border: 1px solid #606060">div onde o usuário vai escolher os produtos<br>usar javascript para seguir o processo: 1- cliente escolhe qual referencia. <br>Ai aparece as imagens (pequenas) pra ele escolher quais das imagens daquela referencia ele quer. Após escolhido, deixar um
    Vezinho de confirmação. 2-c javascript criar outra div pra ver se o usuario deseja outra referencia.. depois chamar a makeCatalogoPDF, que deve ser uma classe em PHP.
    <br>
    <br>


  </div>
</body>

</html>

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 .