Javascript DOM Form Disable Fields

Description

Javascript DOM Form Disable Fields

View in separate window 


<html>
<head>
  <title>Disabling Fields</title>
</head>/*  ww w  .j av a  2 s.com*/
<body>
  <form action="signup.php" onsubmit="return false;" name="signupForm">
  Text1: <input type=text> <br />
  Text2: <input type=text> <br />
  Text3: <input type=text> <br />
  <input type=submit>
  </form>
  <script type="text/javascript">
    let els = document.signupForm.elements;
    for (let i = 0; i < els.length; i++) {
      els[i].onblur = enableInputs;
      if (i == els.length-1)
        els[i].disabled = true;
    }
    function enableInputs() {
      let els = document.signupForm.elements;
      let disableSubmit = false;
      for (let i = 0; i < els.length; i++)
        if (els[i].type == "text" && els[i].value.length == 0) {
          disableSubmit = true;
          break;
        }

      els[els.length-1].disabled = disableSubmit;  

    }
  </script>
</body>
</html>



PreviousNext

Related