Javascript无法提交 [英] Javascript not working on submit

问题描述

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

In my HTML file, I have the following script:

<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 的提交类型，它可以采用任何值（即插入，删除和更新），如上所示。

with two input fields named fieldx and fieldy, and a submit type named action which can take any value (i.e. insert, delete and update) as shown above.

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

Supposedly, when the delete (and only the delete) button is clicked, it will check if there are any inputs inputed on both fields. If there are none, Javascript will prompt and ask the user if it wants to proceed. If he/she clicked yes, well, the process.cgi will be executed and if not, it will just return to the HTML page. However, when I clicked delete, there was no prompt and the cgi was executed.

推荐答案

你有两个问题：

首先：

x == null && y == null

字段的值永远不会是 null 。如果没有输入任何内容，那么它们的值将是空字符串（即）。所以你需要与之比较而不是 null 。

The values of the fields will never be null. If nothing has been input into them, then their value will be a empty string (i.e. ""). So you need to compare against that and not null.

第二：

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

你有多个名为 action 的控件，所以 document.forms [form] [action] 将是一个NodeList（就像一个数组）。它不是单个元素，值将始终为 undefined 。

You have multiple controls named action, so document.forms["form"]["action"] will be a NodeList (which is like an Array). It won't be a single element, and value will always be undefined.

从提交事件中无法判断哪个表单控件用于激活表单。

There is no way to tell, from a submit event, which form control was used to activate the form.

使用 onclick 处理你喜欢的输入。

Use an onclick handler on the input you care about instead.

<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();">

---

更现代的写作方式是这些行：

---

A more modern way to write it would be along these lines:

<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无法提交的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！