im试图制作一个简单的表单,该表单有一个带有克隆和删除按钮的选择菜单,一旦这些选择菜单中的任何一个发生更改,它就必须使用.Ajax调用发布表单。它有效,但有一些问题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);
}
});
});
});
它有两个问题第一个当我点击删除按钮时,它会先删除原始的选择菜单,然后删除克隆的菜单并保留最后一个克隆的菜单。我需要的是先删除克隆菜单并保留原始的
第二个问题是只有当原始菜单更改时才提交表单。我需要的是,每当任何菜单更改为原始或克隆时都提交表单。下面是动作PHP页面中的PHP代码,它只是简单地显示结果PHP
<?php
print_r ($_POST['lang']);
?>
感谢
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>
注意:字段的Id已被删除。
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);
}
});
});
});
演示:
http://jsfiddle.net/kFB5j/1/