How to create dynamic input within form

Asked

Viewed 1,309 times

0

First of all before you say you already have answers, I looked before and I didn’t find.

Next, I want to make one form, with several dynamic inputs where the person chooses a garment in each input and at the end generates the pdf (that part is already ok) What do you mean ? It starts first with a "Click here" button, after which it creates the first input, and then, according to the person’s click, it creates more.

The part of the creation of input I’ve already done it, the problem is that it creates in the body and not within the form. And the div lsRef is not created either

Follows the code 

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>

javascript html dom

  • Fields are being inserted into the form, more precisely into the divForm... Your problem is in capturing these camps in CatalogoPDF.php why is he expecting a collection of lsRef instead of lsRef1, lsRef2 ... to infinity and beyond?

  • When I manually create HTML input into the form, it works normal. But when I create input through javascript, it does not create in the form, it creates directly in the body (out of all that is div) and so I do not receive the data from it via post

  • Structurally they are being created within the form, see by the inspection in the browser, what may be happening is that they are not being included in the FormData, include the excerpt from CatalogoPDF.php, where is receiving the post

  • So the html and script you’re testing is different than what you posted in the question

  • I figured out the problem, I had a functionsCatalogo.jsx and a functionsCatalogo.js. I fixed the functionsCatalogo.js and was calling the functionsCatalogo.jsx

  • Thank you very much

Show 1 more comment

1 answer

0


See the example below that reproduces the behavior and some observations:

  • there is no tag </br>
  • name your variables with something that makes sense, don’t use 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>

Browser other questions tagged javascript html dom

You are not signed in. Login or sign up in order to post.