How to clone form in the right place of the page - JavaScript

Question

How to clone form in the right place of the page - JavaScript

Navigation

#1 by (0 votes)

0

Folks, I used a code to clone a form when the user clicks the add button, but when it clicks add, the form clones underneath the submit. I have no idea what the problem is. Help me find out, please.

var newid = 1;
function addForm() {
	var form = document.getElementById("form")
	var clone = form.cloneNode(true);
	clone.id = clone.id+newid;
	document.getElementById("div").appendChild(clone);
	newid = newid+1;
}

function removeForm(){
	document.getElementById("div").lastChild.remove();

}

body{
    margin: 3% 0 3% 0;
}
.container {
    width: 30%;
    margin: 0 auto;
    padding: 25px;
    background: #fff;
    box-shadow: 0px 4px 20px rgba( 0,0,0,0.33 );
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: table;
    position: static;

}

#submit {
    color: white;
    font-size: 12pt;
    border-radius: 5px;
    width: 100%;
    height: 40px;
    background: -moz-linear-gradient(
        top,
        #AA002B 0%,
        #DD0033);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#AA002B),
        to(#DD0033));
}

input{
    border-radius: 5px;
    width: 99%;
    height: 30px;
    margin-top: 5px;

}

select {
    border-radius: 5px;
    width: 100%;
    height: 30px;
    margin-top: 5px;

}

.botaoimg{
    margin: 2% auto;
   
}
#mais{

   background-color: green;

}

#menos{
 
   background-color: red;
}
.button{
    cursor: pointer;
    width: 49%;
    color: white;
    font-size: 12pt;
    border-radius: 5px;
    height: 40px;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="estilo.css">
  <script type="text/javascript" src="js/script.js"></script>
  <script type="text/javascript" src="plus.js"></script>
  <title>FormEvents</title>
</head>
<body>
  <div class="container">
    <!-- Onsubmit "valida se enviou" -->
    <form method="POST" onsubmit="return false">

      <!-- Metodo importante para calendário. -->



      <input type="text"  name="conteudo" onfocus="focouNoCampo()" placeholder="Conteudo Remessa ex: 3274" /><br><br>
      <input type="text"  name="pedido" onfocus="focouNoCampo()" placeholder="Número Pedido ex: ['2020011111']" /><br><br>
      <input type="text"  name="totPeso" onfocus="focouNoCampo()" placeholder="Peso total em KG: '0.5'" /><br><br>
      <input type="text"  name="totValor" onfocus="focouNoCampo()" placeholder="Valor total: '500'" /><br><br>

      <select>
        <option >Package</option>
        <option >Expresso</option>
        <option >Economico</option>
      </select><br><br>
      <input type="text"  name="conta" onfocus="focouNoCampo()" placeholder="Conta Corrente" onblur="desfocouDoCampo()" /><br><br>
      <select name="tpColeta" onchange="mudouOpcao(this)">
        <option >S - Levar remessa até a unidade</option>
        <option >K - Solicitar coleta da Unidade</option>
      </select><br><br>  
      <select name="TipoFrete" onchange="mudouOpcao(this)">
        <option >0 - Normal</option>
        <option >1 - SubContratação</option>
        <option >2 - Redespacho</option>.
        <option >3 - Redespacho Intermediário</option>.
      </select><br><br>
<div id="div">
  <fieldset id="form">
    <legend>Informações do Produto por Unidade</legend>
    <h4>Dados DFE</h4>
    CFOP<input type="number" name="cfop" placeholder="Ex.: 6909"/>
    DANFE CTE<input type="text" name="danfeCte" placeholder="Ex.: 000000000000000000000000000000000000000"/>
    NR DOC<input type="number" name="nrDoc" placeholder="Ex.: 00000000"/>
    SERIE<input type="number" name="serie" placeholder="Ex.: 0"/>
    TP DOCUMENTO<input type="number" name="tpDocumento" placeholder="Ex.: 2"/>
    VALOR<input type="text" name="valor" placeholder="Ex.: 20.2"/>

    &nbsp

    <h4>Dados Volume</h4>
    Altura<input type="number" name="altura" placeholder="Ex.: 10"/>
    Comprimento<input type="number" name="comprimento" placeholder="Ex.: 10"/>
    Identificador<input type="text" name="identificador" placeholder="Ex.: 1234567890"/>
    Largura<input type="number" name="largura" placeholder="Ex.: 10"/>
    Peso<input type="text" name="peso" placeholder="Ex.: 1.0"/>
    <div class="botaoimg">
      <input class="button" type="button" id="mais" onclick="addForm()" id="adicionar" value="Adicionar Produto"></button>
      <input class="button" type="button" id="menos" onclick="removeForm()" id="adicionar" value="Remover Produto"></button>
    </div>
  </fieldset>

  <div>

    <!-- FIM-->
    
  </form>

</div>

  <div class="submit">
      <input id="submit" type="submit" value="Incluir"/>
    </div>


</body>
</html>

javascript

asked by anonymous 29.11.2018 / 13:52

1 answer

View 6 previous days How to put text on top of a "datapoint" chart chart?

score 0 · Accepted Answer

Hello @Andy Lime.

The "problem" in your code is in the position that javascript "clones" the form. In your example the line that "clones" the form in a certain position is this:

document.getElementById("div").appendChild(clone);

* see comments on the function of appendChild (); But what the javascript was doing there is trying to find an element in your document with the id "div" so the function is called getElementeById (). But from what I saw in your html does not have a block with that id.

I figured the block you wanted to clone was just below the comment:

    <!-- FIM-->

So what I did was insert a "paste" id in the "" which comes just before.

That way the new code looked like this:

document.getElementById("colar").appendChild(clone);

And the div got:

 <div id="colar">

In this way javascript will now look for the id "paste" that we insert as quoted and put the content there.

Otherwise, it would be nice to make the corrections mentioned in the comment so your code is correct and does not present any more problems.

I hope I have helped and I am available.

Embrace

var newid = 1;
function addForm() {
	var form = document.getElementById("form")
	var clone = form.cloneNode(true);
	clone.id = clone.id+newid;
	document.getElementById("colar").appendChild(clone);
	newid = newid+1;
}

function removeForm(){
	document.getElementById("div").lastChild.remove();

}

body{
    margin: 3% 0 3% 0;
}
.container {
    width: 30%;
    margin: 0 auto;
    padding: 25px;
    background: #fff;
    box-shadow: 0px 4px 20px rgba( 0,0,0,0.33 );
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    display: table;
    position: static;

}

#submit {
    color: white;
    font-size: 12pt;
    border-radius: 5px;
    width: 100%;
    height: 40px;
    background: -moz-linear-gradient(
        top,
        #AA002B 0%,
        #DD0033);
    background: -webkit-gradient(
        linear, left top, left bottom, 
        from(#AA002B),
        to(#DD0033));
}

input{
    border-radius: 5px;
    width: 99%;
    height: 30px;
    margin-top: 5px;

}

select {
    border-radius: 5px;
    width: 100%;
    height: 30px;
    margin-top: 5px;

}

.botaoimg{
    margin: 2% auto;
   
}
#mais{

   background-color: green;

}

#menos{
 
   background-color: red;
}
.button{
    cursor: pointer;
    width: 49%;
    color: white;
    font-size: 12pt;
    border-radius: 5px;
    height: 40px;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="estilo.css">
  <script type="text/javascript" src="js/script.js"></script>
  <script type="text/javascript" src="plus.js"></script>
  <title>FormEvents</title>
</head>
<body>
  <div class="container">
    <!-- Onsubmit "valida se enviou" -->
    <form method="POST" onsubmit="return false">

      <!-- Metodo importante para calendário. -->



      <input type="text"  name="conteudo" onfocus="focouNoCampo()" placeholder="Conteudo Remessa ex: 3274" /><br><br>
      <input type="text"  name="pedido" onfocus="focouNoCampo()" placeholder="Número Pedido ex: ['2020011111']" /><br><br>
      <input type="text"  name="totPeso" onfocus="focouNoCampo()" placeholder="Peso total em KG: '0.5'" /><br><br>
      <input type="text"  name="totValor" onfocus="focouNoCampo()" placeholder="Valor total: '500'" /><br><br>

      <select>
        <option >Package</option>
        <option >Expresso</option>
        <option >Economico</option>
      </select><br><br>
      <input type="text"  name="conta" onfocus="focouNoCampo()" placeholder="Conta Corrente" onblur="desfocouDoCampo()" /><br><br>
      <select name="tpColeta" onchange="mudouOpcao(this)">
        <option >S - Levar remessa até a unidade</option>
        <option >K - Solicitar coleta da Unidade</option>
      </select><br><br>  
      <select name="TipoFrete" onchange="mudouOpcao(this)">
        <option >0 - Normal</option>
        <option >1 - SubContratação</option>
        <option >2 - Redespacho</option>.
        <option >3 - Redespacho Intermediário</option>.
      </select><br><br>
<div id="div">
  <fieldset id="form">
    <legend>Informações do Produto por Unidade</legend>
    <h4>Dados DFE</h4>
    CFOP<input type="number" name="cfop" placeholder="Ex.: 6909"/>
    DANFE CTE<input type="text" name="danfeCte" placeholder="Ex.: 000000000000000000000000000000000000000"/>
    NR DOC<input type="number" name="nrDoc" placeholder="Ex.: 00000000"/>
    SERIE<input type="number" name="serie" placeholder="Ex.: 0"/>
    TP DOCUMENTO<input type="number" name="tpDocumento" placeholder="Ex.: 2"/>
    VALOR<input type="text" name="valor" placeholder="Ex.: 20.2"/>

    &nbsp

    <h4>Dados Volume</h4>
    Altura<input type="number" name="altura" placeholder="Ex.: 10"/>
    Comprimento<input type="number" name="comprimento" placeholder="Ex.: 10"/>
    Identificador<input type="text" name="identificador" placeholder="Ex.: 1234567890"/>
    Largura<input type="number" name="largura" placeholder="Ex.: 10"/>
    Peso<input type="text" name="peso" placeholder="Ex.: 1.0"/>
    <div class="botaoimg">
      <input class="button" type="button" id="mais" onclick="addForm()" id="adicionar" value="Adicionar Produto"></button>
      <input class="button" type="button" id="menos" onclick="removeForm()" id="adicionar" value="Remover Produto"></input>
    </div>
  </fieldset>

  <div id="colar">

    <!-- FIM-->
  </div>  
  </form>



  <div class="submit">
      <input id="submit" type="submit" value="Incluir"/>
    </div>


</body>
</html>