preventDefault() 메소드로 jquery를 사용하여 양식 제출

Jquery를 사용하여 양식을 제출하려고합니다. 내 목표는 .ajax를 사용하여 서버에 양식을 제출하는 것입니다. 제출 후에 양식의 내용이 페이지가 다시로드되지 않고 페이지로 이동합니다 (아래의 e.preventDefault()가이를 수행 할 것입니다). 코드는 다음과 같습니다.preventDefault() 메소드로 jquery를 사용하여 양식 제출

하지만 제출을 클릭하면 양식이 다시로드 된 것 같습니다. 내 코드에 어떤 문제가 있습니까?

<!DOCTYPE html> 
<html> 
<head> 

<script src="http:////code.jquery.com/jquery-1.10.2.js"></script>  
<script type='text/javascript'> 

     $("#submitForm").submit(function(e){ 

      e.preventDefault(); 
     // some ajax code to submit the form 

      var container = document.getElementById("div2"); 
      var node = document.createTextNode("put form contents here");   
      container.appendChild(node);   

     }); 

</script> 

</head> 

<body> 
<h1>edit form here</h1> 

<div id = "div1"> 
<form id = "submitForm"> 
    <input type = "text"/> 
    <input type = "submit" value = "submit"/> 
</form> 
</div> 

<h1>show form contents here</h1> 

<div id = "div2"> 

</div> 

</body> 
</html>

출처

2016-12-09 Zhuo

때이 코드를 실행합니다 :이 코드는 나를 위해 작동합니다. 그냥 신체 부위 뒤에 놓으십시오.

$("#submitForm").submit(function(e){ 
     e.preventDefault(); 
     var container = document.getElementById("div2"); 
     var node = document.createTextNode("put form contents here");   
     container.appendChild(node);  
    });

출처

2016-12-09 18:38:50

또는 본문 섹션 아래에 javascript 파일을 넣으십시오 ... –

아직도 저를 위해 작동하지 않습니다. 너 해봤 니? – Zhuo

내 대답이 업데이트되었습니다. 이 스크립트는 본문 뒤에 있어야하므로 요소를 렌더링 했으므로 이벤트를 제대로 첨부 할 수 있습니다. –

양식이 문서에 나타나기 전에 스크립트가 실행 중입니다.

수정 :

$(document).ready(function() { 
     $("#submitForm").submit(function(e){ 

      e.preventDefault(); 
     // some ajax code to submit the form 

      var container = document.getElementById("div2"); 
      var node = document.createTextNode("put form contents here");   
      container.appendChild(node);   

     }); 
});

[수정 됨] DOMContentLoaded 이벤트가 발생

출처

2016-12-09 18:36:50

제안 된대로 코드가 변경됩니다. 여전히 작동하지 않습니다. 기묘한. – Zhuo

이상 하네. ctrl + r을 사용하여 페이지를 새로 고치려고 했습니까? –

준비 기능의 첫 번째 줄에 일부 console.log 호출을 추가하십시오. 모든 것이 실행되었는지 확인하십시오 –

preventDefault() 메소드로 jquery를 사용하여 양식 제출

답변

관련 문제