如何將數據從HTML表單傳輸到JavaScript函數？

我試圖做一個表單，接受用戶的值，然後將這些值傳遞給同一個文件中的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>

來源

2013-08-02 rafafan2010

這是什麼意思**傳輸數據**？ – Ravi

我試圖將中心頻率，帶寬，箱和值發送到JavaScript函數。現在我想記錄中心頻率到控制檯。對不起，不好的措辭。 – rafafan2010

我想，你試圖在調用函數時檢索文本框的值，是嗎？ – Ravi

您document.getElementByID應該在最後一個小寫 d，你也應該增加.value的，像這樣

document.getElementById("id").value

以獲得什麼是通過或鍵入的值

來源

2013-08-02 16:43:19

我嘗試了與jWeaver的建議結合使用的建議，並且它可以正常工作，但該值僅在控制檯中出現一秒鐘。這是否應該發生？ – rafafan2010

您的表單正在提交，因此網頁正在重新加載。在你的表單中添加這個動作=「javascript：formHandler（）; return false;」 –

如果我想將值存儲在變量中並且在頁面重新加載後沒有值消失，該怎麼辦？ – rafafan2010

存在拼寫錯誤。它應該是getElementById而不是getElementByID。

可以打印值如下安慰：

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

來源

2013-08-02 16:39:18 Harry

更好，如果你不喜歡從一個HTML表單的JavaScript函數這

<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>

來源

2013-08-02 16:44:29 Ravi

如何將數據從HTML表單傳輸到JavaScript函數？

回答

相關問題