1

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

4
  • document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.search}').disabled = false this is not working ? if not try with just console.log(document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.search}')); and check the element you are getting or not
    – Ratan Paul
    Nov 25, 2015 at 5:39
  • No that is working, its just once it enables the button, the button doesn't do what its supposed to do. Nov 25, 2015 at 5:54
  • If i were to erase the disabled="true" in my visual force page, the button works, no I know there isn't anything wrong with the action Nov 25, 2015 at 5:55
  • @tomshaep831 I tried also getting error. you can use html <input type="button" value="save" onclick="ActionFunction()"/> and try to enable or disable from your JS. And use actionfunction for calling your apex methods
    – Ratan Paul
    Nov 25, 2015 at 5:57

2 Answers 2

0

We have used disable="true" and action="{!categorySearch}" directly in commandbutton and when it executes it replaces action with onclick="return false". Now when we enable the command button which is now input tag with type="submit" will have onclick="return false", so anyhow the action will not work.

Solution : In javascript when enabling button, call an actionfunction using below code :

document.getElementById('{!$Component.form.pcpb.cpbs.cpbsi.search}').disabled = false;
categorySearchAction();

<apex:actionFunction name="categorySearchAction" action="{!categorySearch}" rerender="products, errorSection, categories>
3
  • No I didn't but if it doesn't work we should below one and it works document.getElementById('{!$Component.FORMID.FIELDID}').disabled = false; Also, we can have a look on below link for reference developer.salesforce.com/forums/?id=906F000000095moIAA Nov 25, 2015 at 9:31
  • Please check below link as a reference developer.salesforce.com/forums/?id=906F000000095moIAA If it is not supported then what is the use of disabled attribute in apex:commandbutton I agree with the point that after disabling a actionbutton it doesn't call the controller method but for that we can call actionfunction, if we are using javascript. Nov 25, 2015 at 9:36
  • After execution commandbutton becomes imput tag with submit type, so we can use below code easily for enabling that document.getElementById('{!$Component.FORMID.FIELDID}').disabled = false; Nov 25, 2015 at 10:23
2

Looks like we can't enable or disabled the command button.

In place of command button create a <input type="button" value="save" onclick="ActionFunction()"/>

and in your javascript try to enable or disable this html input button.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .