Below is the code to enable save button when all the required fields are filled. But, for some reason it is not working for the "audience" & "messagetemplate". Save button gets enabled even if these 2 fields are not filled.
const saveCommunicationButton = document.getElementById("save-communication-button")
const audience = document.getElementById("communicationdata_communication_audience")
const messageTemplate = document.getElementById("communicationdata_message_template")
const communicationName = document.getElementById("communicationdata_communication_name")
const description = document.getElementById("communicationdata_communication_description")
const campaignGroup = document.getElementById("communicationdata_campaign_group")
const campaignCategory = document.getElementById("communicationdata_campaign_category")
const campaignType = document.getElementById("communicationdata_campaign_type")
const campaignFrequency = document.getElementById("communicationdata_campaign_frequency")
const campaignDescription = document.getElementById("communicationdata_campaign_description")
// this is to check if the input for all 3 is valid. if so, enable saveCampaignButton.
const checkEnableButton = () => {
saveCommunicationButton.disabled = !(
audience.value &&
messageTemplate.value &&
communicationName.value &&
description.value &&
campaignGroup.value &&
campaignCategory.value &&
campaignType.value &&
campaignFrequency.value &&
campaignDescription.value !== ""
)
}
audience.addEventListener("change", checkEnableButton)
messageTemplate.addEventListener("change", checkEnableButton)
communicationName.addEventListener("change", checkEnableButton)
description.addEventListener("change", checkEnableButton)
campaignGroup.addEventListener("change", checkEnableButton)
campaignCategory.addEventListener("change", checkEnableButton)
campaignType.addEventListener("change", checkEnableButton)
campaignFrequency.addEventListener("change", checkEnableButton)
campaignDescription.addEventListener("change", checkEnableButton)This is not how to test not not equal
audience.value &&
messageTemplate.value &&
communicationName.value &&
description.value &&
campaignGroup.value &&
campaignCategory.value &&
campaignType.value &&
campaignFrequency.value &&
campaignDescription.value !== ""
Why not add required to each field, then the form cannot be submitted
Alternatively use an array of IDs
const disable = ["save-communication-button", "communicationdata_communication_audience", "communicationdata_message_template", "communicationdata_communication_name", "communicationdata_communication_description", "communicationdata_campaign_group", "communicationdata_campaign_category", "communicationdata_campaign_type", "communicationdata_campaign_frequency", "communicationdata_campaign_description"]
.some(id => document.getElementById(id).value.trim() === "")