多克隆选择菜单使用JQuery提交表单？

即时通讯尝试做一个简单的表单，其中有一个选择菜单与克隆和删除按钮，一旦这些选择菜单中的任何一个改变它必须张贴表单使用.Ajax调用。它的工作，但有一些问题 HTML多克隆选择菜单使用JQuery提交表单？

<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>

$(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); 
    } 
    }); 
    }); 
});

它有2个问题第一次当我点击删除按钮就先删除原来的选择菜单，然后克隆一个，并保持最后一个克隆我需要的是先删除克隆的菜单，并保留原来的一个

第二个问题的提交表单只有当原始菜单改变我需要的是提交表单每当任何菜单改变原始或克隆。下面是从动作PHP页面的PHP代码它的东西简单只是为了显示结果 PHP

<?php 
print_r ($_POST['lang']); 
?>

感谢

来源

2012-07-08 Marco

如果你有两个不同的问题，你应该让两个独立的问题 – 2012-07-08 03:33:57

@tereško我认为这将是垃圾邮件:(因为它们是彼此相关 – Marco 2012-07-08 03:38:37

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/

来源

2012-07-08 06:33:12 SMathew

多克隆选择菜单使用JQuery提交表单？

回答

相关问题