양식을 제출하고 기존 div에 결과를 표시하십시오

Question

이것은 저에게 적합하지 않습니다. 결과는 활동 양식 페이지에 표시됩니다.

JQuery와 :

<script type="text/javascript"> 
$(document).ready(function() { 
    $("#em2").submit(function() { 
     $.ajax({ 
      data: $(this).serialize(), 
      type: $(this).attr('method'), 
      url: $(this).attr('action'), 
      success: function(response) { 
       $('#resultados').html(response); 
      } 
     }); 
     $('html, body').animate({ 
      scrollTop: $('#resultados').offset().top -292 
     }, 'slow'); 
     return false; 
    }); 
}); 
</script> 

HTML :

<form id="em2" name="em2" action="resultados.php" method="post"> 
    <input type="hidden" name="e" value="No" /> 
    <input type="hidden" name="b" value="empleo" /> 
    <input type="hidden" name="q" value="02" /> 
</form> 

<a href="javascript:void(0)" onclick="javascript:document.forms['em2'].submit();return false;">Ver</a> 
    . 
    . 
    . 
<div id="resultados"> 

</div> 

결과 새로운 윈도우 (resultados.php)의 표시 형태를 제출.

이유를 모르겠다.

Answer 1

트리거가 문제입니다. submit 이벤트를 트리거하는 대신 다음 줄은 단순히 기본 동작으로 폼을 전송하는 것입니다. 실제로 submit 이벤트를 트리거하기 위해 당신은 이러한 양식 중 하나를 사용하여 이벤트를 트리거하기 위해 submit 버튼이 필요하거나 jQuery를 사용합니다 : $('#em2').submit(), $('#em2').trigger('submit')을 :

<a href="javascript:void(0)" onclick="javascript:document.forms['em2'].submit();return false;">Ver</a> 

을 어느 this working example 같이 다음으로 변경 :

<a href="javascript:void(0)" onclick="javascript:$('#em2').submit();return false;">Ver</a> 

또는 인라인 js를 피하고 다음을 수행하십시오 (권장).

<a id='theTrigger' href='#'>Ver</a> 

$(function() { 
    $('#theTrigger').on('click', function() { 
     $('#em2').submit(); 
    }); 
}); 

Wh 효과적으로 코드를 변경합니다 :

$(document).ready(function() { 
    $('#theTrigger').on('click', function() { 
     $('#em2').submit(); 
    });  
    $("#em2").submit(function() { 
     $.ajax({ 
      data: $(this).serialize(), 
      type: $(this).attr('method'), 
      url: $(this).attr('action'), 
      success: function(response) { 
       $('#resultados').html(response); 
      } 
     }); 
     $('html, body').animate({ 
      scrollTop: $('#resultados').offset().top -292 
     }, 'slow'); 
     return false; 
    }); 
}); 

Answer 2

양식 요소의 기본 동작은 "동작"속성에 넣은 페이지를 표시하는 것입니다. 이것에 당신은 당신의 jQuery 코드의이 줄을 변경하여이 문제를 해결할 수 있습니다

...

$("#em2").submit(function() { 
    $.ajax({ 

... :

$("#em2").submit(function(e) { 
    e.preventDefault(); 
    $.ajax({ 

이 방법, 기본 HTML 형식을 방지 할 수 있습니다 행동!