如果窗体字段未填充，如何使按钮再次禁用？
如果窗体字段未填充，如何使按钮再次禁用？
提问于 2022-01-20 13:48:10
如果表单字段没有值，因为我的javascript代码只能用一种方式工作，那么如何使submit按钮再次禁用？首先，禁用“提交”按钮。然后，如果表单字段有值，则启用它，但当我删除一个表单字段值时，提交仍然是启用的。它不会恢复到残疾的状态。我也希望在我的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>非常感谢!
回答 3
Stack Overflow用户
发布于 2022-01-29 14:30:03
在JS中，null不同于undefined或空字符串。变量的默认值通常是undefined。
我是这么说的，因为当您在if (ex name != '')中进行变量测试时，变量的值可能为null或未定义。在这种情况下，如果不抓住它。
JS的另一个特点是if (name)意味着if (name != '' && name != null && name != undefined)
这样，您就可以从代码中删除所有的!= ''，并且它应该可以工作。
if (
name &&
lastname &&
idnumber &&
...Stack Overflow用户
发布于 2022-01-29 14:59:11
使用表单验证，有不同的类型可用，下面是一个简单的类型：
- 在每个窗体控件上添加属性
- 不要禁用按钮
使用下面的示例，尝试使用空字段提交表单。
<!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>
Stack Overflow用户
发布于 2022-01-20 13:58:11
添加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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70787378
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号