how can i control the submit button with JS function in html form

user_17573120 0
Viewed 55

html code :

<input id="Degree" name="Degree" type="number" size="10">
<select id="year" name="date" onchange="jsyear(this.value);">
  <option value="2000"> 2000 </option>
  <option value="2001"> 2001 </option>
  <option value="2002"> 2002 </option>
  <option selected> 2003 </option>
  <option> 2004 </option>
  <option> 2005 </option>
</select>

and the JavaScript code :

function jsyear(value) {
  if (value < 2003) {
    alert("You are too old ");
  }

}

let degreeInput = document.getElementById('Degree');
let delayTimer;

degreeInput.oninput = (e) => {
  clearTimeout(delayTimer);
  delayTimer = setTimeout(() => {
    if (e.target.value < 73) {
      alert(" your degree is less than required ");
    }
  }, 1050);
};

i want to prevent from submitting it unless all these function is true , if it's false then it cant submit . hlep me guys plz

forms function html javascript
1 Answers

You only need to add a button

const button = document.getElementById("submit");
const degree = document.getElementById("Degree");
const year = document.getElementById("year");

function check(){
  if (year.value < 2003){
    alert("You are too old");
    button.disabled = true;
  } else if (degree.value < 73){
    alert("Your degree is less than required");
    button.disabled = true;
  } else {
    button.disabled = false;
  }
}

degree.onchange = check;
year.onchange = check;
<form id="myform" action="#">
<input id="Degree" name="Degree" type="number" size="10">
<select id="year" name="date">
  <option value="2000"> 2000 </option>
  <option value="2001"> 2001 </option>
  <option value="2002"> 2002 </option>
  <option selected> 2003 </option>
  <option> 2004 </option>
  <option> 2005 </option>
</select>
<input type="submit" id="submit" value="Check" disabled>
</form>

user_166099390
Related