Выберите несколько полей ввода 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 имеет OnKeyUp событие под названием 'validateForm(), которая выполняет следующие :

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

Он отключает кнопку, если ничто не заполнено в inputfield1, но разрешает ее, если там что-то есть.

Это работает так, как должно.

Но, как вы можете видеть, у меня есть несколько полей ввода, для которых всем нужна такая функция.

Кнопка должна быть отключена при 0 из 11 полей заполнены, но должна быть включена, если даже один из них заполнен (не имеет значения, один)

Как сделать так, что если 1 из этих 11 полей будет заполнено кнопкой?

Вся помощь приветствуется grealy!

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

Для этого вам необходимо передать идентификатор элемента функции.

сделать вызов функции, как этот

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). Это также проверяет форму на submit, а не только на редактируемые поля. Полный код.

<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>