Louis D. Louis D. - 11 months ago 100
HTML Question

Create a div by clicking on a button

I would like create a div by clicking on a button wich contains a form. Each div (form) contains informations about one plane. When I click on the save button, each plane is saved in the database. I've begun to realize the form but I don't know how to add these divs by clicking on a button. I've tried to use

$( ".div_avion" ).clone().appendTo( "#div_flotte" );
but it multiply the divs (not add).

This is the beginning of my code :

<div id="flotte" class="tab-pane fade">
<h3>Gestion de la flotte</h3><hr>
<form action="<?php echo $CurrentURL;?>" method="POST">
<div class="panel panel-default">
<div class="panel-body">
<a class="btn btn-default btn-lg" href="http://<?php echo $_SERVER[HTTP_HOST];?>/administration/hubs/gerer"><i class="fa fa-arrow-left"></i> Retour</a>
<button type="submit" class="btn btn-success btn-lg" name="button" value="saveflotte"><i class="fa fa-floppy-o"></i> Enregistrer</button>
</div>
</div>
<button onclick="AddAvion()" class="btn btn-success" type="button"><i class="fa fa-plus"></i> Ajouter un appareil</button><hr>
<div id="div_flotte">
<div class="div_avion" style="width:300px;float:left;position:relative;margin: 5px 5px 5px 5px;">
<div class="panel panel-default">
<div class="panel-heading">
<div class="form-inline">
<div class="input-group" style="width:200px">
<span class="input-group-addon" id="basic-addon1">F-BEN</span>
<input type="text" name="avions[][immat]" class="form-control" placeholder="Ex : 49" >
</div>
<div class="input-group" style="float:right;">
<button class="btn btn-danger" name="button"><i class="fa fa-trash"></i></button>
</div>
</div>
</div>
<div class="panel-body">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Marque</span>
<input type="text" name="avions[][marque]" class="form-control" placeholder="Ex : Airbus" >
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Modèle</span>
<input type="text" name="avions[][modele]" class="form-control" placeholder="Ex : 737" >
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">IATA</span>
<input type="text" name="avions[][iata]" class="form-control" placeholder="Ex : 738" >
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Type de vol</span>
<select name="avions[][type]" class="form-control-inline">
<?php
foreach ($types_vol_avion as $cle => $value) {
echo '<option value="'.$cle.'">'.$value.'</option>';
}
?>
</select>
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">Transport</span>
<select name="avions[][activite]" class="form-control-inline">
<?php
foreach ($Activite_avion as $cle => $value) {
echo '<option value="'.$cle.'">'.$value.'</option>';
}
?>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
<script>
function AddAvion()
{
$( ".div_avion" ).clone().appendTo( "#div_flotte" );
}
</script>
</div>


Have you any ideas?

Answer Source

You can use .eq function and get only the first div of class

$( ".div_avion" ).eq(0).clone().appendTo( "#div_flotte" );
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download