AJAX 복수 양식 양식

목록이 있습니다. 각 행은 제출 버튼이있는 양식입니다. 양식을 제출할 때 데이터는 게시물을 통해 전송되므로 결과로 div를 업데이트해야합니다. 하지만 게시물을 보낼 때 자바 스크립트가 데이터를 제대로 보내지 못하는 문제가 있습니다.AJAX 복수 양식 양식

이 인덱스 파일입니다

<!doctype html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script> 
<script> 
$(function() { 
    $(".notif-close").click(function(e) { 
     e.preventDefault(); 
     var notif_id = $(".notif_id").val(); 
     var data = 'notif_id='+ notif_id; 
     $.ajax({ 
      type: "POST", 
      url: "post.php", 
      data: data, 
      beforeSend: function(send) { 
       $("#notif_box").fadeOut(400, function() { 
        $('.loader').fadeIn(50); 
        } 
       )}, 
      success: function(html){ // this happen after we get result 
       $(".loader").fadeOut(50, function() 
       { 
        $("#notif_box").html(html).fadeIn(400); 
        $(".notif_id").val(""); 

       }); 
       return false; 
      } 
     }); 
    }); 
}); 
</script> 
</head> 
<body> 
    <form method='post' action='post.php'> 
     <input type='hidden' id='notif_id' name='1' class='notif_id' value='1' /> 
     <button type="submit" id="notif-close" class="notif-close">notif-close1</button> 
    </form> 
    <form method='post' action='post.php'> 
     <input type='hidden' id='notif_id' name='2' class='notif_id' value='2' /> 
     <button type="submit" id="notif-close" class="notif-close">notif-close2</button> 
    </form> 
    <div class='notificationsblock' id='notif_box'>Result</div> 
    <span class='loader' style="display: none; position: absolute;">Please wait...</span> 
</body> 
</html>

그리고 이것은 post.php입니다 :

<? 
sleep(2); 
print_r($_POST); 
?>

도움말 나. 내가 뭘 잘못하고 있는지 말해줘? #notif_id, #notif_close,하는 수 (과 의지 :

출처

2014-09-14 Snowman

변경하십시오. var notif_id = $ (". notif_id"). val(); var notif_id = $ (this) .val(); –

또한 당신은 또한 같은 ID가

var data = { 'notif_id' : notif_id }

변경 시도 할 수 있습니다

var notif_id = $(this).parent().find(".notif_id").val();

에

var notif_id = $(".notif_id").val();

을 변경해보십시오) 오류 및 충돌을 일으킬 수 있습니다. 고유 한 ID를 제공해야합니다. 입력 요소와 양식에 고유 한 이름을 부여하는 것도 좋은 아이디어입니다.

출처

2014-09-14 15:43:28 gskema

감사합니다. – Snowman

AJAX 복수 양식 양식

답변

관련 문제