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>

Javascript无法提交

1 个答案: