当表单文本输入为空时禁用提交按钮

Question

当您需要在我的 web 应用程序中报告单词时，我会弹出一个模式，看起来像这样。

我还有一个模式，在您按下提交按钮后会显示并告诉您报告已成功提交。 （两种模式都是使用 Bootstrap 5.0 制作的）

如果没有写任何单词，则无法提交表单，因为需要输入文本才能提交，但是，即使文本输入中没有单词，第二个模态仍然会显示（因为我已将其绑定在提交按钮）。

经过一番研究，我认为解决这个问题的最好方法是禁用提交按钮，直到文本输入被填满，但我发现的只是 jQuery 答案，我不知道 jQuery。

有任何 JavaScript 替代品吗？ 我试图找到一些简单的东西，因为表单只有 1 个输入。

在此先感谢，我正在仔细阅读您对此的想法：）

<div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <div class="col-1"></div>
                      <h5 class="col-9 modal-title text-center" id="modalTitle">
                        &#9888;&#65039; Reportar &#9888;&#65039;
                      </h5>
                      <button
                        type="button"
                        class="btn-close col-1"
                        data-bs-dismiss="modal"
                        aria-label="Close"
                      ></button>
                    </div>
                    <div class="modal-body text-center">
                      &#128465;&#65039; ¿Sobra alguna palabra? ¡Envíamela para
                      eliminarla! &#128465;&#65039;
                    </div>
                    <div class="row pb-4">
                      <div class="col"></div>
                      <div class="col-10">
                        <form
                          spellcheck="false"
                          method="POST"
                          action="/report"
                          id="reportForm"
                        >
                          <input
                            type="text"
                            required
                            autocomplete="off"
                            name="reportedWord"
                            maxlength="30"
                            class="form-control px-2 text-center"
                          />
                          <button
                            type="submit"
                            class="form-control buttonhover mt-3"
                            data-bs-target="#reportConfirm"
                            data-bs-toggle="modal"
                            data-bs-dismiss="modal"
                          >
                            <svg
                              xmlns="http://www.w3.org/2000/svg"
                              width="24"
                              height="24"
                              fill="currentColor"
                              class="bi bi-check-lg"
                              viewBox="0 0 16 16"
                            >
                              <path
                                d="M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z"
                              />
                            </svg>
                          </button>
                        </form>
                      </div>
                      <div class="col"></div>
                    </div>
                  </div>
                </div>
              </div>

              <div
                class="modal fade"
                id="reportConfirm"
                data-bs-backdrop="static"
                tabindex="-1"
                aria-labelledby="reportConfirm"
                aria-hidden="true"
              >
                <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="col modal-title text-center" id="modalTitle">
                        &#10084;&#65039; Gracias por el Feedback
                        &#10084;&#65039;
                      </h5>
                    </div>
                    <div class="modal-body text-center">
                      &#128640; Tu reporte ha sido registrado correctamente
                      &#128640;
                    </div>

                    <div class="col"></div>
                    <div class="col-10"></div>
                    <div class="col"></div>
                  </div>
                </div>
              </div>

然后，我正在运行 setTimeout 以在提交后 3 秒后刷新页面

let reportRedirect = function reportRedirect() {
  window.setTimeout(function () {
    location.href = "/";
  }, 3000);
};

除了那个 js 代码，我没有更多的 JS，所有的前端都是用 Bootstrap 构建的。 后端使用 NodeJs 和 Express 处理

---

找到了解决方案。 在 HTML 文档中删除了 Bootstrap 模态切换器并编写了以下代码：

let reportRedirect = function reportRedirect() {
  window.setTimeout(function () {
    location.href = "/";
  }, 3000);
};

let submitButton = document.getElementById("reportSubmit"); // Assign submit button to a variable
let ele = document.getElementById("reportForm"); // Assign form to a variable

// callback function that does :
// 1. Return the attributes who trigger the second modal to the button
// 2. Add a click() Since we have to click 2 times to display the second modal 
// (the click user does just returns the attributes to the element)
// 3. refreshes the page after 3 seconds

let enableModal = function enableModal() {
  submitButton.setAttribute("data-bs-toggle", "modal");
  submitButton.setAttribute("data-bs-dismiss", "modal");
  submitButton.click();
  reportRedirect();
};

// this one (credits to @Unmitigated) checks for the submit event.
// if the form is submitted then we apply enableModal()


if (ele.addEventListener) {
  ele.addEventListener("submit", enableModal, false); //Modern browsers
} else if (ele.attachEvent) {
  ele.attachEvent("onsubmit", enableModal); //Old IE
}

Answer 1

改为收听表单上的提交事件。

 document.querySelector('form').addEventListener('submit', function(e){ console.log('submitted, show success modal'); e.preventDefault(); // for demonstration });

 <form> <input type="text" required/> <button>Submit</button> </form>

Answer 2

好吧，这取决于您是在表单中还是有文本框和按钮

如果你有一个表格，你可以做的是

<form onSubmit = "Submit_function();">
  <input type="text" id = "form_text">
  <button>Submit</button>
</form>

function Submit_function(){
if(document.getElementById('form_text') != ""){
   //your code
}
else{
   Alert("No text given");
}}

如果你有一个实际的按钮而不是一个表单，它看起来会非常相似，因为你基本上可以使用相同的方法，例如

<input type = "text" id = "text_input">
<button onClick = "Submit_function">

function Submit_function(){
if(document.getElementById('text_input') != ""){
   //your code
}
else{
   Alert("No text given");
}}

您可以使用其他方法，例如，当按下按钮时，您可以检查是否从 javascript 按下按钮，而不是运行 function，这将是

<form id = "form">
  <input type="text" id = "form_text">
  <button id = "Submit_button">Submit</button>
</form>

var submit_btn = document.getElementById("Submit_button");


submit_btn.addEventListner("click", function(){
if(document.getElementById('form_text') != ""){
   //your code
}
else{
   Alert("No text given");
}});

当然，就像我在上面所做的那样，您可以将相同的内容应用于按钮，但这很容易解释

<input type="text" id = "form_text">
<button id = "Submit_button">Submit</button>

var submit_btn = document.getElementById("Submit_button");


submit_btn.addEventListner("click", function(){
if(document.getElementById('form_text') != ""){
   //your code
}
else{
   Alert("No text given");
}});

但是我不明白为什么您不使用表单，因为在这种情况下它会更好。

Answer 3

找到了解决方案。 在 HTML 文档中删除了 Bootstrap 模态切换器并编写了以下代码：

let reportRedirect = function reportRedirect() {
  window.setTimeout(function () {
    location.href = "/";
  }, 3000);
};

let submitButton = document.getElementById("reportSubmit"); // Assign submit button to a variable
let ele = document.getElementById("reportForm"); // Assign form to a variable

// callback function that does :
// 1. Return the attributes who trigger the second modal to the button
// 2. Add a click() Since we have to click 2 times to display the second modal 
// (the click user does just returns the attributes to the element)
// 3. refreshes the page after 3 seconds

let enableModal = function enableModal() {
  submitButton.setAttribute("data-bs-toggle", "modal");
  submitButton.setAttribute("data-bs-dismiss", "modal");
  submitButton.click();
  reportRedirect();
};

// this one (credits to @Unmitigated) checks for the submit event.
// if the form is submitted then we apply enableModal()


if (ele.addEventListener) {
  ele.addEventListener("submit", enableModal, false); //Modern browsers
} else if (ele.attachEvent) {
  ele.attachEvent("onsubmit", enableModal); //Old IE
}