multi cloned select menu to submit form using Jquery? - php

Question

im trying to make a simple form which have a select menu with clone and remove button and once any of those select menus changed it must post the form using .Ajax call .
its working but have some issues
HTML
<form action="action.php" method="post" id="LangForm" >
<div id="fileds">
<select name="lang[]" id="lang" class="lang">
<option value="">Select</option>
<option value="arabic">Arabic</option>
<option value="english">english</option>
</select>
</div>
</form>
<button class="clone">Clone</button>
<button class="remove">Remove</button>
<div id="content"></div>
JS
$(function(){
var counter = 1;
$(".clone").click(function(){
$('#lang').clone().appendTo('#fileds');
counter++ ;
});
$(".remove").click(function(){
if (counter > 1) {
$('#lang:last').remove();
counter-- ;
}
});
$('.lang').change(function(){
$.ajax({type:'POST',
url: 'action.php',
data:$('#LangForm').serialize(),
success: function(response) {
$('#content').html(response);
}
});
});
});
it have 2 issues
first one when i click the remove button it remove the original select menu first then the cloned one and keep the last cloned one what i need is to remove the cloned menus first and keep the original one
second issue its submit form only when original menu changed what i need is to submit form whenever any menu changed original or cloned.
below is the PHP code from the action PHP page its something simple just to show result
PHP
<?php
print_r ($_POST['lang']);
?>
Thanks

Answer 1

HTML:
<form action="action.php" method="post" id="LangForm" >
<div id="fileds">
<select name="lang[]" class="lang">
<option value="">Select</option>
<option value="arabic">Arabic</option>
<option value="english">english</option>
</select>
</div>
</form>
<button class="clone">Clone</button>
<button class="remove">Remove</button>
<div id="content"></div>​
Note: Id of the field has been removed.
JS:
$(function(){
$(".clone").click(function(){
// clone(true) will clone the element with event handlers intact.
$('.lang').last().clone(true).appendTo('#fileds');
});
$(".remove").click(function(){
var selects = $('.lang');
if (selects.length > 1) {
selects.last().remove()
}
});
$('.lang').change(function(e){
// console.log(e)
$.ajax({type:'POST',
url: 'action.php',
data:$('#LangForm').serialize(),
success: function(response) {
$('#content').html(response);
}
});
});
});​
Demo:
http://jsfiddle.net/kFB5j/1/