Javascript无法提交

Question

在我的 HTML 文件中，我有以下脚本：

<script language = "javascript">
    function validation(){
        var x = document.forms["form"]["fieldx"].value;
        var y = document.forms["form"]["fieldy"].value;
        var act = document.forms["form"]["action"].value;
        if(x == null && y == null && act == "delete"){
            var z = confirm("Fields have no input. Proceed at your own risk");
            if(z==true) return true;
            else return false;
        }
    }
</script>

还有形式：

<form name="form" onsubmit="return validation()" action="cgi-bin/process.cgi" method="GET">
    <input type="text" name="fieldx" />
    <input type="text" name="fieldy" />
    <input type="submit" name="action" value="insert" />
    <input type="submit" name="action" value="delete" />
    <input type="submit" name="action" value="update" />
</form>

有两个名为 fieldx 和 fieldy 的输入字段，以及一个名为 action 的提交类型，它可以采用任何值（即插入、删除和更新），如上所示。

据说，当单击删除（并且只有删除）按钮时，它会检查两个字段上是否有任何输入。如果没有，Javascript 将提示并询问用户是否要继续。如果他/她单击是，那么 process.cgi 将被执行，如果没有，它将返回 HTML 页面。但是，当我点击删除时，没有提示，cgi被执行了。

Answer 1

你有两个问题：

第一：

x == null && y == null

字段的值永远不会是null。如果没有输入任何内容，那么它们的值将是一个空字符串（即""）。因此，您需要与之进行比较，而不是 null。

第二：

document.forms["form"]["action"].value

您有多个名为action 的控件，因此document.forms["form"]["action"] 将是一个NodeList（类似于数组）。它不会是单个元素，value 将永远是 undefined。

无法从提交事件中分辨出哪个表单控件用于激活表单。

在您关心的输入上使用onclick 处理程序。

---

<script>
    function validation(){
        var x = document.forms["form"]["fieldx"].value;
        var y = document.forms["form"]["fieldy"].value;
        if(x == "" && y == ""){
            return confirm("Fields have no input. Proceed at your own risk");
        }
    }
</script>

和

<input type="submit" name="action" value="delete" onclick="return validation();">

---

一种更现代的编写方式是：

<form action="cgi-bin/process.cgi">
    <input type="text" name="fieldx">
    <input type="text" name="fieldy">
    <input type="submit" name="action" value="insert" />
    <input type="submit" name="action" value="delete" />
    <input type="submit" name="action" value="update" />
</form>
<script>
    document.querySelector('input[value=delete]').addEventListener('click', validate);
    function validate(event) {
        var elements = this.form.elements;
        if (elements.fieldx.value == "" && elements.fieldy.value == "") {
            if (!confirm("Fields have no input. Proceed at your own risk")) {
                event.preventDefault();
            }
        }
    }
</script>