How to clone form in the right place - Javascript

Asked

Viewed 96 times

0

Guys, I used a code to clone a form when the user clicked on the add button, but when he clicked on add, the form clones under Submit. I have no idea what the problem is. Help me find out, pf.

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

  • And where should I clone? Did you write the code? If so, could you explain it to us? Can you elaborate a [mcve]? There is a lot of code there that is not essential to the solution of the problem and could be removed.

  • Close the div before <!-- FIM -->. Instead of <div>, utilize </div>

  • Besides you’re using the element input to the button, but is using </button> to close this element (This makes no sense).

1 answer

1


Hi @Andy Lima.

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 given position is this:

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

*see comments on the appendchild() function; But what 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 you don’t have a block with this id.

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

    <!-- FIM-->

So what I did was insert a "paste" id into the "" that comes just before.

That way the new code looks like this:

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

And the div stayed: 

 <div id="colar">

That way javascript will now search for the "paste" id that we entered as quoted and put the content there.

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

I hope I’ve helped and I’m willing.

Hug

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>

  • 1

    Two caveats. 1 - The element with the id#div exists. Can be found at<div id="div">. 2 - The appendChild does not clone the element in a given position, it only includes the element.

  • @Valdeirpsr true, now that I’ve seen that div there... About the appendchild "clone" was the most didactic way I could explain, so I put "problem" in quotes, missed to put a "clone" in quotes as well. Thanks for the feedback =)

  • 1

    I discovered the problem, but thank you so much for helping !!!!!! I wanted to vote for her answer, but I don’t know if it’s possible here , so consider that I voted/like her kkkk

  • Cool that worked, if possible then post your corrections to stay as study material for those who need. Needing are there =)

Browser other questions tagged javascript

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