禁用启用提交按钮 - 禁用直到所有字段都有值 - 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

由于您已标记 html5，您可以利用 html5 验证使用 required 属性并将提交按钮类型更改为 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>

Answer 2

禁用/启用保存按钮有多个部分：

• 回答问题时运行代码
• 禁用/启用保存按钮

需要代码：

• 为每个问题添加事件处理程序
• 检查每个问题的答案
• 禁用/启用保存按钮 - 添加/删除按钮的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>