Bootstrap 5.3.5 disable submit button doesn't work

Bootstrap 5.3.5 disable submit button doesn't work

I have the following form:

    <form id="chatForm" name="chatForm" action="{{url_for('home.invoke')}}" method="post">
      <div id="message-box">
        <input type="text" id="prompt" name="message" placeholder='How can I help?' class="form-control" required onkeyup="stoppedTyping()"/>
        <input id='image', name="image", type='file', accept="image/*"/>
        <button type="submit" id="btn-submit" disabled>Submit</button>
      </div>
    </form>

I would like to disable / enable the btn-submit but it doesn't seem to work. I have tried document.querySelector('#submit').disabled = false; but to no avail. The <script>:

  <script type="text/javascript">
    <!-- https://thepythoncode.com/article/how-to-build-a-chat-app-in-python-using-flask-and-flasksocketio -->
    function stoppedTyping() {
        var value = document.forms["chatForm"]["message"].value;
        console.log(`stoppedTyping value: ${value}, length: ${value.length}`)
        if(value.length > 0) { 
            $('#btn-submit').removeClass('disabled');
        } else { 
            $('#btn-submit').addClass('disabled');
        }
    }
    document.querySelector("#prompt").onblur = stoppedTyping();
    // Select your input type file and store it in a variable
    document.querySelector("#chatForm").addEventListener("submit", async (e) => {
      e.preventDefault();
      const prompt = document.querySelector("#prompt").value;
      const image = document.querySelector("#image");
      if (prompt.trim()) {
        var form = new FormData();
        form.append("prompt", prompt);
        if (image && image.files.length && image.files[0]) {
          //console.log(`Image name: ${image.files[0].name}, size: ${image.files[0].size}, type: ${image.files[0].type}`);
          form.append("image", image.files[0]);
        }// else 
          //console.log("No file selected!");
        // Display the key/value pairs
        /*for (var pair of form.entries()) {
            console.log(pair[0]+ ', ' + pair[1]); 
        }*/
        $('#btn-submit').addClass('disabled');
        $("#submit").value = 'Processing...';
        const response = await fetch('/invoke', {
          method: 'POST',
          //headers: { 'Content-Type': 'multipart/form-data' }, Do NOT declare Content-Type: multipart/form-data in request header
          body: form
        });
        const data = await response.json();
        console.log(JSON.stringify(data, null, 2))
        const queryContainer = document.createElement('div');
        queryContainer.innerHTML = `<div><strong>You:</strong> ${prompt}</div>`;
        document.querySelector("#messages").appendChild(queryContainer);
        var converter = new showdown.Converter();
        const responseContainer = document.createElement('div');
        responseContainer.innerHTML = `<strong>Me:</strong><div>${converter.makeHtml(data.message)}</div><br>`;
        document.querySelector("#messages").appendChild(responseContainer);
        document.querySelector("#prompt").value = '';
        document.querySelector("#image").value = '';
        document.querySelector("#submit").value = 'Submit';
      } else 
        console.error(`Invalid prompt!`);
    });
  </script>

Answer

(1) Remove disabled from the UI element

(2) Use addClass('disabled') / removeClass('disabled');

Enjoyed this article?

Check out more content on our blog or follow us on social media.

Browse more articles