Question

尝试通过这个简单的概念教自己基本的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中不起作用，也不在我自己的服务器上。我可以从控制台调用该函数，但不会从提交按钮执行。

我在这里做错了什么？

Answer 1

您忘了()进入onSubmit属性。

PS：此外，您将;添加到<form>标记中（无效），您忘记了输入结束<input> - ＆gt; <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>

Answer 2

如果您正在学习JS，请更好地阅读一下，您可以通过遵循设计模式以更好的方式编写代码（您可以了解更多here

我的解决方案将是

＆＃13;

(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);
  }
})();

＆＃13;

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

＆＃13;

Answer 3

您需要在onsubmit表达式中添加两个括号。如果您想阻止页面刷新，您甚至可以在功能中return false。

＆＃13;

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

＆＃13;

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

＆＃13;

另一种方法是在表单中添加一个监听器，这样你就可以摆脱onsubmit。

＆＃13;

function myFunc( event ) {
  var userName = document.getElementById("name").value;
  alert("Hello, " + userName + "!");
  event.preventDefault();
}

document.getElementsByTagName( 'form' )[ 0 ].addEventListener( 'submit', myFunc );

＆＃13;

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

＆＃13;

但是使用此解决方案，您需要在事件参数上使用preventDefault。

表单输入到JavaScript变量

3 个答案: