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

  • 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 '15 at 5:39
  • No that is working, its just once it enables the button, the button doesn't do what its supposed to do. – tomsharp831 Nov 25 '15 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 – tomsharp831 Nov 25 '15 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 '15 at 5:57
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>
| improve this answer | |
  • 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 – Pravesh Mehta Nov 25 '15 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. – Pravesh Mehta Nov 25 '15 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; – Pravesh Mehta Nov 25 '15 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.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.