jQuery ajax를 사용하여 텍스트를 편집하는 방법은 무엇입니까?

-1

양식 제출 및 아약스를 사용하여 텍스트를 편집하는 방법 이름 & 성별 ?? 첫 번째 버튼을 클릭하면 첫 번째 이름 만 변경됩니다. & 성별 두 번째 클릭하면 두 번째 이름을 변경하십시오. & 성별! 어떻게 수행하나요?jQuery ajax를 사용하여 텍스트를 편집하는 방법은 무엇입니까?

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; 

} 
?>

출처

2012-09-28 user962408

귀하의 질문은 명확하지 않습니다. 모든 양식은 하나의 제출 버튼 만 가지고 있지만 두 번째 버튼에 관해 뭔가 말하고 있습니다. 그리고 여기에 u라는 이름과 두 번째 이름에 대해서 이야기하는 이름과 u 만 있습니다. – CRDave

아약스를 보낸 양식에 영향을 미치고 3 가지 모두에 영향을 미치고 있습니까? –

입력 한 이름과 성별로 편집하십시오. 예 : 이름 : 톰, 피터를 입력하면 이름이 톰에서 피터로 바뀌고 Mary와 다른 사람은 바뀌지 않습니다. – user962408

넌 성공 처리기 내부의 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-28 05:39:53

나는 그것을 시험해 본다. 그러나 아무것도 변화하지 않는다! – user962408

이것은 제출 된 양식의 .display 요소 만 대상으로합니다. –

-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-28 05:40:08 Rodrigo

'return false'를'e.preventDefault()'로 변경해도 아무 것도 고치지 않습니다.'return false'가 기본 동작을 방해하기 때문입니다. –

jQuery ajax를 사용하여 텍스트를 편집하는 방법은 무엇입니까?

답변

관련 문제