javascript - 为什么表单值不显示?

标签 javascript html forms

我正在创建一个简单的表单,我想在表单提交并成功验证后将输入的值写入控制台。然而,当我去测试我当前的进度时,我输入了一段随机文本,但没有任何显示,即使在控制台中也是如此。这是我现在的代码(不包括任何注释掉的代码):

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

相关文章:

javascript - 避免下拉列表中的重复记录 Javascript PHP

javascript - $(...).getJSON 不是函数

javascript - 配置 setinterval 函数以获得无限重复

javascript - 我怎样才能使我的变量更改为与下拉菜单中的值相同?

javascript - 如何正确创建并使表单上的生日字段可提交?

javascript - 手动突出显示 Angular Form 的所有无效输入

javascript - 单击按钮将 <div> 的内容添加到文本框

javascript - 异步文件夹创建有什么意义?

javascript - 初始设置要排序的 HTML 列

javascript - 如何使用 jQuery 函数启动图像淡出和淡入