我正在创建一个简单的表单,我想在表单提交并成功验证后将输入的值写入控制台。然而,当我去测试我当前的进度时,我输入了一段随机文本,但没有任何显示,即使在控制台中也是如此。这是我现在的代码(不包括任何注释掉的代码):
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script language="Javascript">
window.onload = function() { // So the DOM can be defined
function validateForm() {
var form = document.forms['encrypt']['text'];
if(form == "") {
alert("Enter piece of text to encrypt");
return false;
} else {
console.log(form.value);
}
}
}
</script>
</head>
<body>
<form name="encrypt" action="#" onsubmit="return validateForm()">
Text: <input type="text" name="text">
<input type="submit" name="Submit and Encrypt!">
</form>
</body>
</html>
即使我什么都不输入并提交表单,警告也不会弹出。还有其他帖子与表单问题有关,但它们与我的没有任何关系。我的代码有问题吗?问题是什么,我该如何解决?
编辑:我意识到 window.onload
仅在加载窗口时执行其中的代码。之后,所有功能都不复存在。除了删除 onload
处理程序外,我还必须在正文中重新定位验证函数。
最佳答案
您的 validateForm 函数仅在您的 onload 函数中可见。此外,您将表单与空字符串进行比较,而不是表单文本字段中的值。 console.log 也不会可见,因为页面会在您看到之前刷新。
下面是修复了这三件事的代码。
<html>
<head>
<meta charset="utf-8" />
<script>
function validateForm() {
var text = document.forms['encrypt']['text'].value;
if(text == "") {
alert("Enter piece of text to encrypt");
return false;
} else {
alert("Entered '" + text + "', refreshing now.");
return true;
}
}
</script>
</head>
<body>
<form name="encrypt" action="#" onsubmit="return validateForm()">
Text: <input type="text" name="text">
<input type="submit" name="Submit and Encrypt!">
</form>
</body>
</html>
关于javascript - 为什么表单值不显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42610565/