为什么拿我的表格和文件.getElementByID停止alert()触发

Why does getting my form with document.getElementByID stop alert() from firing?

本文关键字：alert 停止 触发 getElementByID 文件 我的 表格 为什么      更新时间：2023-09-26

我试图提醒表单元素的值，但这不是在最简单的功能:获取表单的元素，然后警告字符串。

当它单独存在时，警报会触发，但当我将表单的数据放入变量中时，警报不会触发。为什么?

我肯定这里可能有一个非常简单的错误，但是我被难住了。

<!DOCTYPE html>
<html>
<head>
<!-- ISTE240 Exercise 5b -->
<meta charset=utf-8 />
<title>Get elements from a form</title>
<script>
function getFormValues() {
// function to send first and last names to an 'alert' message.
   alert("test");
   var form = document.getElementById(“regForm”).elements;
}
</script>
</head>
<body>
<p>JavaScript Exercise 5b </p> 
<form id="regForm" onsubmit="getFormValues()">
First name: <input type="text" name="fname" value="Boo"><br>
Last name: <input type="text" name="lname" value="Radley"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>

默认情况下，form标记将尝试提交表单值。你必须防止默认行为，下面的demo 

document.querySelector('#regForm').onsubmit = function(e){
  e.preventDefault();
  alert('a');
  
  var form = document.getElementById("regForm").elements; //<-- wrong syntax, must be "
  console.log(form);
}
<!DOCTYPE html>
<html>
<head>
  <!-- ISTE240 Exercise 5b -->
  <meta charset=utf-8 />
  <title>Get elements from a form</title>
</head>
<body>
  <p>JavaScript Exercise 5b</p>
  <form id="regForm">
    First name:
    <input type="text" name="fname" value="Boo">
    <br>Last name:
    <input type="text" name="lname" value="Radley">
    <br>
    <input type="submit" value="Submit">
  </form>
</body>
</html>

相关文章：