2013-08-02 2 views
1

나는 사용자로부터 값을 받아들이고 그 값을 어떤 계산을 위해 같은 파일의 JS 함수에 전달하는 폼을 만들려고한다. 난 지금 콘솔에 값을 인쇄하려고하는데, 오류가 계속 발생합니다. "Object #<HTMLDocument> has no method 'getElementByID'". 다음은 코드입니다.HTML 양식에서 JavaScript 기능으로 데이터를 전송하는 방법은 무엇입니까?

<!DOCTYPE html> 
<html> 
<body> 

<form action="javascript:formHandler();" method="get"> 
    <h1 align="center">Set the parameters you would like to visualize</h1> 

    Center Frequency: <input type="text" name="cf" id="cf"><br> 
    Bandwidth: <input type="text" name="bw" id="bw"><br> 
    Number of Bins: <input type="text" name="bins" id="bins"><br> 
    Number of Values to be Visualized: <input type="text" name="values" id="values"><br> 
    <input type="submit" value="Submit"> 
</form> 
<script> 


    function formHandler() 
    { 
      console.log(document.getElementByID("cf")); // This is where I'm getting the error 
    } 

</script> 
</body> 
</html> 
+0

** HTML 폼에서 JavaScript 기능으로 ** 데이터를 전송한다는 것은 무엇을 의미합니까? – Ravi

+0

JavaScript 함수에 중심 주파수, 대역폭, 빈 및 값을 보내려고합니다. 지금은 센터 주파수를 콘솔에 기록하고 싶습니다. 나쁜 말씨를 유감스럽게 생각합니다. – rafafan2010

+0

함수 호출시 텍스트 상자 값을 가져 오려고하는 것 같습니까? – Ravi

답변

2

document.getElementByID가 끝에 소문자 D가 있어야하고 또한 그렇게

document.getElementById("id").value처럼 .value를 추가해야합니다 :

당신은 다음과 같이 콘솔에 값을 인쇄 할 수 있습니다

패스 또는 타이핑 된 값을 얻으려면

+0

나는 jWeaver가 제안한 것과 조합하여 제안한 것을 시도해 보았지만 작동했지만, 값은 콘솔에 1 초만 나타납니다. 그게 일어날 거니? – rafafan2010

+0

양식이 제출되어 페이지가 새로 고침됩니다. 양식에이 조치 추가 = "javascript : formHandler(); false false;" –

+0

변수에 값을 저장하고 페이지가 다시로드되면 값이 사라지지 않게하려면 어떻게해야합니까? – rafafan2010

2

오타가 있습니다. getElementById이어야하며 getElementByID이 아니어야합니다.

console.log(document.getElementById("cf").value);

1

당신이 맘에 든다면

<form action='somepage.html' OnSubmit="return formHandler();" method="get"> 
<h1 align="center">Set the parameters you would like to visualize</h1> 

Center Frequency: <input type="text" name="cf" id="cf"><br> 
Bandwidth: <input type="text" name="bw" id="bw"><br> 
Number of Bins: <input type="text" name="bins" id="bins"><br> 
Number of Values to be Visualized: <input type="text" name="values" id="values"><br> 
<input type="submit" value="Submit"> 
</form> 


<script type='text/javascript'> 
function formHandler() 
{ 
     console.log(document.getElementById("cf").value); 
    return true; 
} 
</script> 
관련 문제