How do i disable the submit button until all mandatory fields are filled using html and js

penguin
July 19, 2023
187 views
0 votes
2 Answers

I’m trying to disable the submit button on my form until all mandatory fields are filled. I’ve seen other answers but none address how to do it for dropdown menus or radio buttons, just text input. My intention is user must input something for dropdowns and radio button before the submit button is enabled

Note: I don’t want to use the required attribute as it can be removed through inspect

the current code just has the button always disabled no matter what

function enableSubmit(){
    let inputs = document.getElementsByClassName('required');
    let btn = document.querySelector('button[type="submit"]');
    let isValid = true;
    for (var i = 0; i < inputs.length; i++){
        let changedInput = inputs[i];
        if (changedInput.value.trim() === "" || changedInput.value === null){
            isValid = false;
            break;
        }
    }
    btn.disabled = !isValid;
}
function selectdist() {
  enableSubmit();
}

<div class="dropdown">
<div class="dropdownchild">
    <select id="stroke" name="stroke" onchange="selectdist()" class="required"
        onkeyup="enableSubmit()" required>
        <option value="">Stroke</option>
        <option value="fly">Butterfly</option>
        <option value="back">Backstroke</option>
        <option value="breast">Breaststroke</option>
        <option value="free">Freestyle</option>
        <option value="im">Individual Medley</option>
    </select>
</div>
<div class="dropdownchild">
    <select id="gender" name="gender" class="required" onkeyup="enableSubmit()" required>
        <option value="">Gender</option>
        <option value="m">Male</option>
        <option value="f">Female</option>
    </select>
</div>
</div>

<div class="radio-toolbar" class="required" onkeyup="enableSubmit()">
<input type="radio" id="100" name="distance" value="100" class="required"
    onkeyup="enableSubmit()">
<label id="100l" for="100">100m</label>

<input type="radio" id="200" name="distance" value="200">
<label id="200l" for="200">200m</label>

<input type="radio" id="400" name="distance" value="400">
<label id="400l" for="400">400m</label>

<input type="radio" id="800" name="distance" value="800">
<label id="800l" for="800">800m</label>

<input type="radio" id="1500" name="distance" value="1500">
<label id="1500l" for="1500">1500m</label>
</div>
<button id="calculate" type="submit" form="entry" value="Submit" onClick="validatefilledIn()" disabled>
Calculate</button>
</div>

Answers

Checkout following working snippet. Hope this helps!

function selectdist() {
  // your code here
  enableSubmit();
}

function validatefilledIn() {
  console.log('Form Submitted');
}

function enableSubmit() {
  let inputs = document.getElementsByClassName('required');
  let btn = document.querySelector('button[type="submit"]');
  let isValid = true;
  for (var i = 0; i < inputs.length; i++) {
    let changedInput = inputs[i];
    if (changedInput.value.trim() === "" || changedInput.value === null) {
      isValid = false;
      break;
    }
  }
  btn.disabled = !isValid;
}

<div class="dropdown">
  <div class="dropdownchild">
    <select id="stroke" name="stroke" onchange="selectdist()" class="required" required>
      <option value="">Stroke</option>
      <option value="fly">Butterfly</option>
      <option value="back">Backstroke</option>
      <option value="breast">Breaststroke</option>
      <option value="free">Freestyle</option>
      <option value="im">Individual Medley</option>
    </select>
  </div>
  <div class="dropdownchild">
    <select id="gender" name="gender" class="required" onchange="enableSubmit()" required>
      <option value="">Gender</option>
      <option value="m">Male</option>
      <option value="f">Female</option>
    </select>
  </div>
</div>

<div class="radio-toolbar" class="required">
  <input type="radio" id="100" name="distance" value="100" class="required" onchange="enableSubmit()">
  <label id="100l" for="100">100m</label>

  <input type="radio" id="200" onchange="enableSubmit()" name="distance" value="200">
  <label id="200l" for="200">200m</label>

  <input type="radio" id="400" name="distance" onchange="enableSubmit()" value="400">
  <label id="400l" for="400">400m</label>

  <input type="radio" id="800" name="distance" onchange="enableSubmit()" value="800">
  <label id="800l" for="800">800m</label>

  <input type="radio" id="1500" name="distance" value="1500" onchange="enableSubmit()">
  <label id="1500l" for="1500">1500m</label>
</div>
<button id="calculate" type="submit" form="entry" value="Submit" onClick="validatefilledIn()" disabled>Calculate</button>
</div>

I took a different approach which doesn’t involve disabling the button.
Instead, everything except the first slect box is hidden on page load.
After a selection is made, the second selection box appears, after that has a selection made, the radio buttons appear. After a radio button is clicked, the submit button appears.

var titleGen = document.getElementById("titleGen");
var titleStroke= document.getElementById("titleStroke");  
var butCal = document.getElementById("calculate"); 
var radToo = document.getElementById("radio-toolbar");
var gen = document.getElementById("gender");
gen.style.display="none"; radToo.style.display="none"; 
butCal.style.display="none"; titleGen.style.display="none"; titleStroke.style.display="none";


function selectdist() {
gen.style.display="inline";
titleGen.style.display="inline";
}
function selectgen() {
radToo.style.display="inline";
titleStroke.style.display="inline";
}
function showButton() {
butCal.style.display="inline";
};

var titleGen = document.getElementById("titleGen");
var titleStroke= document.getElementById("titleStroke");  
var butCal = document.getElementById("calculate"); 
var radToo = document.getElementById("radio-toolbar");
var gen = document.getElementById("gender");
    gen.style.display="none"; radToo.style.display="none"; butCal.style.display="none"; titleGen.style.display="none"; titleStroke.style.display="none";


function selectdist() {
gen.style.display="inline";
titleGen.style.display="inline";
}
function selectgen() {
radToo.style.display="inline";
titleStroke.style.display="inline";
}
function showButton() {
butCal.style.display="inline";
};

<div class="dropdown">
        <label>Choose Stroke</label>    
                <div class="dropdownchild">
                    <select id="stroke" name="stroke" onchange="selectdist()" class="required">
            <option value="fly">Stroke</option>
                        <option value="fly">Butterfly</option>
                        <option value="back">Backstroke</option>
                        <option value="breast">Breaststroke</option>
                        <option value="free">Freestyle</option>
                        <option value="im">Individual Medley</option>
                    </select>
                </div>
        <label id="titleGen">Choose Gender</label>
                <div class="dropdownchild"> 
                    <select id="gender" name="gender" onchange="selectgen()" class="required">
                        <option value="m">Male</option>
                        <option value="f">Female</option>
                    </select>
                </div>
                </div>
                <div id="radio-toolbar" class="required">
                <label>Choose Distance</label><br>  
        <input type="radio" id="100" name="distance" value="100" class="required"  onclick="showButton()">
                <label id="100l" for="100">100m</label>

                <input type="radio" id="200" name="distance" value="200" onclick="showButton()">
                <label id="200l" for="200">200m</label>

                <input type="radio" id="400" name="distance" value="400" onclick="showButton()">
                <label id="400l" for="400">400m</label>

                <input type="radio" id="800" name="distance" value="800" onclick="showButton()">
                <label id="800l" for="800">800m</label>

                <input type="radio" id="1500" name="distance" value="1500" onclick="showButton()">
                <label id="1500l" for="1500">1500m</label><br>
                </div>
                <button id="calculate" type="submit" form="entry" value="Submit" onclick="validatefilledIn()">Calculate</button>
    </div>

Please signup or login to give your own answer.

Click here to cancel reply.