如果输入不为空，则启用禁用按钮

debugcn 发表于 Dev

Riya Shah |

我有一个简单的表单，其中有两个字段，分别是名字为id fname的名字和电子邮件为email的字段。我有ID为Submit-btn的提交按钮。我已经禁用了使用javascript这样的提交按钮

document.getElementById("submit-btn").disabled = true;

现在，如果我两个字段都填写，我正在寻找允许提交。

我的完整JavaScript是这样的

<script type="text/javascript">
  
   document.getElementById("submit-btn").disabled = true;

   document.getElementById("submit-btn").onclick = function(){
   window.open("https://google.com",'_blank');
}
  
</script>

我正在学习JavaScript，但不知道该怎么做。让我知道这里是否有人可以帮助我。谢谢！

云禅

我提议这样的事情

使用一个块，该块将变量和函数的名称封装在块范围内
制作小功能，只做一件事
优先addEventListener于onclick或onanything
您可以在上使用两种类型的事件input：input和change。input将在每次击键check时做出反应，仅当您模糊input元素时才会做出反应

我使用checkValidity方法向电子邮件字段添加了有效性检查

{
  const btn = document.getElementById("submit-btn");
  const fname = document.getElementById("fname");
  const email = document.getElementById("email");
  deactivate()
  
  function activate() {
    btn.disabled = false;
  }
  
  function deactivate() {
    btn.disabled = true;
  }

  function check() {
    if (fname.value != '' && email.value != '' && email.checkValidity()) {
      activate()
    } else {
      deactivate()
    }
  }
  
  btn.addEventListener('click', function(e) {
    alert('submit')
  })
  
  
  fname.addEventListener('input', check)
  email.addEventListener('input', check)
  
}

<form>
  <input type="text" name="" id="fname">
  <input type="email" name="" id="email">
  <input type="submit" id="submit-btn" value="Submit">
</form>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。