-1

フォーム送信と ajax を使用してテキスト Name & Sex を編集するには?? 最初の送信ボタンをクリックすると、最初の名前と性別のみが変更されます 2番目のボタンをクリックすると、2番目の名前と性別が変更されます! どうやってするの ？

HTML & JS

<!-- Form1 -->
<form action="index.php" class="form_edit" >
    Name: <span class="display">Tom</span><br>
    Sex: <span class="display_sex">Male</span><br>
    <input type="text" name="name" value="" /><br>
    <input type="text" name="sex" value="" /><br>
    <input name="submit" type="submit" value="Submit" /><br><br>
</form>
<!-- Form2 -->
<form action="index.php" class="form_edit" >
    Name: <span class="display">Mary</span><br>
    Sex: <span class="display_sex">Female</span><br>
    <input type="text" name="name" value="" /><br>
    <input type="text" name="sex" value="" /><br>
    <input name="submit" type="submit" value="Submit" /><br><br>
</form>
<!-- Form3 -->
<form action="index.php" class="form_edit" >
    Name: <span class="display">John</span><br>
    Sex: <span class="display_sex">Male</span><br>
    <input type="text" name="name" value="" /><br>
    <input type="text" name="sex" value="" /><br>
    <input name="submit" type="submit" value="Submit" /><br><br>
</form>

<script type="text/javascript">

    $('.form_edit').submit(function(){
        $.ajax({
           type: "POST",
           url: "edit.php",
           data: $(this).serialize(),
           success: function(data)
           {
                $('.display').text(data);

            }
         });
        return false;
    }); 
</script>

PHP

<?php
if($_POST['name']){

    $return = '{"name":"' . $_POST['name'] . '"}';
    echo $return;

}
?>
4

2 に答える 2

0

サクセスハンドラー内のjQueryセレクターに適切なコンテキストを与える必要があります。このように、クラスを持つすべての要素に影響しますdisplay。

$('.form_edit').submit(function(){
    var form = this; // <<< added
    $.ajax({
       type: "POST",
       url: "edit.php",
       data: $(this).serialize(),
       success: function(data)
       {
            form.find('.display').text(data); // <<< modified

        }
     });
    return false;
});
于 2012-09-28T05:39:53.803 に答える
-1

次のコードを試していただけますか？

$('.form_edit').submit(function(e) {

    e.preventDefault();

    $.ajax({
       type: "POST",
       url: "edit.php",
       data: $(this).serialize(),
       success: function(data)
       {
            $('.display').text(data);

        }
     });
});
于 2012-09-28T05:40:08.423 に答える