Question

我在javascript中的FORM中有一个SPAN元素的问题。我在学习'形式＆amp;验证'w / headfirst js书和有一些例子如下：

- HTML

<form name="orderform" ...>
...
<input id="zipcode" type="text" name="zipcode" onblur="validateZipcode(this, document.getElementById('zipcode_help'));" />
<span id="zipcode_help"></span>
....
<input type="button" name="submit" onclick="placeOrder(this.form);" />
</form>

- 脚本

function validateZipcode(inputField, helpText) {
....
helpText.innerHTML = "Please enter a number";
....
}

function placeOrder(form) {
...
if (validateZipcode(form["zipcode"], form["zipcode_help"]) {
form.submit();
....
}

这是我的问题。（这与我写的标题不一样，顺便说一句：/） span函数如何在函数placeOrder中称为“form [”zipcode_help“]？我知道所有表单字段都可以使用其“name”属性引用。我认为span元素不能像那样，因为它不属于某个表单，甚至没有名称属性。

我现在稍微改变了我的问题：“document.getElementById（”zipcode_help“）”如何等于“form [”zipcode_help“]？getElementById方法找到的THING是SPAN，而不是FORM FIELD。而且，“form []”中的“zipcode_help”是一个ID，而不是NAME属性，所以在我看来它在语法上甚至是错误的！

Answer 1

您的范围有ID，因此请使用document.getElementById() method：

if (validateZipcode(form["zipcode"], document.getElementById("zipcode_help")))

请记住（与表单元素名称不同）id必须是唯一的。

编辑：我刚刚注意到你已经在onblur=处理程序中执行了上面显示的内容，所以显然我没有告诉你任何你不知道的事情。

对于您显示的html，字段及其相关帮助范围具有相关ID，您可能会考虑这样的事情：

function validateZipcode(inputField) {
    var help = document.getElementById(inputField.id + "_help");
    if (inputField.value === "") {
        help.innerHTML = "Please enter a number";
        return false;
    }
    help.innerHTML = "";
    return true;
}
function placeOrder(form) {
    if (validateZipcode(form["zipcode"])){
        alert("Submit");
    }
}

也就是说，只需将字段本身传递给函数，然后从其id中找出相关帮助字段的内容。

演示：http://jsfiddle.net/kY3BJ/

如何在表单中引用span元素？

1 个答案: