Question

我试图创建一个简单的表单，其中包含带有clone和remove按钮的选择菜单，一旦这些选择菜单中的任何一个更改，它必须使用.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);
    }
    });
    });
});

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

第二次发布其提交表单只有当原始菜单改变了我需要的是每当任何菜单改变原始或克隆时提交表单。下面是来自动作PHP页面的PHP代码，它只是为了显示结果 PHP

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

由于

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>

注意：该字段的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/

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

1 个答案: