为什么不显示表单值？
[英]Why won't the form value show up?
问题描述
I am creating a simple form, and I want to write to the console the value of the input once the form has been submitted and successfully validated. 
我正在创建一个简单的表单，一旦表单提交并成功验证后，我想将输入值写入控制台。 However, when I go to test my current progress, I input a random piece of text and nothing shows up, even in the console. 但是，当我测试当前进度时，我输入了一段随机文本，即使在控制台中也没有任何显示。 Here is the code I have now (excluding any commented out code): 这是我现在拥有的代码（不包括任何注释掉的代码）：
<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>
Even when I type nothing and submit the form, the alert doesn't pop up. 即使没有输入任何内容并提交表单，警报也不会弹出。 There was other posts related to form problems, but they don't have any relation to mine. 还有其他与表单问题有关的帖子，但它们与我的无关。 Is there something wrong with my code? 我的代码有问题吗？ What is the problem and how can I fix it? 有什么问题，我该如何解决？
Edit: I realized window.onload only executes the code inside of it when the window is loading. 编辑：我意识到window.onload仅在加载窗口时在其中执行代码。 After that, all functions cease to exist. 在那之后，所有功能不再存在。 In addition to removing the onload handler, I had to relocate the validation function within the body. 除了删除onload处理程序外，我还必须在主体内重新放置验证功能。
4 个解决方案
解决方案1
3 已采纳 2017-03-05 16:02:14
Your validateForm function is only visible within your onload function. 您的validateForm函数仅在onload函数中可见。 Additionally, you were comparing the form to an empty string, not the value within the text field in the form. 此外，您将表格与一个空字符串进行比较，而不是表格中文本字段中的值。 The console.log would also not have been visible, because the page refreshes before you can see it. console.log也将不可见，因为页面会刷新，然后您才能看到它。
Below is the code with those three things fixed. 下面是固定了这三件事的代码。
<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>
解决方案2
2 2017-03-05 16:04:46
There's no reason to wrap this function in an onload event handler. 没有理由将此函数包装在onload事件处理程序中。 And doing so is limiting the scope of the function definition so that the code which tries to call it can't actually see it. 这样做限制了函数定义的范围，因此尝试调用它的代码实际上看不到它。 (That is, after onload completes, the function you defined is no longer in scope and ceases to exist.) （也就是说，在onload完成之后，您定义的函数不再在作用域内，并且不再存在。）
Just remove the handler and define the function directly: 只需删除处理程序并直接定义函数即可：
<script language="Javascript">
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>
解决方案3
1 2017-03-05 16:22:01
The problem is your function validateForm() is not accessible in the scope when you click the submit. 问题是，当您单击提交时，无法在范围中访问您的函数validateForm（）。 You can verify this by call this function in the console. 您可以通过在控制台中调用此功能来进行验证。 In your code, it's defined inside the window.onload, so please move the function out of it. 在您的代码中，它是在window.onload内部定义的，因此请将该函数移出它。
解决方案4
0 2017-03-05 16:10:20
尝试删除window.onload = function() {并仅保留validateForm函数。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.