Question:
I need to dynamically create and remove div´s
for a form I have, I've done it using a table, but now I was asked for div´s
. I tried to make an adaptation but I couldn't, what I need is to create a button to insert the div´s
and one to remove them if necessary.
My complete form was:
<section>
<div class="container">
<div class="container">
<div class="row">
<header class="text-center margin-top-20">
<h4 align="center">Preencha os campos para gerar a impressão do termo</h4>
</header>
<br>
<header class="text-center margin-top-20">
<h4 align="center">Informações Autorizador</h4>
</header>
<br>
<div class="col-sm-1"></div>
<div class="col-sm-10">
<form id="frmCadastro" class="sky-form clearfix" action="" method="post" target="_blank">
<div class="row">
<div class="col-md-4 col-sm-4">
<input type="text" name="NomeAutorizador" id="NomeAutorizador" value="" class="form-control required" tabindex="2" placeholder="Nome">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-4 col-sm-4">
<input type="text" name="NacAutorizador" id="NacAutorizador" value="" class="form-control required" tabindex="2" placeholder="Nacionalidade">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-4 col-sm-4">
<input type="text" name="ProfAutorizador" id="ProfAutorizador" value="" class="form-control required" tabindex="2" placeholder="Profisssão">
<i class="fancy-arrow"></i>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<input type="text" name="CPFAutorizador" id="CPFAutorizador" value="" class="form-control required" tabindex="2" placeholder="CPF">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-6 col-sm-6">
<input type="text" name="RGAutorizador" id="RGAutorizador" value="" class="form-control required" tabindex="2" placeholder="RG">
<i class="fancy-arrow"></i>
</div>
</div>
<div class="row">
<div class="col-md-6 col-sm-6">
<input type="text" name="EndAutorizador" id="EndAutorizador" value="" class="form-control required" tabindex="2" placeholder="Endereço">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-4 col-sm-4">
<input type="text" name="CidadeAutorizador" id="CidadeAutorizador" value="" class="form-control required" tabindex="2" placeholder="Cidade">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-2 col-sm-2">
<input type="text" name="UFAutorizador" id="UFAutorizador" value="" class="form-control required" tabindex="2" placeholder="UF">
<i class="fancy-arrow"></i>
</div>
</div>
<header class="text-center margin-top-20">
<h4 align="center">Informações Autorizado</h4>
</header>
<br/>
// ESSA ROW QUE PRECISO INSERIR
<div class="row">
<div class="col-md-4 col-sm-4">
<input type="text" name="NomeAutorizado" id="NomeAutorizado" value="" class="form-control required" tabindex="2" placeholder="Nome">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-4 col-sm-4">
<input type="text" name="CPFAutorizado" id="CPFAutorizado" value="" class="form-control required" tabindex="2" placeholder="CPF">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-4 col-sm-4">
<input type="text" name="RGAutorizado" id="RGAutorizado" value="" class="form-control required" tabindex="2" placeholder="RG">
<i class="fancy-arrow"></i>
</div>
</div>
<div class="row">
<div class="col-md-4 col-sm-4">
<input type="text" name="BancoAutorizado" id="BancoAutorizado" value="" class="form-control required" tabindex="2" placeholder="Banco">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-4 col-sm-4">
<input type="text" name="AgenciaAutorizado" id="AgenciaAutorizado" value="" class="form-control required" tabindex="2" placeholder="Agência">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-4 col-sm-4">
<input type="text" name="CCAutorizado" id="CCAutorizado" value="" class="form-control required" tabindex="2" placeholder="Conta Corrente">
<i class="fancy-arrow"></i>
</div>
</div>
// ESSA ROW QUE PRECISO INSERIR**
<header class="text-center margin-top-20">
<h4 align="center">Local</h4>
</header>
<br/>
<div class="row">
<div class="form-group">
<div class="col-md-12 col-sm-12">
<select name="Unicoop" class="form-control pointer required" id="Unicoop">
<option value="0">Unicoop</option>
<?php foreach ($ResUnicoop as $Unicoop) { ?>
<option value="<?php echo $Unicoop->IdUnicoop ?>"><?php echo $Unicoop->Nome ?></option>
<?php } ?>
</select>
<i class="fancy-arrow"></i>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-md-12">
<button class="btn btn-primary pull-right btn-block">IMPRIMIR</button>
</div>
</div>
<div id="msgBusca" style="padding: 10px;">
<!-- Mensagens -->
</div>
</div>
<div class="col-sm-1"></div>
</div>
</div>
</div>
</section>
I have several rows
in this form, but the one I need to insert the most is this one:
<div class="row">
<div class="col-md-4 col-sm-4">
<input type="text" name="BancoAutorizado" id="BancoAutorizado" value="" class="form-control required" tabindex="2" placeholder="Banco">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-4 col-sm-4">
<input type="text" name="AgenciaAutorizado" id="AgenciaAutorizado" value="" class="form-control required" tabindex="2" placeholder="Agência">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-4 col-sm-4">
<input type="text" name="CCAutorizado" id="CCAutorizado" value="" class="form-control required" tabindex="2" placeholder="Conta Corrente">
<i class="fancy-arrow"></i>
</div>
</div>
My form has this ID:
<form id="frmCadastro" class="sky-form clearfix" action="" method="post" target="_blank">
I won't post what I tried to do because honestly it won't be of any use.
Answer:
I suggest you create a div
to .row
you want to add. Why? Because it will make adding the new .row
. As they are loose in the middle of the <form>
, it would be too complicated to add the new ones.
I created a div
with id="dadosbanco"
and put the two .row
inside it. This way we will have this div
as a reference and the work becomes extremely simple.
I created an Add button to add the new .row
and a Remove button on each line to remove the respective line. I also put a code in the function that prevents all lines from being removed, and at least one must remain.
See the example below that you should adapt to your Bootstrap:
var cloneform = $('#dadosbanco').html();
$(document).on('click','.remDiv, .addDiv', function(e){
var thisClass = Array.from(e.target.classList);
~thisClass.indexOf('remDiv')
?
($('.remDiv').length > 1
?
$(this).closest('.row').prev().add($(this).closest('.row')).remove()
:
0)
:
$('#dadosbanco').append(cloneform);
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="frmCadastro" class="sky-form clearfix" action="" method="post" target="_blank">
OUTRAS DIVS E CONTEÚDO AQUI
<div id="dadosbanco">
<div class="row">
<div class="col-md-3 col-sm-3">
<input type="text" name="NomeAutorizado[]" id="NomeAutorizado" value="" class="form-control required" tabindex="2" placeholder="Nome">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-3 col-sm-3">
<input type="text" name="CPFAutorizado[]" id="CPFAutorizado" value="" class="form-control required" tabindex="2" placeholder="CPF">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-3 col-sm-3">
<input type="text" name="RGAutorizado[]" id="RGAutorizado" value="" class="form-control required" tabindex="2" placeholder="RG">
<i class="fancy-arrow"></i>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-3">
<input type="text" name="BancoAutorizado[]" id="BancoAutorizado" value="" class="form-control required" tabindex="2" placeholder="Banco">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-3 col-sm-3">
<input type="text" name="AgenciaAutorizado[]" id="AgenciaAutorizado" value="" class="form-control required" tabindex="2" placeholder="Agência">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-3 col-sm-3">
<input type="text" name="CCAutorizado[]" id="CCAutorizado" value="" class="form-control required" tabindex="2" placeholder="Conta Corrente">
<i class="fancy-arrow"></i>
</div>
<div class="col-md-3 col-sm-3">
<input type="button" value="Remover" class="remDiv btn btn-styles" />
</div>
</div>
</div>
<br />
<input type="button" value="Adicionar" class="addDiv" />
<br />
MAIS DIVS E CONTEÚDO AQUI
</form>
GRADES
- Added
[]
to field names to be sent in array form. - Regarding the
id
's of the fields, if they are not to be used, I suggest you remove them, because when you create a new line, theid
's will be repeated and this will cause problems if you are using them. I suggest instead ofid
's use classes.