Question

我制作了一个包含以下几个输入字段的HTML表单：

            <tr>
                <td>inputfield1</td>
                <td><input type="number" class="bestelformulier" name="inputfield1" onkeyup="validateForm()" min="1" max="999"></td>
            </tr>
            <tr>
                <td>inputfield2</td>
                <td><input type="number" class="bestelformulier" name="inputfield2" min="1" max="999"></td>
            </tr>
            <tr>
                <td>inputfield3</td>
                <td><input type="number" class="bestelformulier" name="inputfield3" min="1" max="999"></td>
            </tr>
            <tr>
                <td>inputfield4</td>
                <td><input type="number" class="bestelformulier" name="inputfield4" min="1" max="999"></td>
            </tr>

正如您所看到的，我的输入字段1有一个名为'validateForm（）'的onkeyup事件，它执行以下操作：

function validateForm(){
        if(document.forms['form'].inputfield1.value == "")
        {
            document.forms[0].submit.disabled=true;
        }
        else {  
            document.forms[0].submit.disabled=false;
        }
    }

如果inputfield1中没有填充任何内容，则会禁用该按钮，但如果其中有内容，则启用它。

这样就可以了。

但是你可以看到我有几个输入域都需要这样的功能。

当11个字段中的0个被填满时，需要禁用该按钮，但是如果填充了其中一个，则需要启用该按钮（无关紧要）

如何填充，如果填写了11个字段中的1个，按钮将启用？

所有帮助都非常感谢！

Answer 1

尝试这样的事情并将其添加到所有输入字段的键盘

function validateForm()
{

    var allEmpty = (document.forms['form'].inputfield1.value == "" &&
                    document.forms['form'].inputfield2.value == "" &&
                    document.forms['form'].inputfield3.value == "" &&
                    document.forms['form'].inputfield4.value == "");

    if(allEmpty) // if all are empty disable the button, else enable it.
    {
        document.forms[0].submit.disabled=true;
    }
    else {  
        document.forms[0].submit.disabled=false;
    }
}

Answer 2

为实现此目的，您需要将元素的Id传递给函数。

像这样调用函数

  onkeyup="validateForm('inputfield1')";

将此应用于所有输入字段并更新功能，如下所示

试试这个

function validateForm(eleId){
    var value = document.getElementById(eleId).value;
    if(value == "")
    {
        document.forms[0].submit.disabled=true;
    }
    else {  
        document.forms[0].submit.disabled=false;
    }
}

Answer 3

var input = document.getElementsByTagName('bestelformulier'); //you can use another class if you want.. as 'required'
var cansubmit = false;
for (i=0; i<input.length; i++)
    if(input[i].value.trim() != "")
        cansubmit = true;

document.forms[0].submit.disabled = cansubmit;

希望它有所帮助。

Answer 4

您的javascript也需要检查值的有效性（1到999之间）。这也将检查提交表单，而不仅仅是依赖于正在编辑的字段。完整代码。

<form name="form" onsubmit="return validateForm()">
    <tr>
            <td>inputfield1</td>
            <td><input type="text" class="bestelformulier" name="inputfield1" onkeyup="validateForm()" min="1" max="999"></td>
        </tr>
        <tr>
            <td>inputfield2</td>
            <td><input type="number" class="bestelformulier" name="inputfield2" onkeyup="validateForm()" min="1" max="999"></td>
        </tr>
        <tr>
            <td>inputfield3</td>
            <td><input type="number" class="bestelformulier" name="inputfield3" onkeyup="validateForm()" min="1" max="999"></td>
        </tr>
        <tr>
            <td>inputfield4</td>
            <td><input type="number" class="bestelformulier" name="inputfield4" onkeyup="validateForm()" min="1" max="999"></td>
        </tr>
        <input type="submit" disabled name="submit" />
</form>

<script type="text/javascript">
    function validateForm() {    
        var isValid = false;
        if (document.forms[0].inputfield1.value > 0 && document.forms[0].inputfield1.value < 1000) {
            isValid = true;
        }
        if (document.forms[0].inputfield2.value > 0 && document.forms[0].inputfield2.value < 1000) {
            isValid = true;
        }
        if (document.forms[0].inputfield3.value > 0 && document.forms[0].inputfield3.value < 1000) {
            isValid = true;
        }
        if (document.forms[0].inputfield4.value > 0 && document.forms[0].inputfield4.value < 1000) {
            isValid = true;
        }
        if (!isValid) {
            document.forms[0].submit.disabled = true;
        } else {
            document.forms[0].submit.disabled = false;
        }
        return isValid;
    }
</script>

选择多个输入字段javascript

4 个答案: