如果未填写表单字段，如何使我的按钮再次禁用答案

【问题标题】：how can i make my button disabled again if form fields is not filled如果未填写表单字段，如何使我的按钮再次禁用
【发布时间】：2022-01-29 22:59:11
【问题描述】：

如果由于我的 javascript 代码只能以一种方式工作，如果表单字段没有值，我怎样才能再次禁用我的提交按钮？起初，提交按钮被禁用。然后，如果表单字段有值，则启用它，但是当我删除一个表单字段值时，提交仍然启用。它不会回到被禁用的状态。我还希望我的复选框包含在我的 javascript 代码中，但我不知道如何。

我的 JS 函数：

function isEmpty() {
  let name = document.getElementById('name').value;
  let lastname = document.getElementById('lastname').value;
  let idnumber = document.getElementById('idnumber').value;
  let pro = document.getElementById('pro').value;
  let course = document.getElementById('course').value;
  let phone = document.getElementById('phone').value;
  let email = document.getElementById('email').value;
  let port = document.getElementById('port').value;
  let uploadresume = document.getElementById('uploadresume').value;
  let left = document.getElementById('left').value;
  let info = document.getElementById('info').value;
  let first = document.getElementById('first').value;
  let second = document.getElementById('second').value;
  let exam1 = document.getElementById('exam1').value;
  let exam2 = document.getElementById('exam2').value;
  let writeup = document.getElementById('writeup').value;

  if (
    name != '' &&
    lastname != '' &&
    idnumber != '' &&
    pro != '' &&
    course != '' &&
    phone != '' &&
    email != '' &&
    port != '' &&
    uploadresume != '' &&
    left != '' &&
    info != '' &&
    first != '' &&
    second != '' &&
    exam1 != '' &&
    exam2 != '' &&
    writeup != ''
  ) {
    document.getElementById('apply').removeAttribute('disabled');
  }
}

提交按钮和复选框的 HTML 代码：

<input required type="checkbox" />
<button
  class="btn-getstarted btn positionss"
  style="width: 60%"
  id="apply"
  data-bs-toggle="modal"
  data-bs-target="#reviewModal"
  onclick="verifyapp()"
  disabled
>
  SUBMIT!
</button>

非常感谢！

【问题讨论】：

为什么你不只是使用 HTML5 验证？它都是内置的，不需要 JavaScript。
NITPICK.... let 是您更改变量值的时候。你应该使用const
@epascarello 抱歉，我是 js 新手，我会替换它

标签： javascript html jquery forms

【解决方案1】：

在 JS 中，null 不同于 undefined 或空字符串。而变量的默认值通常是undefined。

我是这么说的，因为当您在 if (ex name != '') 中进行变量测试时，变量的值可能为 null 或未定义。在这些情况下，if 不会捕获它。

另一个 JS 特性是 if (name) 表示 if (name != '' && name != null && name != undefined)

所以你可以从你的代码中删除所有!= ''，它应该可以工作。

if (
    name &&
    lastname  &&
    idnumber &&
   ...

【讨论】：

【解决方案2】：

使用form validation，有多种类型可供选择，这里有一个简单的：

在每个表单控件上添加required attribute
不要禁用按钮

使用下面的示例尝试提交带有空字段的表单

<!DOCTYPE html>
<html lang="en">

<head>
  <title></title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <style></style>
</head>

<body>
  <main class="container">
    <section class="row">
      <form id='UI'>
        <fieldset class="border p-2">
          <legend class="float-none w-auto">Form Validation</legend>
          <label for='text1' class='label-control'>Text 1: </label>
          <input id='text1' name='data' class='form-control' required value='1'>
          <label for='text2' class='label-control'>Text 2: </label>
          <input id='text2' name='data' class='form-control' required value='2'>
          <label for='text3' class='label-control'>Text 3: </label>
          <input id='text3' name='data' class='form-control' required value='3'>
          <label for='text4' class='label-control'>Text 4: </label>
          <input id='text4' name='data' class='form-control' required>
          <button class='btn btn-primary float-end mt-2'>Done</button>
        </fieldset>
      </form>
    </section>
  </main>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
  <script></script>
</body>

</html>

【讨论】：

【解决方案3】：

添加 onkeyup="isEmpty()"

<button class="btn-getstarted btn positionss" style="width: 60%;" id="apply" data-bs-toggle="modal" data-bs-target="#reviewModal" onkeyup="isEmpty()" onclick="verifyapp()" disabled>SUBMIT!</button>

【讨论】：