Function for add and remove button - to clone form

Question

Function for add and remove button - to clone form

Navigation

#1 by (1 votes)

0

Good afternoon, I have the following question: I have a training form form, with the following fields in dropdown:

GROUP EXERCISE SERIES REPEAT LOAD PAUSE

and would like the option to repeat the field, thus:

GROUP EXERCISE SERIES REPEAT LOAD PAUSE [ADD BUTTON] [REMOVE BUTTON]

And when I clicked the button, the same fields reappeared, how could I do this?

Thank you. [newbie]

javascript html

asked by anonymous 20.08.2018 / 17:51

1 answer

JQuery to swap small Code :: Blocks does not print the pointer value

score 1 · Answer 1

You could do as described below. However you will have to try to take care of the duplicate ids at the time of submitting the form. You can deal in javascript to change the duplicate id. Could you explain why you want this duplication? Maybe I can give you a better solution than this duplication

var newid = 1;
function adicionaForm() {
  var formulario = document.getElementById("form")
  var cln = formulario.cloneNode(true);
  cln.id = cln.id+newid;
  document.getElementById("div").append(cln);
  newid = newid+1;
}

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

}

#div form label{
  display: block;
  padding: 3px;
}

#div form input{
border-radius: 3px;
border: 1px solid #ccc;
width:100%;
}
#div form{
margin-bottom:10px;
}

<div id="div">
  <form id="form">
    <label>Grupo</label>
    <input type="text"><br/>
    <label>Exercício</label>
    <input type="text"><br/>
    <label>Série</label>
    <input type="text"><br/>
    <label>Repetição</label>
    <input type="text"><br/>
    <label>Carga</label>
    <input type="text"><br/>
    <label>Pausa</label>
    <input type="text"><br/>
  </form>
</div>
  <button type="button" onclick="adicionaForm()" id="adicionar">Adicionar Exercício</button>
  <button type="button" onclick="removerForm()" id="adicionar">Remover Exercício</button>