자바 스크립트 양식 액세스

Question

<form name = "myForm" onsubmit="foo()"> 
    <p class = "form-text">Name</p> 
    <input type = "text" name="name" /> 
    <input type = "submit" /> 
</form> 

//javascript (external file) 
function foo(){ 
    alert(document.forms["myForm"].name.value) 
} 

이 코드에 문제가 있습니까? 제출을 누르면 흰색 페이지로 이동하고 아무 일도 일어나지 않습니다.

원하는 결과 : 이름 필드

Answer 1

원하는 결과가 무엇인지 명시하지 않았으므로 양식 제출로 경고 된 값이 표시되지 않도록하려는 것입니다.

난 당신이 foo()의 결과에 그 의존을하고 싶습니다 확신하지만 당신이 해야 사용 인라인 자바 스크립트, 당신은 양식 제출을 방지하기 위해 return false;를 사용해야합니다, 그래서 대신 return false 당신이 사용할 수있는 경우 return foo();이 일어나는 경우를 방지하기 위해 여부를 선택할 수 있도록 할 :

onsubmit="return foo()" 
///JS 
function foo() { 
    alert(...); 
    return false; 
} 

같은 코드의 문제는 직접 HTML의 멋진 MVC 구조를 깨 JS를 호출하는 HTML에 의존하고 있다는 점이다

CSS 및 JavaScript. 대신 JS 코드에 이벤트 콜백을 추가하십시오.

//make sure you add an `[id]` to your form 
var form = document.getElementsById('formid'); 
form.onsubmit = foo; 

function foo() { 
    //do stuff 
    return false; 
} 

Answer 2

의 값이 경고 상자이 시도가 :

<form name = "myForm" onsubmit="foo();return false;"> 
    <p class = "form-text">Name</p> 
    <input type = "text" name="name" /> 
    <input type = "submit" /> 
</form> 

//javascript 
function foo(){ 
    alert(document.forms["myForm"].name.value) 
} 

Answer 3

문제는 양식의 제출을 ​​방해하지 않는다는 것입니다. 의도에 따라 true 또는 false 중 하나를 반환하도록 함수를 다시 작성하십시오 ("전송"은 true이고 "보내지 않음"은 false). 그런 다음 onsubmit="return foo();"을 사용하면 반환 값 foo()에 따라 양식 제출에 직접적인 영향을줍니다.