使用JavaScript獲取表單中輸入字段的值

Question

有人可以幫助我理解爲什麼控制檯日誌無法打印值，如果我將表單字段中的輸入字段換行？

HTML：

<form> 
     <input id="formEntry" type="text"> 
     <button id="btn-3">Add Custom Line</button> 
    </form> 

的JavaScript：

var addCustomLine = function(){ 
     var customLine = document.getElementById("formEntry").value; 
     console.log(customLine); 
} 

document.getElementById("btn-3").addEventListener ("click", addCustomLine, false); 

Answer 1

通過不指定按鈕類型，它默認提交父窗體。您可以通過將類型明確設置爲「按鈕」來防止此行爲。

<button type="button" id="btn-3">Add Custom Line</button> 

Answer 2

在<form>一個<button>將提交在默認情況下形成，這將導致頁面重新加載並註銷所有特效，事件處理程序了。但是，您可以防止這種行爲：

function addCustomLine(event) { 
    event.preventDefault(); 
    … 
} 

你會希望在submit事件形式的安裝一般的處理程序，而不是按鈕的click事件。