我正在使用引导程序中的模式，以允许用户在我的网站上发布评论。一切正常，只是如果输入为空，则用户可以发表评论。如果输入为空，我想禁用按钮
这是引导程序中的模式按钮
<button
type="button"
class="btn btn-dark"
data-bs-toggle="modal"
data-bs-target="#exampleModal"
id="addComment"
>
Add a comment
</button>
<!-- Modal -->
<div
class="modal fade"
id="exampleModal"
tabindex="-1"
aria-labelledby="exampleModalLabel"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Add a comment</h5>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Name"
id="name"
aria-describedby="basic-addon1"
/>
</div>
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Comment"
id="comment"
aria-describedby="basic-addon1"
/>
</div>
</div>
<div class="modal-footer">
<button
type="button"
class="btn btn-light"
data-bs-dismiss="modal"
>
Cancel
</button>
<button
type="button"
class="btn btn-dark"
data-bs-dismiss="modal"
id="postButton"
onclick="postComment()"
>
Comment
</button>
</div>
</div>
</div>
</div>
我尝试加载Dom，然后将事件侦听器添加到“添加评论”按钮，并注意输入更改，例如：
document.addEventListener("DOMContentLoaded", () => {
var addbutton = document.getElementById("addComment");
addbutton.addEventListener("click", () => {
var name = document.getElementById("name");
name.addEventListener("change", () => {
if (name.value.length > 0) {
document.getElementById("postButton").disabled = false;
} else {
document.getElementById("postButton").disabled = true;
}
});
});
});
我用Google搜索引导程序中是否有必填字段，甚至将其添加required到两个输入中，但这没有用。
我也尝试设置button属性disabled并使用上面的代码，但是没有用
我已经尝试了更多的方法，但是它们并没有完全起作用。如上所述，如果输入为null，则需要禁用html按钮。任何帮助表示赞赏。
附言：我首先尝试一个输入，然后我将同时处理两个输入
你尝试设置的事件处理程序name，当click事件发生的按钮，所有这一切都建立在一个处理程序DOMContentLoaded。这可以大大简化。
如果将您的代码移动script到恰好在结束body标记之前，则无需将代码嵌套在DOMConentLoaded事件处理程序中，因为当解析器到达此点时，将加载DOM。接下来，您只需要设置一个blur事件处理程序（当字段失去焦点时将触发）或input事件（每次value字段的值更改时将触发）以检查元素是否具有内容并启用/禁用按钮。相应地。
这是一个例子：
<!DOCTYPE html>
<html>
<head>
<title>Enable/Disable submit</title>
</head>
<body>
<input id="one"><input id="two"><button disabled>Submit</button>
<!-- By placing the script just before the closing
body tag, you ensure that all the other elements
have been parsed into memory when the script runs. -->
<script>
const input1 = document.querySelector("#one");
const input2 = document.querySelector("#two");
const btn = document.querySelector("button");
// Use the same validation handler for both inputs
input1.addEventListener("input", validate);
input2.addEventListener("input", validate);
function validate(){
// Check that neither input is empty
if(input1.value === "" || input2.value === ""){
btn.setAttribute("disabled","disabled");
} else {
btn.removeAttribute("disabled");
}
}
</script>
</body>
</html>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句