Jquery/Ajax - 모든 양식의 클래스가 동일한 경우 .serialize 할 양식을 결정하는 방법 내 mainPage.html에

Question

, 나는 동적으로 입력 태그에서 다른 값으로 각각 ..이 내 mainPage.html입니다 다양한 형태를 만들어 : 당신이 볼 수 있듯이

<form class='voteForm' method="post" action="/post/likePost/"> 
    <button class="voteButton" type="submit"> 
    </button> 
    <input type="hidden" name="postID" value="1" /> 
</form> 

<form class='voteForm' method="post" action="/post/likePost/"> 
    <button class="voteButton" type="submit"> 
    </button> 
    <input type="hidden" name="postID" value="2" /> 
</form> 

<form class='voteForm' method="post" action="/post/likePost/"> 
    <button class="voteButton" type="submit"> 
    </button> 
    <input type="hidden" name="postID" value="3" /> 
</form> 

, 세 가지 형태는 비슷 단지 자신을 가치는 다릅니다. 이제이 자동 클릭 양식 입력에 '3'의 값이 마지막 형태라고 가정 내 JS 기능

<script type='text/javascript'> 
$('.voteForm').click(function() { 
     event.preventDefault(); 
     alert($('.voteForm').serialize()); 
}); 
</script> 

문제는, 때마다 나는 형태의 하나를 클릭한다 계속이다, 그래서 내가 클릭하는 양식에 관계없이 번호 3을 계속 변경합니다. 나는 이것을했기 때문에 이것을 가정하고있다.

$('.voteForm').click 

세 가지 형태 모두가 같은 클래스이므로 자동으로 마지막 형식을 취하여 기능을 실행한다. 클릭 한 사람의 폼을 가져 와서 클래스를 변경하거나 폼에 ID를 추가하지 않고 클릭 된 폼의 입력 값을 경고하도록하려면 어떻게해야합니까? 방법이 있습니까? 모든 양식이 동일해야합니다 (입력 값 제외).

Answer 1

클릭 이벤트 처리기에는 콜백 기능에 대한 this 컨텍스트로 클릭 한 단추에 대한 참조가 제공됩니다. 당신은 하나의 형태, 또는 모든에서 어떤 형태를 가질 수 있도록

$('.voteForm').click(function() { 
    event.preventDefault(); 
    alert($(this).closest('form').serialize()); 
}); 

더 나은 아직, 마크 업을 재 설계하고, 단지 클릭되고있는 물건의 값을 사용 : 올바른 양식을 선택하는 것을 사용합니다. 이 세 가지 양식을 사용하여 모두 동일한 URL에 제출하는 것은 조금 이상합니다.