링크가 제대로 작동하지 않는 원인이됩니까?

Question

편집 할 수없는 HTML이있는 전자 상거래 사이트에서 작업하고 있습니다. 그들이 제공하는 기능 중 하나는 "빠른"장바구니에 추가 버튼입니다.이 버튼을 클릭하면 페이지에 남아 있지만 방금 추가 한 항목을 포함하여 카트의 내용을 보여주는 작은 미니 창이 팝업됩니다. 제품의 카테고리 목록에 표시 될 때 모든 제품에이 빠른 추가 링크를 추가하는 작은 스크립트를 작성했지만이 링크를 클릭하면 미니 창을 표시하지 않고 실제 장바구니 페이지로 이동합니다.

나는 이것이 형태 안에 있기 때문에 일어난다 고 생각한다. 나는 틀릴 수도 있지만 그것이 그 일이 일어나는 이유를 생각할 수있는 유일한 것입니다. 와 관계있는의 HTML :

<form class="search_results_section" method="post" name="MainForm" id="MainForm" action="/searchresults.asp" onsubmit="return OnSubmitSearchForm(event, this);"> 
    <!-- other stuff --> 
     <a class="addit" href="/ShoppingCart.asp?ProductCode=BBB-DWCB">Add To Cart</a> 
    <!-- other stuff --> 
</form> 

<a class="addit" href="/ShoppingCart.asp?ProductCode=BBB-DWCB">Add To Cart</a> 

두 링크가 정확히 동일,하지만 난 형태의 외부 바닥에 하나를 클릭하면, 그것은 내가, 이는 원하는 것을 페이지에 당신을 유지하지만, 열어 미니 카트 창. 제품 자체에있는 양식 내의 하나가 나를 다른 페이지로 안내합니다. 왜 이런 일이 일어날 지, 아니면 내가 해결할 수있는 방법에 대한 통찰력이 있습니까? 나는 시도했다 (하지만 작동하지 않습니다)

한 가지가 :

$(document).ready(function(){ 
    var $form = $('form[action="/searchresults.asp"]'); 
    $form.submit(function(){ 
     $.post($(this).attr('action'), $(this).serialize(), function(response){ 
      // 
     },'json'); 
     return false; 
    }); 
}); 

은 어떤 도움에 감사드립니다!

<form name="MyForm" method="post" action="" ...> 

Answer 1

양식은 다음이

<form class="search_results_section" method="post" name="MainForm" id="MainForm" action="/searchresults.asp" onsubmit="return OnSubmitSearchForm(event, this);"> 

같은 것을 제거 onsubmit="return OnSubmitSearchForm(event, this);하고 사용하는 것입니다 : 당신이 자신을 다시 양식을 제출하는 경우

Answer 2

, 당신은 지정 작업이 필요하지 않습니다 코드

$(document).ready(function(){ 
    $('#MainForm').submit(function(e){ 
     e.preventDefault(); 
     $.post($(this).attr('action'), $(this).serialize(), function(response){ 
      console.log(response) 
     },'json'); // you suppose to return json from the server 
    }); 
}); 

ID가이므로 0)이므로 양식 제출 (제출 중단)의 기본 동작을 방해하는 코드 e.preventDefault();에서이 방법을 사용하는 것이 좋습니다.

업데이트 :

또한, 형태, 당신은 button/submit 대신,이 코드의 주요 문제

<a class="addit" href="/ShoppingCart.asp?ProductCode=BBB-DWCB">Add To Cart</a> 

사용과 같은 a 태그 대신 다른 페이지로 이동하는 것이있다 양식 제출.양식을 편집하고에 처리기를 바인딩하는 submit 버튼 대신 <a> 태그를 다음 한 사용할 필요가없는 경우

:

<form class="search_results_section" method="post" name="MainForm" id="MainForm" action="/searchresults.asp"> 
    <!-- other stuff --> 

    <input type="submit" class="addit" name="btn_sub" /> 
</form> 

업데이트와 같은 양식 보이는 것을 확인 당신이을 사용하고 있기 때문에 $_GET 배열에서 값을 가져, 서버 측에서,

$('#MainForm a.addit').click(function(e){ 
    e.preventDefault(); 
    $.get($(this).attr('href')+'&'+$(this).closest('form').serialize(), function(response){ 
     console.log(response) 
    },'json'); 
}); 

같은 링크의 경우, 뭔가를 클릭하고에 <a> 태그 (href="/ShoppingCart.asp?ProductCode=BBB-DWCB")로 URL을 입력하십시오. 따라서 url의 끝에 직렬화 된 양식 데이터를 추가하고 post (필요하지 않은 경우)을 피하십시오. 그래서, 당신의 url 마침내 때문에

$(this).attr('href')+'&'+$(this).closest('form').serialize()