How to create dynamic input within form

Question

How to create dynamic input within form

Navigation

#1 by (0 votes)

0

First before they say they already have answers, I looked before and did not find it.

Next, I'm trying to make a form , with several dynamic inputs where the person chooses a garment in each input and in the end generates the pdf (This part is already ok) As well ? Start first with a "Click here" button, after that it creates the first input, and then, according to the click of the person, it creates more.

The input creation part I've already been able to do, the problem is that it builds on body and not on form . And the lsRef is also not created

Follow 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

asked by anonymous 14.09.2018 / 18:38

1 answer

How to get span text? but when one has an img in that span of error! Tomcat7 by Eclipse: Where is the application directory?

score 0 · Accepted Answer

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

there is no tag </br>
name your variables with something that makes sense, do not use x, y, z

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>