I have an array of text fields (user interface) that created HTML, CSS, Javascript using inside of the user interfaces.
The problem is when input elements that don't print or send the whole array. I want to print the whole array. It prints one array element.
order.php (user interface):
<div class="row">
<form id="ex_order" action="includes/exchange-order.inc.php" method="POST">
<div id="main_div" class="main_sec_div">
<div class="col-lg-12 col-ml-12">
<button type="button" id="add" class="btn btn-primary"><i class="fas fa-plus"></i></button>
</div>
<div class="col-lg-12 col-ml-12 group">
<div class="row" style="padding:0rem 1rem 1rem 1rem; padding-bottom:1.5rem; margin:2rem 0.2rem 2rem 0.2rem; background:#ccc;">
<div class="col-12 mt-5" style="margin:-1rem;">
<span style="margin-left:1rem;" class="status-p bg-primary">Passanger #1</span>
</div>
<!-- Add Ticket Information start -->
<div class="col-3 mt-5">
<div class="card">
<div class="card-body">
<h4 class="header-title">Ticket Infromation</h4>
<p class="text-muted font-14 mb-4">Here are want to add <code>Ticket Infromation</code> of Exchange Order.</p>
<div class="form-group">
<label for="example-text-input" class="col-form-label">Passenger Name</label>
<input name="p_name[]" class="form-control" type="text" id="p_name" required>
</div>
<div class="form-group">
<label for="validationCustom03">Ticket No.</label>
<input name="ticket_no[]" type="text" class="form-control" id="ticket_no" required>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<button type="submit" name="submitOrder" id="submitOrder" class="btn btn-primary mt-4 pr-4 pl-4">Save</button>
<!-- Jquery -->
<script>
$(document).ready(function() {
let i = 0;
let passCount = 1;
console.log('Default i : ', i);
// add button
$(document).on('click', '#add', function() {
i++;
console.log('Add', i);
html = `
<div class="col-lg-12 col-ml-12 second-div" id="sec_div${i}">
<div class="row" style="padding:0rem 1rem 1rem 1rem; padding-bottom:1.5rem; margin:2rem 0.2rem 2rem 0.2rem; background:#ccc;">
<div class="col-12 mt-5" style="margin:-1rem; display:flex; height:60px; align-items:center; align-content:center; justify-content:space-between;">
<div>
<span style="margin-left:1rem;" class="status-p bg-primary">Passanger #${++passCount}</span>
</div>
<div>
<button style="margin:1rem 1rem 0 0;" type="button" name="remove" id="${i}" class="btn btn-danger btn-sm remove"><i class="fa fa-close"></i></button>
</div>
</div>
<div class="col-3 mt-5">
<div class="card">
<div class="card-body">
<h4 class="header-title">Ticket Infromation</h4>
<p class="text-muted font-14 mb-4">Here are want to add <code>Ticket Infromation</code> of Exchange Order.</p>
<div class="col-md-12 mb-3">
<label for="example-text-input" class="col-form-label">Passenger Name</label>
<input name="p_name[]" class="form-control" type="text" id="p_name" required>
</div>
<div class="col-md-12 mb-3">
<label for="validationCustom03">Ticket No.</label>
<input name="ticket_no[]" type="text" class="form-control" id="ticket_no" required>
</div>
</div>
</div>
</div>
</div>
</div>`;
$('#main_div').append(html);
});
});
</script>
order.inc.php (php includes file) :
<?php
// Save Button
if (isset($_POST['submitOrder'])) {
// passenger
$p_name = $_POST['p_name'];
$ticket_no = $_POST['ticket_no'];
var_dump($p_name);
echo '<br/>';
var_dump($ticket_no);
echo '<br/>';
foreach ($p_name as $key => $value) {
echo $p_name[$key];
echo $ticket_no[$key];
echo "<br/>";
}
}
I solved my problem which returns whole array element to send to PHP includes file.
array(2) { [0]=> string(7) "6386868" [1]=> string(6) "868768" }
array(2) { [0]=> string(4) "6868" [1]=> string(4) "6868" }
The problem is the DOM element.
I don't put the <form> tag into currect place. When I click the add button, jquery is adding out of <form> tag.
Solution:
I changed the <form> tag outside of bootstrap <div> tag which works fine that returns whole array element.
Related
I have a function that clears the entire div and it disappears but still appears in the inspect (html). This is a real problem because we have this input type field on the email and I got this empty data in email. I only want when this value is not chosen to completely remove me from html and inspect. Look at my code and try to catch the error. The most important things in the whole code that you need to pay attention are onchange="checkSelected()" in html and first script tag which manipulate with that. It should simply become a display none but it still stands there.
<div class="modal fade" id="montageModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content" style="display: flex;">
<div class="modal-body">
<form id="schedule_form" class="clearfix" action="index.php?route=api/reifenmontage" method="post">
<div class="container-fluid">
<div class="step_1" >
<h3 class="modal-title">Reifenmontage Termin buchen </h3>
<div class="row termin_row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<label>Pneu-Typ</label>
</div>
</div>
<div class="col-xs-12 col-sm-6">
<div class="row">
<select onchange="checkSelected()" class="form-control" name="pneu" id="pneu">
<option value="Motorrad">Motorrad</option>
<option value="Auto">Auto</option>
</select>
</div>
</div>
</div>
<div id="additionalRow" class="row termin_row" >
<div id="reifenmontage-input" class="row termin_row">
<div class="col-xs-12 col-sm-4">
<div class="row">
<label>Mark und model</label>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<select name="marka" class="form-control" id="button-getdata">
</select>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="row">
<select name="model" class="form-control" id="result" >
</select>
</div>
</div>
</div>
</div>
<div class="row termin_row">
<div class="col-sm-4 col-xs-12">
<div class="row"><label>2. Terminvorschlag</label></div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="row">
<div class="input-group date" id="date-2" data-termin="1">
<input type='text' class="form-control" name="date[1]" />
<span class="input-group-addon">um</span>
</div>
</div>
</div>
<div class="col-sm-4 col-xs-6">
<div class="row">
<div class="input-group time" id="time-2" data-termin="1">
<input type='text' class="form-control" name="time[1]" />
<span class="input-group-addon">Uhr</span>
</div>
</div>
</div>
</div>
<div class="row">
<div class="checkbox">
<label>
<input type="checkbox" name="accept" id="accept"> Ich akzeptiere die Teilnahmebedingungen
</label>
</div>
</div>
<div class="row text-center">
<button type="button" class="btn btn-primary btn-lg btn-submit" id="next_step" disabled="disabled">Anfrage senden</button>
</div>
</div>
<div class="step_2">
<h3 class="modal-title">Your contact info</h3>
<div class="">
<div class="form-group clearfix">
<input type="text" name="name" value="<?= $user['name'] ?>" placeholder="Name and Lastname" class="form-control name text" required />
</div>
<div class="form-group clearfix">
<input type="text" name="phone" value="<?= $user['phone'] ?>" placeholder="Phone" class="form-control phone text" required />
</div>
<div class="form-group clearfix">
<input type="email" name="email" value="<?= $user['email'] ?>" placeholder="Email" class="form-control email text" required />
</div>
<div class="text-center">
<button type="submit" id="submit" class="btn btn-default btn-lg btn-submit" >Suchen</button>
</div>
</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">SCHLIESSEN</button>
</div>
</div>
</div>
</div>
and my script tag
<script type="text/javascript">
let selectItem = document.getElementById('pneu');
let additionalRow = document.getElementById('additionalRow');
function checkSelected() {
if (selectItem.selectedIndex == "1") {
additionalRow.style.display = 'none';
} else {
additionalRow.style.display = 'block';
}
}
</script>
<script type="text/javascript">
$('#button-getdata').on('change', function() {
$.ajax({
url: 'index.php?route=api/reifenmontage/get_marka_data',
type: 'post',
data: $('#reifenmontage-input select'),
dataType: 'json',
beforeSend: function() {
},
success: function(json) {
if (json['success']) {
$("#result").empty();
for (i in json['success']) {
var element = json['success'][i];
var o = new Option(element['model'], element['model']);
$("#result").append(o);
html = "\t<option value=\""+ element['model'] + "\">" + element['model'] + "</option>\n";
$("#result").append(o);
}
// document.getElementById("schedule_form").reset();
}
}
});
});
</script>
<script type="text/javascript">
$.ajax({
url: 'index.php?route=api/reifenmontage/mark',
context: document.body,
success: function(data) {
const selectControl = $('#button-getdata');
selectControl.html(data.map(ExtractData).join(''));
}
});
function ExtractData(item) {
return ` <option value="${item.value}">${item.label}</option>`;
}
</script>
Try variant with detaching/attaching DOM elements
<script type="text/javascript">
let selectItem = document.getElementById('pneu');
//let additionalRow = document.getElementById('additionalRow');
let detached = '';
function checkSelected() {
if (selectItem.selectedIndex == "1") {
detached = $('#reifenmontage-input').detach();
} else {
detached.appendTo('#additionalRow');
}
}
</script>
My actual html code:
<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="<?php echo $adminData->name; ?>">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="<?php echo $adminData->email; ?>">
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
</div>
</div>
</div>
I have multiple such panels, each one with a button that has specific ID. My goal is to collect all the input within the panel that the button was pressed. Although this sounds easy, my MAIN goal is to reuse the same function on multiple pages that have multiple panels (since the structures is simillar), to then use ajax to update the information. The only thing that I would need to provide the function is the id of the button so it can find automatically the relative input.
I am trying to accomplish this in vanilla js, though im ok with jquery.
My actual js code:
document.getElementById('savePersInfo').onclick = function(){
var inputArray = ['adminName', 'adminEmail'];
console.log(collectInfo(inputArray));
};
function collectInfo(inputArray){
$inputValueArray = []
for(var c = 0; c < inputArray.length; c++){
$inputValueArray[c] = document.querySelectorAll('[name="' + inputArray[c] + '"]')[0].value;
}
return $inputValueArray;
}
As you see here I need to specify the name of the input to be able to retrieve it, what I want is not to do that and have JS find it automatically based on the panel is was clicked on.
Any suggestions/ideas on how this can be accomplished ?
ps: ignore the inline styling and other layout stuff, early development phase.
You can use either javasscript's closest() or jQuery's closest(), and with those find the closest element being ancestor to both the button and input's, e.g. panel-body.
From there you then simply use that element as starting point, e.g. with javascript element.querySelectorAll), and select all inputs and grab their value.
Note, if to use the javascript version and support IE (it doesn't know of closest()), you can make use of the "polyfill" I added at the end.
Updated based on a comment, where I added a checkbox and select to my "javascript" code sample to show it works with those too, and how to get the button id.
Stack snippet - javascript
document.querySelectorAll('button').forEach( function(btn) {
btn.addEventListener('click', findInputs);
})
function findInputs() {
console.clear();
var button_id = this.id;
this.closest('.panel-body').querySelectorAll('input, select').forEach( function(inp) {
var test_checked = ((inp.type == 'checkbox' && inp.checked) ? ' checked' : '');
console.log(button_id, inp.value + test_checked)
})
}
<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="name 1">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="email 1">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Test</span>
<input type="checkbox" name="adminTest" class="form-control" value="test 1">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Test 2</span>
<select name="adminTest2" class="form-control">
<option value="Test2-a">Test2-a</option>
<option selected value="Test2-b">Test2-b</option>
<option value="Test2-c">Test2-c</option>
</select>
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
</div>
</div>
</div>
Stack snippet - jQuery
$('button').each( function() {
$(this).click(findInputs);
})
function findInputs() {
$(this).closest('.panel-body').find('input').each( function() {
console.log( $(this).val() );
})
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="name 1">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="email 1">
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
</div>
</div>
</div>
<hr>
<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal 2
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="name 2">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="email 2">
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo2">Guardar Alteração 2</button>
</div>
</div>
</div>
Add javascript closest() support for IE9+
if (!Element.prototype.matches)
Element.prototype.matches = Element.prototype.msMatchesSelector ||
Element.prototype.webkitMatchesSelector;
if (!Element.prototype.closest)
Element.prototype.closest = function(s) {
var el = this;
if (!document.documentElement.contains(el)) return null;
do {
if (el.matches(s)) return el;
el = el.parentElement || el.parentNode;
} while (el !== null && el.nodeType === 1);
return null;
};
Src: https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
You can use Element.closest() on the element with the passed id to target the panel you are looking for. Then use Array.prototype.map() to return the value of all inputs from the selected panel.
Try the following way:
document.getElementById('savePersInfo').onclick = function(){
console.log(collectInfo(this.id));
};
function collectInfo(id){
var panel = document.getElementById(id).closest(".panel.panel-primary")
var $inputValueArray = [...panel.querySelectorAll('input[type=text]')].map(i => i.value);
return $inputValueArray;
}
<div class="panel panel-primary">
<div class="panel-heading">
Informação Pessoal
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Nome</span>
<input type="text" name="adminName" class="form-control" value="John Michale Kane">
</div>
</div>
<div class="col-xs-12 col-md-6" style="margin-top: 2%; margin-bottom: 2%;">
<div class="input-group">
<span class="input-group-addon">Email</span>
<input type="text" name="adminEmail" class="form-control" value="john#gmail.com">
</div>
</div>
<div class="col-xs-12" style="margin-top: 2%; margin-bottom: 2%;">
<button type="button" class="btn btn-success pull-right" id="savePersInfo">Guardar Alteração</button>
</div>
</div>
</div>
i have a form as the following
<form method="POST" name="addItem" role="form" ng-submit="saveAdd()">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Create Item</h4>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<strong>Category : </strong>
<div class="form-group">
<select ng-model="form.cid" placeholder="Category" name="cid" class="form-control" required >
<option value="1">abc</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6">
<strong>Title : </strong>
<div class="form-group">
<input ng-model="form.title" type="text" placeholder="Name" name="title" class="form-control" required />
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<strong>Description : </strong>
<div class="form-group" >
<textarea ng-model="form.description" class="form-control" required>
</textarea>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<strong>Alias : </strong>
<div class="form-group" >
<textarea ng-model="form.item_alias" class="form-control" required>
</textarea>
</div>
</div>
</div>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" ng-disabled="addItem.$invalid" class="btn btn-primary">Submit</button>
</div>
</div>
</form>
and the angluarjs function will pass the data to laravel backend.
$scope.saveAdd = function(){
dataFactory.httpRequest('items','POST',{},$scope.form).then(function(data) {
$scope.data.push(data);
$(".modal").modal("hide");
});
}
the laravel backend error:
a foreign key constraint fails (`laravel_ang`.`items`, CONSTRAINT
`items_cid_foreign` FOREIGN KEY (`cid`) REFERENCES `category` (`id`)) (SQL:
insert into `items` (`title`, `description`, `item_alias`, `updated_at`,
`created_at`) values (test, 123, 23, 2016-11-12 09:41:35, 2016-11-12 09:41:35))
At laravel route, it is a resource controller:
Route::resource('items', 'ItemController');
In controller, the function:
public function store(Request $request)
{
$input = $request->all();
$create = Item::create($input);
return response($create);
}
Any ideas to include cid in insert statement?
I have a javascript containing a form with image, radio button and text boxes.
When I click on the delete hyperlink, I want to get the rel of that link.
How can I go about getting it?
Form
<script type="text/template" id="imageTemplate">
<div class="row gc_photo" id="gc_photo_{{id}}" style=" border-bottom:1px solid #ddd; padding-bottom:20px; margin-bottom:20px;">
<div class="col-md-2">
<input type="hidden" name="images[{{id}}][filename]" value="{{filename}}"/>
<img class="gc_thumbnail" src="<?php echo base_url('../product_images/{{filename}}');?>" style="padding:5px; border:1px solid #ddd"/>
</div>
<div class="col-md-10">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<input name="images[{{id}}][alt]" value="{{alt}}" class="form-control" placeholder="<?php echo lang('alt_tag');?>"/>
</div>
</div>
<div class="col-md-4">
<div class="checkbox">
<label>
<input type="radio" name="primary_image" value="{{id}}" {{#primary}}checked="checked"{{/primary}}/> <?php echo lang('main_image');?>
</label>
</div>
</div>
<div class="col-md-4">
<a onclick="return remove_image($(this));" rel="{{id}}" class="btn btn-danger pull-right"><i class="icon-times "></i></a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<label><?php echo lang('caption');?></label>
<textarea name="images[{{id}}][caption]" class="form-control" rows="3">{{caption}}</textarea>
</div>
</div>
</div>
</div>
</script>
Function to delete
function remove_image(img)
{
if(confirm('<?php echo lang('confirm_remove_image');?>'))
{
var id = img.attr('rel');
alert(id);
}
}
You can make use of jQuery click handler here. Remove onclick attribute from anchor tag and write below click handler
$(function(){
$('a.btn.btn-danger').click(function(){
if(confirm('<?php echo lang('confirm_remove_image');?>'))
{
alert($(this).attr('rel'));
}
});
});
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?
You can use .eq function and get only the first div of class
$( ".div_avion" ).eq(0).clone().appendTo( "#div_flotte" );
Yeah $( ".div_avion" ).clone().appendTo( "#div_flotte" ); should work. The problem is that you are selecting a div with a class (Use id instead b/c your guaranteed only one unique instance). Second, the div that you are selecting contains other child divs inside of it (that's why it multiplying). I hope this helps.
Here you have a simple example using query http://jsfiddle.net/4dEsJ/1/
$(document).ready(function() {
$("button[name='addDom']").click(function() {
var domElement = $('<div class="module_holder"><div class="module_item"><img src="images/i-5.png" alt="Sweep Stakes" /></div></div>');
$(this).after(domElement);
});
});