選擇多個輸入字段javascript

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個時，需要禁用該按鈕，但是即使填充了其中的1個，也需要啟用該按鈕（與哪一個無關）

我如何做到這一點，如果這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>