JS가 양식 태그 사이에있는 경우 JS가 실행되지 않는 이유는 무엇입니까?

Question

<script type="text/javascript"> 
window.onload = init; 

function init() { //wait for load and watch for click 
    var button = document.getElementById("searchbutton"); 
    button.onclick = handleButtonClick; 
} 

function handleButtonClick(e) { //get user input and go to a new url 
    var textinput = document.getElementById("searchinput"); 
    var searchterm = textinput.value; 
    window.location.assign("http://google.com/example/" + searchterm) 
} 
</script> 

<form> 
    <input type="text" name="search" id="searchinput"> 
</form> 
<input type="submit" value="Ara" id="searchbutton"> 

이 코드 블록에서 사용자 입력을 가져 와서 사용자 입력으로 새 URL로 이동합니다.

마지막 줄을 양식 요소로 옮기면 작동하지 않습니다. 하지만 id를 사용하여 요소를 찾습니다.

Answer 1

, 스크립트 자체를 가리 킵니다. <button type="button">을 사용하면 제출 기능이없는 단순한 버튼을 정의 할 수 있습니다.

주변 : <form> 요소가 필요하지 않은 경우 코드에서 코드를 삭제하지 않으시겠습니까?

Answer 2

고객님의 submit 버튼이 양식을 제출했기 때문인 것으로 판단됩니다.

코드에 e.preventDefault(); 및 return false;을 추가하십시오.

function handleButtonClick(e) { //get user input and go to a new url 
    e.preventDefault(); 
    var textinput = document.getElementById("searchinput"); 
    var searchterm = textinput.value; 
    window.location.assign("http://google.com/example/" + searchterm) 
    return false; 
} 

이렇게하면 양식에서 크로스 브라우저를 제출하지 않아야합니다. 대신

<input type="submit" value="Ara" id="searchbutton"> 

이 (MDN docu), 그래서 대신 자바 스크립트를 실행 버튼을 제출 한 형태로

<button type="button" id="searchbutton">Ara</button> 

귀하의 버튼을 작동, 그것은 또한 양식을 제출하려고 사용

Answer 3

아래 코드 조각에서 설명한대로 OnSubmit을 지정할 수 있으며 작동합니다.

<form method="GET" onsubmit="handleButtonClick(event)"> 
    <input type="text" name="search" id="searchinput"> 
</form> 

function handleButtonClick(e) { 

    var textinput = document.getElementById("searchinput"); 
    var searchterm = textinput.value; 
    window.location.assign("http://google.com/example/" + searchterm) 
    return false; 
}