-1

如何使用表单提交和 ajax 来编辑文本 Name & Sex ?? 当我单击第一个提交按钮时，它只会更改第一个姓名和性别如果单击第二个，只需更改第二个姓名和性别！怎么做 ？

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 选择器提供适当的上下文。这样，它会影响 class 的所有元素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 回答