Disable submit button when form text input is empty

Question

i have a modal that pops up when you need to report a word in my web app, looks like this .

I also have a modal that shows up after you press the Submit button and tells you the report was made successfully. (both modals are made using Bootstrap 5.0)

You cant submit the form if no word is written, becouse text input is required in order to submit, however, even if there is no word inside the text input, the second modal will show up anyways (becouse i have it binded on the submit button aswell).

After some research, i think the best way to solve this is to disable the submit button until text input is filled, but all i find are jQuery answers and i do not know jQuery.

Any JavaScript alternatives? I am trying to find something simple since the form only haves 1 input.

Thanks in advance, i am reading with atention your thoughts about this:)

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

Then, i am running a setTimeout to refresh the page after 3 seconds from submitting

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

Besides that js code, i have no more JS, all the front end is built with Bootstrap. Backend is handled using NodeJs and Express

---

Found the solution. Removed Bootstrap modal togglers in the HTML document and wrote this code:

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

Listen to the submit event on the form instead.

 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

well it depends if your in a form or if you have a text box and a button

if you had a form what you could do is

<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");
}}

if you were to have an actual button rather than a form it would look very similar as you could basically use the same method, for example

<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");
}}

there are other methods you could use however for example instead of running the function when the button is pressed you could be checking if the button is pressed from javascript which would be

<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");
}});

of course like I did above you could apply the same to a button but it's pretty self explanatory

<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");
}});

however I don't see why you wouldn't use a form as it is way better in this case.

Answer 3

Found the solution. Removed Bootstrap modal togglers in the HTML document and wrote this code:

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
}