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');