輸入到JavaScript變量的表格

試圖教自己基本的JavaScript，並用這個簡單的概念堅持了幾天。輸入到JavaScript變量的表格

我想保存表單輸入到一個變量，然後執行一個函數，警報或任何與該變種。

function myFunc() { 
 
    var userName = document.getElementById("name").value; 
 
    alert("Hello, " + userName + "!"); 
 
}

<form onSubmit="myFunc" ;> 
 
    <input type="text" id="name"> 
 
    <input type="submit" value="Submit"> 
 
</form>

這實際上是從一本書的例子，但它不工作的jsfiddle和也不是我自己的服務器上。我可以從控制檯調用函數，但不會從提交按鈕執行。

我在這裏做錯了什麼？

來源

2017-09-25 Rene Raja

您忘記了()爲onSubmit屬性。

PS：還添加;到<form>標籤（無效），你忘了兩個輸入封<input> - ><input/>

function myFunc() { 
 
    var userName = document.getElementById("name").value; 
 
    alert("Hello, " + userName + "!"); 
 
}

<form onSubmit="myFunc()"> 
 
    <input type="text" id="name"/> 
 
    <input type="submit" value="Submit"/> 
 
</form>

來源

2017-09-25 14:32:06 Arthur

如果你是性學習的JS，更好地閱讀可以通過遵循設計模式以更好的方式編寫代碼（可以瞭解更多信息here

我的解決方案將是

(function() { 
 
    // variables 
 
    
 
    // cached elements 
 
    var form = document.querySelector('#form'), 
 
     nameInput = document.querySelector('#name'); 
 
    
 
    // event bindings 
 
    form.addEventListener('submit', myFunc); 
 
    
 
    // methods 
 
    function myFunc (e) { 
 
    e.preventDefault(); // prevents the page reload 
 
    
 
    alert(nameInput.value); 
 
    } 
 
})();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 

 
</head> 
 
<body> 
 
<form id="form"> 
 
    <input type="text" id="name"> 
 
    <input type="submit" value="Submit"> 
 
</form> 
 
</body> 
 
</html>

來源

2017-09-25 14:34:36 AngelSalazar

您需要在您的onsubmit表達增加兩個支架。當你想阻止頁面刷新時，你甚至可以在你的函數中使用return false。

function myFunc() { 
 
    var userName = document.getElementById("name").value; 
 
    alert("Hello, " + userName + "!"); 
 
    return false; 
 
}

<form onsubmit="myFunc()"> 
 
    <input type="text" id="name"> 
 
    <input type="submit" value="Submit"> 
 
</form>

另一種方式是將監聽器添加到您的形式，所以你可以在普通擺脫onsubmit。

function myFunc(event) { 
 
    var userName = document.getElementById("name").value; 
 
    alert("Hello, " + userName + "!"); 
 
    event.preventDefault(); 
 
} 
 

 
document.getElementsByTagName('form')[ 0 ].addEventListener('submit', myFunc);

<form> 
 
    <input type="text" id="name"> 
 
    <input type="submit" value="Submit"> 
 
</form>

但有了這個解決方案，您需要對事件參數使用preventDefault。

來源

2017-09-25 14:36:57 lumio

輸入到JavaScript變量的表格

回答

相關問題