1. 首页
  2. 问题列表
  3. JavaScript无法从HTML表单正确运行
提问者：小点点

JavaScript无法从HTML表单正确运行


我正在为我的uni课程创建一个使用HTML、CSS、JavaScript和PHP的数据库的web前端。在遇到这个奇怪的问题之前，我只了解了HTML和JavaScript表单验证。

在我的HTML中，我将JavaScript链接如下：

文件名正确，我已经检查过了。

接下来，我有一个接受用户搜索的表单。它在提交时运行我的JavaScript函数，它的操作是一个PHP文件。代码如下：

<form action="dbicw2.php" onSubmit="return validate(this)">

  <input type="text" name="title">

  <input type="submit" value="submit">

</form>

再次更正PHP文件名和JS函数名。

现在，不管发生什么，我的JavaScript函数似乎总是返回True。目前，我的JS看起来像：

function validate(form) 
{
    alert("Hi")
    for (var field in form.elements) { //For elements in form
        field+="" //Incase it is undefined
        alert("This element: '" + field.value + "'")
        if (field.value.trim() == "") { //If the string is empty
            alert(field.name + " is empty.") //Alert message
            return false //Failed validation
        }
    }
    return true //Otherwise, successful validation
}

甚至顶部的警报信息都没有运行。表单只需通过并加载PHP，而不考虑JS。脚本在Edge中也不起作用。

这是令人费解的，因为我的代码几乎是我的教授的例子的克隆，它是有效的。

是什么导致Javascript没有运行而PHP操作没有完成？

编辑：我的教授的示例代码，它起作用：

HTML：

<!DOCTYPE html>
<html>
    <head>
            <title>Milena Radenkovic</title>
            <LINK REL='stylesheet' TYPE='text/css' HREF='dbicw.css'>
        <script type="text/javascript" src="dbicw.js"></script>
    
    </head>
    <body>
    
    <h1>Search for a Movie by Title</h1>
    
    <form action="search_movie_example.php" onSubmit="return validate(this)">
    Movie title:<br>
     <input type="text" name="title">
     <br>
     <br>
     <input type="submit" value="Search">
    </form>
    
    </body>
</html>

JavaScript：

function validate(form)
{
    var ok=1
    var msg=""

        for (var i = 0; i < form.length; i++) {
            if (form.elements[i].value.trim() == "") {
                msg += "'" + form.elements[i].name + "' is void. "
                ok=0
            }
        }
    
        if (ok == 0) {
            alert(msg)
            return false
        }

        else {
            return true
        }
    
}

共2个答案

匿名用户

试试看：

null

function validate(form) {
  event.preventDefault();
  alert("Hi")
  for (var field of [...form.querySelectorAll('input:not([type="submit"])')]) { //For elements in form
    alert("This element: '" + field.value + "'")
    if (field.value.trim() == "") { //If the string is empty
      alert(field.name + " is empty.") //Alert message
    }
  }
}
<form action="dbicw2.php" onsubmit="validate(this)">
  <input type="text" name="title">
  <input type="submit" value="submit">
</form>

匿名用户

我想我在你的代码中发现了一个错误（希望是错误）。真的很简单，但很普通。

您可以使用for（form.elements中的var field)对表单元素进行迭代，但这将对表单元素的索引值进行迭代，而不是对实际元素进行迭代。将in更改为of以迭代实际值。

示例：

let arr = ['foo', 'bar', 'cat'];

for (let word in arr) {
  print(word);    // prints 0, 1, 2
}

for (let word of arr) {
  print(word);    // prints foo, bar, cat
}

相关问题