There is a form having a textarea and a submit button
I want the submit to be enabled and disabled based on 'if there is any input in the textarea'
both the submit and content is being selected correctly (ill send a screenshot of it)
JS file:
document.addEventListener('DOMContentLoaded',() => {
document.querySelector('#all-posts').addEventListener('click', () => loadAllPosts())
if (document.querySelector('#following') != null){
document.querySelector('#following').addEventListener('click', () => loadFollowing())
}
loadAllPosts();
});
function loadAllPosts(){
document.querySelector('#allPosts-view').style.display = 'block';
document.querySelector('#following-view').style.display = 'none';
fetch('/api/post')
.then(response => response.json())
.then(data => {
const posts = data.data.posts;
const postCards = posts.map(post => {
let likeBtnClass = 'fa fa-heart-o';
if (post.liked_by_user) {
likeBtnClass = 'fa fa-heart';
}
const on = new Date(post.posted_on).toLocaleString('en-US', {
hour: 'numeric',
minute: 'numeric',
month: 'long',
day: 'numeric',
year: 'numeric',
timeZone: 'UTC'
});
return `
<div class="card text-white bg-dark mb-3" style="margin-bottom: 5px;">
<div class="card-body">
<h5 class="card-title">${post.posted_by.username}</h5>
<p class="card-subtitle mb-2 text-muted" style="font-size: 12px;">${on}</p>
<hr style="border: none; height: 1px; background-color: #FFFFF0; margin: 0px;">
<p class="card-text" style="margin-top: 5px; font-size: 25px;">${post.content}</p>
<div class="like-container">
<i id="like-btn" class="${likeBtnClass}" style="font-size:24px; cursor:pointer; margin-right: 10px;"></i>
<p class="card-subtitle mb-2 text-muted" style="margin-top: 0.5rem; padding: 0px; font-size: 12px;">${post.likes}</p>
</div>
</div>
</div>
`;
});
document.querySelector('#allPosts-view').innerHTML += postCards.join('');
})
.catch(err => console.error(err));
const likeBtnsContainer = document.querySelector('#allPosts-view');
likeBtnsContainer.addEventListener('click', (event) => {
if (event.target.matches('#like-btn')) {
event.target.classList.toggle('fa-heart');
event.target.classList.toggle('fa-heart-o');
}
});
if (document.querySelector('#newPost-form') !== null) {
const submit = document.querySelector('#newPost-submit');
const content = document.querySelector('#newPost-content');
submit.disabled = true;
content.addEventListener('keyup', () => {
if (content.value.length > 0) {
submit.disabled = false;
} else {
submit.disabled = true;
}
});
}
}
function loadFollowing() {
document.querySelector('#allPosts-view').style.display = 'none';
document.querySelector('#following-view').style.display = 'block';
}
HTML file:
{% extends "network/layout.html" %}
{% load static %}
{% block title %} Index {% endblock %}
{% block js %} <script src="{% static 'network/index.js' %}"></script> {% endblock %}
{% block body %}
<div id="allPosts-view">
{% if request.user.is_authenticated %}
<div class="card text-white bg-dark mb-3" style="padding: 15px; margin-bottom: 5px;" >
<form id="newPost-form">
<div class="form-group">
<label for="NEW-POST" style="font-size: 20px;">New Post</label>
<hr style="border: none; height: 1px; background-color: #FFFFF0; margin: 0px 0px 15px 0px;">
<textarea class="form-control" id="newPost-content" rows="3" style="resize: none; height: 120px;"></textarea>
</div>
<input id="newPost-submit" type="submit" class="btn btn-primary" style="background-color: #007BFF;" value="Post">
</form>
</div>
{% endif %}
</div>
<div id="following-view">
</div>
{% endblock %}
I'm using django here but I don't think that is matters in this scenario
submit button
textarea
Issue:
The submit button is getting disabled but even when i type something in the text area the submit button is disabled
