如果输入为空，如何禁用html按钮？

h9a6wy2h 于 2022-12-09 发布在其他

关注(0)|答案(3)|浏览(209)

我正在使用bootstrap的一个模态来允许用户在我的网站上发表评论。除了输入为空时用户可以发表评论之外，一切都正常。我想在输入为空时禁用该按钮

- 这是 Bootstrap 的按钮模态**

<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>

我尝试了什么？

1.我尝试加载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;
      }
    });
  });
});

1.我在谷歌上搜索了 Bootstrap 中是否有必填字段，甚至在两个输入中添加了required，但这不起作用。
1.我也尝试过设置按钮属性disabled并使用上面的代码，但没有成功
我试过很多方法，但是都不太管用。正如我上面提到的，如果输入为空，我需要禁用html按钮。任何帮助都是感激的。
附言：我首先尝试一个输入，然后我将在两个工作

Html

来源：https://stackoverflow.com/questions/65675922/how-to-disable-html-button-if-input-is-empty

3条答案

按热度按时间

w8f9ii691#

Your attempt sets the event handler on name when the click event happens on the button and all of that is set up in a handler for DOMContentLoaded . This can be simplified greatly.
If you move your script so that it is positioned just prior to the closing body tag, you won't need to nest your code inside of a DOMConentLoaded event handler because by the time the parser reaches this point, the DOM will be loaded. Next, you just need to set up a blur event handler (which fires when a field loses the focus) or the input event (which fires every time the value of the field changes) that checks to see if the element has content and enables/disables the button accordingly.
Here's an example:

<!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>

赞(0）回复(0）举报 2022-12-09

nwo49xxi2#

尝试将输入设为必填
====〉
然而，它认为如果有人更改了标签，他们可以什么都不输入。在这种情况下，只需检查值为“什么都不输入”的帖子，并防止它们被放入数据库。

赞(0）回复(0）举报 2022-12-09

t30tvxxf3#

A few things you have wrong here.

You have an event listener inside an event listener

Each time addbutton is clicked you assign a new event listener to name which is redundant. You have to move name.addEventListener outside.

let name = document.getElementById("name");

name.addEventListener("input", () => { // Also using `input` instead of `change`
    if (name.value.length > 0) {
      document.getElementById("postButton").disabled = false;
    } else {
      document.getElementById("postButton").disabled = true;
    }
});

Notice something different here as well? Instead of using "change" I've used "input" because it makes changes in real time (when you type), while "change" gets triggered when you focus outside of the input.
Now when the document is loaded you have to disable the button and you will be set.
Also instead of using the old style onLoad event listeners you put your script after the HTML and then you can attach a defer to your script like this.

<script defer>
// Your Javascript will be executed
// after all the html has been loaded
</script>

let name = document.getElementById("name");
let postButton = document.getElementById("postButton");
postButton.disabled = true;
name.addEventListener("input", () => {
    if (name.value.length > 0) {
      postButton.disabled = false;
    } else {
      postButton.disabled = true;
    }
});

<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>

赞(0）回复(0）举报 2022-12-09

我来回答

如果输入为空，如何禁用html按钮？

我尝试了什么？

3条答案

相关问题

热门标签

最新问答