0

クローンと削除ボタンのある選択メニューを含む単純なフォームを作成しようとしています。これらの選択メニューのいずれかが変更されたら、.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つの問題があります。削除ボタンをクリックすると、最初に元の選択メニューが削除され、次に複製されたものが削除され、最後に複製されたものが保持されます。必要なのは、最初に複製されたメニューを削除して、元のメニューを保持することです。

2番目に、元のメニューが変更された場合にのみ送信フォームを発行します。必要なのは、メニューが元のメニューまたは複製されたメニューを変更するたびにフォームを送信することです。以下は、アクションPHPページのPHPコードで、結果PHPを表示するための単純なものです。

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

ありがとう

4

1 に答える 1

0

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-08T06:33:12.520 に答える