javascript - 禁用/启用提交按钮,直到填写完所有表格

标签 javascript forms submit disabled-control

我希望根据表单是否填满来禁用/启用我的表单提交按钮。

当输入被填满时,禁用按钮变为启用。效果很好。 但我希望它在输入被清空时禁用按钮。

这是我的脚本:

<script type="text/javascript" language="javascript">
    function checkform()
    {
        var f = document.forms["theform"].elements;
        var cansubmit = true;

        for (var i = 0; i < f.length; i++) {
            if (f[i].value.length == 0) cansubmit = false;
        }

        if (cansubmit) {
            document.getElementById('submitbutton').disabled = false;
        }
    }
</script> 
<form name="theform">
<input type="text" onKeyup="checkform()" />
<input type="text" onKeyup="checkform()" />
<input id="submitbutton" type="submit" disabled="disabled" value="Submit" />
</form>

最佳答案

就用

document.getElementById('submitbutton').disabled = !cansubmit;

而不是仅适用于单向的 if 子句。

此外,对于禁用 JS 的用户,我建议设置初始 disabled仅由 JS。为此,只需将脚本移到 <form> 后面并调用checkform();一次。

关于javascript - 禁用/启用提交按钮,直到填写完所有表格,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13931688/

相关文章:

javascript - 2 表单中字段的名称属性

html - 表单内的图像按钮,不想提交

javascript - 没有提交按钮或 JavaScript 的 html 提交

javascript - Easel.js stage.clear() 不工作

javascript - 设置可观察值时防止 knockout 调用订阅

javascript - 是否有任何规范说明什么仍然被视为有效的 JSONP?

javascript - 为什么将一种元素替换为另一种元素时,replaceChild() 会出现奇怪的行为?

php - 表单中下拉框的数据作为 'Array' 发送到数据库

javascript - 如何防止tab键跳转到下一个表单域?

css:即改变按钮的文本值和背景