禁用啓用提交按鈕 - 禁用，直到所有領域都值 - HTML表單檢查答案

Question

我想禁用我的提交按鈕，直到所有的字段有值的所有投入。我怎樣才能做到這一點？在形式上，我有一個選擇，文件，日期選擇器和文本輸入..

我有這些例子，但我不能使它工作。

Https://jsfiddle.net/xG2KS/485/

Http://jsfiddle.net/Yr59d/

Http://jsfiddle.net/soyn0xag/6/

HTML：

<form class="myForm" id="form"> 
     <div id= "select_input" name="select1"> 
      <select name="select1"> 
       <option disabled selected>Unidade:</option> 
       <option>1</option> 
       <option>2</option> 
      </select> 
     </div> 
     <div class="input-field"> 
      <span class="gbp"> 
      <input id= "value_input" name="value" type="number" min="0" max="10000" step="0.05" /><br/> 
      <label> value:</label> 
      </span> 
     </div> 
     <div class="input-field"> 
      <label for="date">date</label> 
      <input id="date_input" class="datepicker" name="date" type="text"> 
     </div> 
     <div class="input-field"> 
      <input id="email_input" name="email" type="email" /><br/> 
      <label for="email" >Email</label> 
     </div> 
     <div class="input-field "> 
      <textarea id= "text_input" name="text" class="materialize-textarea" data-length="500"></textarea> 
      <label for="text">Long Text.</label> 
     </div> 
     <div class="file-field input-field"> 
     <div class="btn"> 
      <span>File</span> 
      <input id= "myFile_input" name="myFile" type="file" accept="image/*" capture="camera" id="camera" > 
     </div> 
     <div class="file-path-wrapper"> 
      <input class="file-path validate" type="text" > 
     </div> 
     </div> 
     <button type="button" value="Upload" class="btn waves-effect waves-light" id="submit" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress'); google.script.run .withSuccessHandler(updateOutput) .processForm(this.parentNode)">Submit </button> 
    </form> 

Answer 1

有多個部分禁用/啓用保存按鈕：當一個問題被回答

• 運行代碼
• 禁用/啓用保存按鈕

代碼所需：

• 向每個questi添加事件處理程序在
• 檢查每一個問題的答案
• 禁用/啓用保存按鈕 - 添加/刪除按鈕的disabled屬性：

HTML：

在HTML中加入onchange="areAllQuestionsAnswered()"。這需要納入每個問題。

<form> 
    <div id= "select_input" name="select1"> 
    <select name="select1" onchange="areAllQuestionsAnswered()" required> 
     <option disabled selected>Unidade:</option> 
     <option>1</option> 
     <option>2</option> 
     </select> 
    </div> 

    <div class="input-field "> 
    <textarea id= "text_input" name="text" class="materialize-textarea" 
     data-length="500" onchange="areAllQuestionsAnswered()"></textarea> 
    <label for="text">Long Text.</label> 
    </div> 

    <div class="input-field"> 
    <span class="gbp"> 
     <input id= "value_input" name="value" type="number" min="0" 
     max="10000" step="0.05" onchange="areAllQuestionsAnswered()" required><br/> 
     <label> value:</label> 
    </span> 
    </div> 
</form> 

代碼：

<script> 
    window.areAllQuestionsAnswered = function() { 
    var allInputs,allDropDowns,allTextArea, 
    arrayOfQuestions,i,j,L,L2, 
    questionType,theseQuestions, 
    thisQuestion,thisQstnType,thisValue; 

    allInputs = document.getElementsByTagName("INPUT"); 
    allDropDowns = document.getElementsByTagName("SELECT"); 
    allTextArea = document.getElementsByTagName("TEXTAREA"); 

    arrayOfQuestions = [allInputs,allDropDowns,allTextArea]; 

    L = arrayOfQuestions.length; 

    for (i=0;i<L;i++) { 

     theseQuestions = arrayOfQuestions[i]; 

     L2 = theseQuestions.length; 

     for (j=0;j<L2;j++) { 
     thisQuestion = theseQuestions[j]; 
     thisQstnType = thisQuestion.type; 

     if (thisQstnType === 'checkbox') { 
      thisValue = thisQuestion.checked; 
     } else { 
      thisValue = thisQuestion.value; 
     } 

     if (!thisValue) { 
      enableOrDisableSave(false); 
      return;//Quit - one of the questions was not answered 
     } 
     } 
    } 

    enableOrDisableSave(true);//If the code gets here then all questions 
     //were answered 
    } 

    window.enableOrDisableSave = function(enable) { 
    var saveBtn; 

    saveBtn = document.getElementById('put submit button id here'); 

    if (enable) { 
     saveBtn.removeAttribute('disabled');//Enable the save button by removing the disable setting 
    } else { 
     saveBtn.setAttribute('disabled', 'disabled');//Disable the save button by 
    //setting the attribute 
    } 

    } 
</script> 

Answer 2

既然你已經標記了HTML5，你可以使用required屬性需要HTML5驗證的優勢和不斷變化的提交按鈕類型到type="submit"

<form class="myForm" id="form" onsubmit="return submitForm();"> 
     <div id= "select_input" name="select1"> 
      <select name="select1" required> 
       <option disabled selected>Unidade:</option> 
       <option>1</option> 
       <option>2</option> 
      </select> 
     </div> 
     <div class="input-field"> 
      <span class="gbp"> 
      <input id= "value_input" name="value" type="number" min="0" max="10000" step="0.05" required><br/> 
      <label> value:</label> 
      </span> 
     </div> 
     <div class="input-field"> 
      <label for="date">date</label> 
      <input id="date_input" class="datepicker" name="date" type="text" required> 
     </div> 
     <div class="input-field"> 
      <input id="email_input" name="email" type="email" required><br/> 
      <label for="email" >Email</label> 
     </div> 
     <div class="input-field "> 
      <textarea id= "text_input" name="text" class="materialize-textarea" data-length="500" required></textarea> 
      <label for="text">Long Text.</label> 
     </div> 
     <div class="file-field input-field"> 
     <div class="btn"> 
      <span>File</span> 
      <input id= "myFile_input" name="myFile" type="file" accept="image/*" capture="camera" id="camera" required> 
     </div> 
     <div class="file-path-wrapper"> 
      <input class="file-path validate" type="text" required> 
     </div> 
     </div> 
     <button type="submit" value="Upload" class="btn waves-effect waves-light" id="submit">Submit </button> 
    </form> 

<script> 
    function submitForm() { 
     toggle_visibility('formDiv'); 
     toggle_visibility('inProgress'); 
     google.script.run.withSuccessHandler(updateOutput).processForm(this.parentNode); 
     return false; 
    } 
</script>