2014-04-21 2 views
3

나는 다음과 같은 HTML 코드가 다음 자바 스크립트를 사용하여자바 스크립트 리디렉션되지 페이지

<html> 
    <head> 
     <script type="text/javascript" src="buttonClicked.js"></script> 
    </head> 
    <body> 
     <form id="confirmChangeId" name="selectionForm" method="POST"> 
      <input id="btnChange" type="submit" value="Change"> 
     </form> 
    </body> 
</html> 

을 : 파이어 폭스를 사용

window.onload = function() { 
    initFunc(); 
} 

var initFunc = function() { 
    var change = document.getElementById("btnChange"); 
    change.onclick=function() { 
     window.location.href='http://stackoverflow.com'; 
     //alert("change button clicked"); // If this line is uncommented, then the page re-direction does occur 
    } 
} 

, 경고가 JS 파일에 주석 때 다음 리디렉션가 발생 . 추가 스패너를 작동 시키려면 Chrome이나 Opera를 사용할 때 리디렉션이 전혀 발생하지 않습니다. 나는 여기에 작은 것을 분명히 놓치고 있지만 그것이 무엇인지를 알 수 없다. 제안?

+4

를 시도? 무슨 일이 일어나고있는 것처럼 보이지만 귀하의 양식이 제출되는 것을 막는 것은 아무것도 없습니다. – j08691

+2

또는 양식이 제출되지 않도록하십시오. change.onclick = function (e) {e.preventDefault(); // 다른 것들} –

+0

감사합니다. 이 플러스 마이클스 대답은 훨씬 더 우아한 해결책을 만듭니다! 경고는 어떤 일이 일어나고 있는지 확인하기 위해서만 던져졌습니다. 실제로 페이지 리디렉션을 허용하는 완전한 우연이었다. – eldubleu

답변

2

리디렉션이 안정적으로 작동하게하려면 onlick 기능 끝에 return false;을 추가해야합니다.

참고 : 실제로는 속성을 사용하는 대신 개체에 이벤트 수신기를 연결해야합니다. 당신의 function.otherwaise 형태

var change = document.getElementById("btnChange"); 
change.addEventListener('click', function(event) { 
    event.preventDefault(); // stops the click from completing 
    window.location.href='http://stackoverflow.com'; 
}, false); 
+0

+1 for addEventListener –

+0

감사합니다. JS 초보자가 내 머리카락을 꺼내서 너무 오랫동안 이걸 작동 시키려고 노력했다. – eldubleu

1

추가 return false; 전에 submited

var initFunc = function() { 
var change = document.getElementById("btnChange"); 
change.onclick=function() { 
    window.location.href='http://stackoverflow.com'; 
    return false; 
    //alert("change button clicked"); // If this line is uncommented, then the page re-   direction does occur 
    } 
} 
1

아래 코드는 작동합니다 리디렉션되고. onlcik 함수에 return false를 추가하는 것이 중요합니다. 이벤트 리스너가 필요합니다.

은 아래를 참조하십시오 : 버튼에 제출에서 버튼 유형을 변경

<script> 
window.onload = function() { 
    initFunc(); 
} 

var initFunc = function() { 
    var change = document.getElementById("btnChange"); 
change.addEventListener('click', function(event) { 
    event.preventDefault(); // stops the click from completing 
    window.location.href='http://stackoverflow.com'; 
}, false); 
} 
</script> 

<html> 
    <head> 

    </head> 
    <body> 
     <form id="confirmChangeId" name="selectionForm" method="POST"> 
      <input id="btnChange" type="submit" value="Change"> 
     </form> 
    </body> 
</html> 
관련 문제