i have an issue. How can i clone an existing div with jquery?
[Image]1
<div class="modal-body">
<div class="row">
<div class="col-md-5 text-center">
<b>Número Factura</b>
<input type="number" class="form-control" id="numero"><br/>
</div>
<div class="col-md-2 text-center">
-o-
</div>
<div class="col-md-5 text-center">
<b>Número Remisión</b>
<input type="number" class="form-control" id="remision"><br/>
</div>
<div class="col-md-12">
<b>NIT:</b>
<?php $consulta = mysqli_query($conexion, "SELECT * FROM proveedores");
$resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
<select class="form-control" id="proveedor">
<?php foreach($resultado as $r): ?>
<option value="<?php echo $r['nit']; ?>"><?php echo $r['nombre']; ?></option>
<?php endforeach; ?>
</select><br/>
</div>
<div class="col-md-2">
<input type="number" class="form-control" id="productos" value="1">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success agregar_producto" name="agregar_producto">
<i class="fas fa-user-plus" style="color: white"></i>
</button>
</div>
</div>
<br/>
<div id="contenido" class="row text-center">
<div class="col-md-4">
<b>Producto</b>
<?php $consulta = mysqli_query($conexion, "SELECT * FROM productos");
$resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
<select class="form-control" id="producto">
<?php foreach($resultado as $r): ?>
<option value="<?php echo $r['id']; ?>"><?php echo $r['descripcion']; ?></option>
<?php endforeach; ?>
</select><br/>
</div>
<div class="col-md-4">
<b>Cantidad</b>
<input type="number" class="form-control" id="cantidad"><br/>
</div>
<div class="col-md-4">
<b>Precio</b>
<input type="number" class="form-control" id="precio"><br/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success crear" name="crear">Agregar Factura</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Regresar</button>
</div>
I need to clone the div with id="contenido" when someone press the button with class="agregar_producto".
How can i solve it?
[Example]2
Is it possible? i need only an example to solve my problem.
Thx you! <3
EDIT: If a clone this inputs how can i change ids/class to this inputs?
Hi Please check below code:
<html>
<head>
<title>Sample HTML</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body bgcolor=white>
<div id="contenido" class="row text-center">
<div class="col-md-4">
<b>Producto</b>
<select class="form-control" id="producto">
<option value="product1">product1</option>
<option value="product2">product2</option>
<option value="product3">product3</option>
<option value="product4">product4</option>
<option value="product5">product5</option>
<option value="product6">product6</option>
</select><br/>
</div>
<div class="col-md-4">
<b>Cantidad</b>
<input type="number" class="form-control" id="cantidad"><br/>
</div>
<div class="col-md-4">
<b>Precio</b>
<input type="number" class="form-control" id="precio"><br/>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn agregar_producto" name="crear">Agregar Producto</button>
</div>
<script type="text/javascript">
jQuery(document).ready(function ($) {
$(".agregar_producto").on('click', function() {
var $contenido = $("#contenido:last");
var $clone = $contenido.clone();
$clone.find('input').val('');
$contenido.after($clone);
});
});
</script>
</body>
</html>
1.Id need to be unique per element so convert id="contenido" to class="contenido"
2.Use .clone()
$('.agregar_producto').on('click', function(){
var clone = $( ".contenido:first" ).clone();
$(clone).attr('id','changedId'); //change cloned element id attribute
$(clone).find('select').attr('id','changedId1'); //change cloned element children attribute also
$(clone).insertAfter( ".contenido:last" );
});
Note:- add selector(class or id) of the element after which you want to append the clone.
Reference:-
.insertAfter()
Working snippet:-
$('.agregar_producto').on('click', function(){
var clone = $( ".contenido:first" ).clone();
$(clone).attr('id','changedId'); //change cloned element id attribute
$(clone).find('select').attr('id','changedId1'); //change cloned element children attribute also
$(clone).insertAfter( ".contenido:last" );
});
#changedId{
background:yellow;
}
#changedId1{
font-size:20px;
color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-body">
<div class="row">
<div class="col-md-5 text-center">
<b>Número Factura</b>
<input type="number" class="form-control" id="numero"><br/>
</div>
<div class="col-md-2 text-center">
-o-
</div>
<div class="col-md-5 text-center">
<b>Número Remisión</b>
<input type="number" class="form-control" id="remision"><br/>
</div>
<div class="col-md-12">
<b>NIT:</b>
<?php $consulta = mysqli_query($conexion, "SELECT * FROM proveedores");
$resultado = mysqli_fetch_all($consulta, MYSQLI_ASSOC); ?>
<select class="form-control" id="proveedor">
<?php foreach($resultado as $r): ?>
<option value="<?php echo $r['nit']; ?>"><?php echo $r['nombre']; ?></option>
<?php endforeach; ?>
</select><br/>
</div>
<div class="col-md-2">
<input type="number" class="form-control" id="productos" value="1">
</div>
<div class="col-md-2">
<button type="button" class="btn btn-success agregar_producto" name="agregar_producto">
<i class="fas fa-user-plus" style="color: black">Click me to append Clone</i>
</button>
</div>
</div>
<br/>
<div class="contenido" class="row text-center">
<div class="col-md-4">
<b>Producto</b>
<select class="form-control" id="producto">
<option value="1">1</option>
<option value="1">2</option>
<option value="1">3</option>
<option value="1">4</option>
<option value="1">5</option>
</select><br/>
</div>
<div class="col-md-4">
<b>Cantidad</b>
<input type="number" class="form-control" id="cantidad"><br/>
</div>
<div class="col-md-4">
<b>Precio</b>
<input type="number" class="form-control" id="precio"><br/>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success crear" name="crear">Agregar Factura</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Regresar</button>
</div>
.clone() method create a deep copy of the set of matched elements. And .appendTo( ) to append the cloned element.
$('.agregar_producto').on('click', function(){
$( "#contenido" ).clone().appendTo( "body" );
});
$('.agregar_producto').click(function(){
$( "#contenido" ).clone().appendTo( "body" );
});
you can change the above to append the clone under specific elements.
You could easily do the following.
<div id="div1">
<p>
Content in DIV1
</p>
</div>
<div id="tgt">
</div>
jQuery snippet would be as follows.
$(document).ready(function(){
var div1 = $("#div1").clone(); //Clone the element. Assigned to the JS variable div1
div1.attr("id", "div1clone"); //Modify the necessary properties using $(element).attr()
$("#tgt").append(div1); //Append the content to where ever desired
});
This is just a very rusty sample. Check this fiddle out to see this in action.
Related
code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
code is php dynamic, how to aplly reset button i am applying many more step please help me this right or wrong and how to right way say me.
<div style="margin-top:2%;display:none; " id="filt_box" id="reset">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown" id="filter_seller_user" name="filter_seller_user[]"
multiple="multiple">
#foreach($seller_user as $key=>$value)
<option value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown" id="filter_generated_by_user"
name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="btn_filter_submit" onclick="show_reset_data();">Clear</button>
</div>
</div>
using multiple try javascript code but not apply any changes
<script src="{{asset('assets/js/jquery.min.js')}}"></script>
<script>
function show_reset_data() {
$("reset").each(function() { this.selectedIndex = 0 });
}
function show_reset_data() {
document.getElementById("reset").reset();
}
function show_reset_data() {
document.getElementById("reset").value="";
}
</script>
I inserted class="reset" in each selected field means input field and button clear Id="reset" create and simple write javascript code.
<div style="margin-top:2%;display:none; " id="filt_box">
<div class="col-md-12">
<div class="form-group col-sm-4">
<label for="filter_seller_user">Sellers</label>
<select class="form-control-dropdown reset" id="filter_seller_user" name="filter_seller_user[]" multiple="multiple">
#foreach($seller_user as $key=>$value)
<option style = "font-size:13px;" value="{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Generated By</label>
<select class="form-control-dropdown reset" id="filter_generated_by_user" name="filter_generated_by_user[]" multiple="multiple">
#foreach($clients_user as $key=>$value)
<option style = "font-size:13px;" value="clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
#foreach($main_clients_user as $key=>$value)
<option style = "font-size:13px;" value="main_clients_user-{{$value->id}}">{{$value->name}}</option>
#endforeach
</select>
</div>
<div class="form-group col-sm-4">
<label for="filter_generated_by_user">Business Name</label>
<input type="tetx" name="filter_business_name" id="filter_business_name" class="form-control reset">
</div>
</div>
<div class="col-md-12 div_btn">
<div id="err_date" class="text-danger"></div>
<button class="btn" id="btn_filter_submit" onclick="show_report_data();">Go</button>
<button class="btn" id="reset" style="background-color: #ae3029; color:white;">Clear</button>
</div>
javascript code
$("#reset").on('click', function () {
$('.reset').val('');
});
I have a data in header column which is in json format like {"API-KEY":"763754jkdsnfjk","ACTION":"HGHG"}. I want to get the key of json object in one text box and value in another textbox using foreach loop in codeigniter. I tried this method but it is not coming. can any one please help me how to achieve this.
<?
$arr=explode(',',$load_options['header']);
$opt_count=count($arr);
?>
<div class="controls" id="profs">
<form class="input-append" method="post" action="<?=base_url()?>payment_gateway/update_asset_options">
<input type="hidden" name="rowVal" id="rowVal" value="" />
<input type="hidden" name="row_count" id="row_count" value="<?=$opt_count?>" />
<input type="hidden" name="pre_count" id="pre_count" value="<?=$opt_count?>" />
<?
//print_r($arr);die;
$i=0;
foreach($arr as $key => $val)
{
$display_name=$key;
$db_val=$val;
if($i>0)
{
$remClass="removeclass".$i;
}
else
{
$remClass="";
}
?>
<div class="row <?=$remClass?>" >
<div class="col-sm-5 nopadding">
<div class="form-group">
<input type="text" class="form-control display_name" id="display_name<?=$i?>" name="display_name<?=$i?>" value="<?=$display_name?>" placeholder="Display Name" required >
</div>
</div>
<div class="col-sm-5 nopadding">
<div class="form-group ">
<input type="text" class="form-control" id="db_value<?=$i?>" name="db_value<?=$i?>" value="<?=$db_val?>" placeholder="Value" required />
<input type="hidden" class="form-control" id="def_value<?=$i?>" name="def_value<?=$i?>" value="" />
</div>
</div>
<?
if($i>0)
{?>
<div class="col-sm-2 nopadding">
<div class="input-group-btn">
<i class="fa fa-minus text-danger" ></i>
</div>
</div>
<? }
echo "</div>";
$i++;
}
?>
<div id="education_fields"></div>
<div class="clear"></div>
<div class="col-sm-12 nopadding">
<div class="input-group-btn">
<i class="fa fa-plus"></i>
</div>
</div>
<center>
<button class="btn btn-md btn-success" type="submit" >Save</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</center>
</form>
</div>
Change
$arr=explode(',',$load_options['header']);
Into this
$arr = json_decode($load_options['header'],true);
I have this form and this is my layout:
I want when the user enters the quantity the total input = qty*price.
My view
<?php $form=array('id'=>'myform');?>
<?php echo form_open('Order/submit',$form);?>
<div class="panel panel-default">
<div class="panel-heading">Customer Details</div>
<div class="panel-body">
<div class="col-xs-3">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="customer_name">
<?php foreach ($customerdata as $c):
echo "<option value ='$c->c_id'>" . $c->c_name . "</option>";
endforeach;
?>
</select>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="invoice_number" placeholder="Invoice Number"/>
</div>
<div class="col-xs-3">
<input type="text" class="form-control" name="branch" placeholder="Branch"/>
</div>
<div class="col-xs-3">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="payment_term"">
<option value="cash">Cash</option>
<option value="bank">Bank</option>
<option value="other">Other</option>
</select>
</div>
</div><!--customer panel-Body-->
<div class="panel-heading">Invoice Details
</div>
<div class="panel-body">
<div id="education_fields">
<div class="col-sm-3 nopadding">
<div class="form-group">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
<option></option>
<?php
foreach($order as $row):
echo"<option data-price='$row->p_price' value ='$row->p_id'>".$row->p_name. "</option>";
endforeach;
?>
</select>
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control qty" name="qty[]" value="" placeholder="Quantity">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control price" name="price[]" value="" placeholder="Price">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<div class="input-group">
<input type="text" class="form-control total" name="total[]" value="" placeholder="Total">
<div class="input-group-btn">
<button class="btn btn-success" type="button" onclick="education_fields();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
<div class="panel-footer"><small>Press <span class="glyphicon glyphicon-plus gs"></span> to add another product field :)</small>, <small>Press <span class="glyphicon glyphicon-minus gs"></span> to remove the last product :)</small></div>
</div>
<button type="submit" class="btn btn-primary center-block">Checkout</button>
<?php echo form_close();?>
This is my first jQuery and that used to generate a new row by + button
<script>
var room = 0;
function education_fields() {
room++;
var objTo = document.getElementById('education_fields');
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+room);
var rdiv = 'removeclass'+room;
var medo='<div class="col-sm-3 nopadding"><div class="form-group"><select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]"><option></option><?php foreach($order as $row){ ?><option data-price="<?php echo$row->p_price;?>" value ="<?php echo $row->p_id; ?>"><?php echo $row->p_name; ?></option><?php } ?></select></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control price" name="price[]" value="" placeholder="Price"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <input class="form-control" name="total[]" placeholder="Total"/><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_education_fields('+ room +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
divtest.innerHTML = medo;
objTo.appendChild(divtest);
$('select').selectpicker();
}
function remove_education_fields(rid) {
$('.removeclass'+rid).remove();
}
</script>
and this 2nd jQuery used to get product price from from drop-menu attributes and add that into price input.
<script>
function set_price( slc ) {
var price = slc.find(':selected').attr('data-price');
slc.parent().parent().next().next().find('.price').val(price);
}
$('#education_fields').on('change','select.selectpicker',function(){
set_price( $(this) );
});
</script>
var sample = $('#sample').html();
$('#sample').on('click', '.generate', function() {
$('#sample').append(sample);
});
$('#sample').on('change', 'select.selectpicker', function () {
// keyword this is your current select element
var select = $(this);
// each group of inputs share a common .form element, so use that to
// look up for closest parent .form, then down for input[name="price[]"]
// and set the input's value
select.closest('.form').find('[name^=price]').val(
select.find('option:selected').data('price')
// trigger input's keyup event (*)
).keyup();
});
// (*) note: input[type=text]'s onchange event triggers only after it loses focus; we'll use keyup event instead
// create onkeyup event on the qty and price fields
$('#sample').on('keyup', '[name^=qty], [name^=price]', function() {
// get related form
var form = $(this).closest('.form');
// get its related values
var qty = parseInt(form.find('[name^=qty]').val(), 10),
price = parseInt(form.find('[name^=price]').val(), 10);
// ensure only numbers are given
if (!isNaN(qty) && !isNaN(price)) {
// set the total
form.find('[name^=total]').val(qty * price);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="sample">
<!-- group all related blocks into a div .form -->
<!-- it makes it easier to reference in your JS -->
<div class="form">
<div class="col-sm-3 nopadding">
<div class="form-group">
<select class="selectpicker" data-show-subtext="true" data-live-search="true" name="select_product[]">
<option data-price=200 value=1>tes1</option>
<option data-price=218 value=2>tes2</option>
<option data-price=80 value=3>tes3</option>
</select>
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control" name="qty[]" value="" placeholder="Quantity">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control price" name="price[]" value="" placeholder="Price">
</div>
</div>
<div class="col-sm-3 nopadding">
<div class="form-group">
<input type="text" class="form-control " name="total[]" value="" placeholder="total" readonly>
</div>
</div>
</div>
<button class="generate" type="button">Generate New Form</button>
</div>
Note, that I am lazy instead of doing [name="price[]"], I simply did [name^=price].
Edit changed onchange to keyup.
Here i want to do,some one click edit button means, i want show the edit form in same page and in that edit form i want to show already what value wrote,that value i want to display in that form field,here i did for truck name becauze this one for input=text ,but next field i am not able to show which state already he selected,how can do this
<?php
$sql = "SELECT * FROM trucks WHERE status !='1' ORDER BY reg_date DESC";
$result = mysql_query($sql);
$cat=array();
while($row = mysql_fetch_array($result)){
echo '<tr>
<td>'.$row["truck_name"].'</td>
<td>'.Getstate($row["state_id"]).'</td>
<td>'.Getcity($row["city_id"]).'</td>
<td class="col-medium center">
<div class="btn-group btn-group-xs ">
<a class="btn btn-inverse" style="cursor:pointer;" onclick="show_edit_menu(\''.$row["id"].'\',\''.$row["truck_name"].'\',\''.$row["state_id"].'\',\''.$row["city_id"].'\')"><i class="fa fa-edit icon-only"></i>Edit</a>
<a class="btn btn-danger" onclick="truck_deletemenu('.$row["id"].')"><i class="fa fa-times icon-only"></i>Delete</a>
</div>
</td>
</tr>';
}
?><?php
$sql = "SELECT * FROM trucks WHERE status !='1' ORDER BY reg_date DESC";
$result = mysql_query($sql);
$cat=array();
while($row = mysql_fetch_array($result)){
echo '<tr>
<td>'.$row["truck_name"].'</td>
<td>'.Getstate($row["state_id"]).'</td>
<td>'.Getcity($row["city_id"]).'</td>
<td class="col-medium center">
<div class="btn-group btn-group-xs ">
<a class="btn btn-inverse" style="cursor:pointer;" onclick="show_edit_menu(\''.$row["id"].'\',\''.$row["truck_name"].'\',\''.$row["state_id"].'\',\''.$row["city_id"].'\')"><i class="fa fa-edit icon-only"></i>Edit</a>
<a class="btn btn-danger" onclick="truck_deletemenu('.$row["id"].')"><i class="fa fa-times icon-only"></i>Delete</a>
</div>
</td>
</tr>';
}
?>
<script>
function show_edit_menu(id,t_name,state_id,city_id){
$("#show_edit_menu").show();
$("#tid").val(id);//truck auto id
$("#tname").val(t_name);//Truck Name
$("#state").val(state_id);//state id
console.log(t_name);//i got truck name value here
console.log(state_id);//i got state name value here
}
</script>
<!--edit part here-->
<div class="portlet" id="show_edit_menu" style="display:none;">
<div class="portlet-heading dark">
<div class="portlet-title">
<h4>Edit Menu</h4>
</div>
<div class="portlet-widgets">
<a data-toggle="collapse" data-parent="#accordion" href="#f-3"><i class="fa fa-chevron-down"></i></a>
</div>
<div class="clearfix"></div>
</div>
<div id="f-3" class="panel-collapse collapse in">
<div class="portlet-body">
<form class="form-horizontal" role="form" id="edit_form" method="post" enctype="multipart/form-data">
<div class="form-group">
<label class="col-sm-2 control-label">Truck Name<span class="require">*</span></label>
<div class="col-sm-8">
<input type="text" class="form-control" value="" name="tname" id="tname">
<input type="hidden" class="form-control" value="" name="tid" id="tid">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">State<span class="require">*</span></label>
<div class="col-sm-8">
<select class="form-control intro-form-fixer state" required="" id="state" name="state" data-msg-required="Please enter your State" value="" aria-required="true">
<option value="1"> I want to show which state i selected</option>
</select>
<!--<input type="hidden" id="state" name="state" value="" />-->
</div>
</div>
<div class="form-actions">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-primary" onclick="edit_menu()">Submit</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
Try this:
$("#state option[value='"+state_id+"']").attr("selected", true);
instead of
$("#state").val(state_id);
I've made a jQuery function which execute when a button which contains the class button-trash is clicked. The problem is that there is no reaction when I click on the button but the alert in the $(document).ready(function() works.
HTML
<div id="div_flotte">
<div class="div_avion" style="display:none;">
<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 button-trash" type="button" 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>
JS
$(document).ready(function(){
$('.button-trash').click(function(){
alert("test");
});
alert("test");
});
EDIT :
The div .div_avionis created dynamicly by this function :
function AddAvion()
{
$( ".div_avion" ).eq(0).clone().attr({id:'div_avion'+($(".div_avion").length+1), style:'display:visible;'}).css('display', 'visible').appendTo( "#div_flotte" );
}
All right. Since you are creating a dynamic element, you can add your event like this:
$(document).on('click', '.button-trash', function() {
alert('hello');
});
Hope this helps.
If Dynamically produced button, then you should use the on() method
<script>
$(document).ready(function(){
$('.input-group').on('click','.button-trash', function(){
alert ('it is working');
alert("test");
});
alert("test");
});
</script>