So I'm trying to enable the search button (default disabled) after a select option is selected other than --None-- using Javascript. It works totally fine except after the button becomes enabled, clicking it performs no action. Can anybody tell me why and how to enable it properly?
Heres the page block section of my visual force:
<apex:pageblocksectionitem id="cpbsi">
<apex:outputlabel value="Select Category: " />
<apex:outputpanel >
<apex:selectlist id="sl" value="{!selectedCategory}" size="1" styleclass="inputStyle" onfocus="categoryFocus(), categoryColorFocus()" onchange="categoryColorFocus()" onblur="categoryBlur()">
<apex:selectoptions id="slv" value="{!categoryOptionsList}" />
</apex:selectlist>
<apex:outputlabel value=" " />
<apex:commandbutton id="search" value="Search" action="{!categorySearch}" rerender="products, errorSection, categories" styleclass="submitButtonStyle" disabled="true"/>
</apex:outputpanel>
</apex:pageblocksectionitem>
Here's the Javascript that enables the button:
<script>
function categoryColorFocus() {
var test = document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.sl}').value;
if (test.length == 0) {
document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.sl}').style.cssText = "box-shadow: 0 0 10px #ff6666; border: 1px solid #ff1a1a;";
} else {
document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.sl}').style.cssText = "box-shadow: 0 0 10px #00e600; border: 1px solid #00b300;";
document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.search}').disabled = false;
}
}
</script>
Don't mind the styling code, just the lines that enable/ disable the button
document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.search}').disabled = false
this is not working ? if not try with justconsole.log(document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.search}'));
and check the element you are getting or not<input type="button" value="save" onclick="ActionFunction()"/>
and try to enable or disable from your JS. And use actionfunction for calling your apex methods