1

複数のフォームを持つphpページがあり、送信がクリックされた後にjqueryで各フォームを非表示にしたい(ページを更新せずに)。フォームの ID は動的に生成され、php ページが作成されるたびに一意になります。

を使用しない場合preventDefault、以下のスクリプトはデータを送信しますが、ページを更新します (これは望ましくありません)。を使用するpreventDefaultと、フォームは引き続き送信されますが、データはありません (動作してserializeいないようです)。 

<script>
$(document).ready(function() {
    $(".connection").click(function(e) {
        e.preventDefault();
        var data = $(this).serialize();
        var element = $(this);
        var connectid = element.attr("id");
        $.ajax({
            url: "/beta/membersarea.php",
            type: "POST",
            cache: false,
            data: data,
            success: function(data) {
                $("#connected_" + connectid).hide();
            }
        });
    });
});​   
</script>
4

2 に答える 2

2

$(this)コードではフォームではなく送信ボタンです... thisjQueryハンドラーでは、ハンドラーが接続されているDOM要素です。

これから変更します：

$(".connection").click

これに：

$("form").submit(function(e) {

完全なコード:

$(document).ready(function() {
    $("form").submit(function(e) {
        e.preventDefault();
        var $element = $(this);
        var data = $element.serialize();
        $.ajax({
            url: "/beta/membersarea.php",
            type: "POST",
            cache: false,
            data: data,
            success: function(data) {
                $element.hide();
            }
        });
    });
});​
于 2012-04-16T21:30:20.880 に答える
0

preventDefault は、この場合の通常のフォーム送信であるデフォルト アクションを防止します。あなたの問題は、正しい要素(フォーム)をシリアル化していないことだと思います。これを試して

$(this)現在のアイテムを意味します。送信ボタンのクリックで $(this) にアクセスすると、フォーム内の送信ボタン要素が参照されます。送信ボタンを押しているフォームではありません。

$(document).ready(function () {
    $(".connection").click(function(e) {
        e.preventDefault();
        var data = $("form").serialize();
        var element = $(this);
        var connectid = element.attr("id");
        $.ajax({
            url: "/beta/membersarea.php",
            type: "POST",
            cache: false,
            data: data,
                success: function(data)
                {
                $("#connected_"+connectid).hide();
                }
              });
      });    
});

connectionは、送信用のボタンのクラス名であると仮定します。

于 2012-04-16T21:31:47.767 に答える