[SalesForce] How to disable and enable button depend on text value

Once click on Submit Feedback. Pop up text box open. But here by default , Submit button in disable mode.Once enter value in text area and then it should be come into enable mode (Submit).If remove text and then again revert into disable mode(Submit).

….

<apex:component controller="CommunityNavFooterController" allowDML="true">
      <!--script-->
      <style type="text/css">
          .popup
        {
            background-color: white;
            border-width: none;           
            z-index: 9999;
            left: 50%;
            padding:20px;
            position: absolute;
            width: 400px;
            height:175px;
            border-radius:10px;
            border:1px;           
            margin-left: -180px;
            top:800px;
        }

        .popupBg
        {
            background-color:black;
            opacity: 0.20;
            filter: alpha(opacity = 90);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 600px;
            left: 0;
            z-index: 9998;
        }
    </style>
    <script type='text/javascript' src='http://code.jquery.com/jquery.min.js'></script>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>

$(".txtboxtocheck").change(function(){
    var enablebtn = true;
    $(".txtboxtocheck").each(function(){
        if($(this).val() == '')
            enablebtn = false;
    });

    if(enablebtn)
        $("#butn").attr('disabled',false);
    else
        $("#butn").attr('disabled',true);
});

</script>
<style type='text/css'>
 #searchInput {
          height: 30px;
          line-height: 30px;
          padding: 3px;
          width: 300px;
          }
        </style>  
     <!--The Footer-->
    <div class="ftr">
        <div class="site-width grid">
            <div class="ftr-box-left one-half palm--one-whole lap--one-whole">
                <div class="ftr-icons">
                    <a href="http://www.facebook.com/pages/Cradlepoint/292869307387" target="_blank">
                        <img src="{!URLFOR($Resource.Wirestone,'Images/Footer_Images/Facebook_Icon.png')}" /></a>
                    <a href="http://twitter.com/#!/cradlepoint" target="_blank">
                        <img src="{!URLFOR($Resource.Wirestone,'Images/Footer_Images/Twitter_Icon.png')}" /></a>
                    <a href="https://plus.google.com/105092216039296278811/posts" target="_blank">
                        <img src="{!URLFOR($Resource.Wirestone,'Images/Footer_Images/GooglePlus_Icon.png')}" /></a>
                    <a href="http://www.linkedin.com/company/cradlepoint-inc." target="_blank">
                        <img src="{!URLFOR($Resource.Wirestone,'Images/Footer_Images/LinkedIn_Icon.png')}" /></a>
                </div>
            </div><!--
            --><div class="ftr-box-left one-half palm--one-whole lap--one-whole">
                <div class="ftr-links">               
                <apex:form >

                    <apex:outputPanel id="popup">
                        <apex:outputPanel styleClass="popupBg" layout="block" rendered="{!Hide}"/>
                        <apex:outputPanel styleClass="popup" layout="block" rendered="{!Hide}">
                              <apex:inputTextarea value="{!Feedback}"  style="width:400px;Height:150px" id="txtboxtocheck">
                                  <apex:actionSupport event="onClick" action="{!showSubmit}" reRender="popup" rendered="{!Hide}"/>
                              </apex:inputTextarea><br/>
                            <center><apex:commandButton value="SUBMIT" action="{!Submit}" reRender="msg,popup" id="butn"/>
                                <apex:commandButton value="CANCEL" action="{!closePopup}" reRender="popup" rendered="{!Hide}"/>
                            </center>
                        </apex:outputPanel>
                    </apex:outputPanel>






                    <apex:outputPanel id="msg">                    
                       <apex:outputPanel styleClass="popup" layout="block" rendered="{!ShowMsg}">                                          
                            <center> Your feedback has been successfully submitted.
                                     Thank you for leaving feedback. 
                                     Your contribution is valued and appreciated. 
                            </center>
                            <center>  <apex:commandButton value="OK" action="{!closePopup}" reRender="msg" rendered="{!ShowMsg}"/></center>
                       </apex:outputPanel>            
                    </apex:outputPanel>

                    <apex:commandLink value="Submit Feedback" action="{!openPopUp}" reRender="popup"/>
                    <a href="CommunityDashboard">{!DashboardLbl}</a>
                    <a href="http://cradlepoint.com/legal-privacy-statement" target="_blank">{!LegalPrivacyPolicyLbl}</a>
                    </apex:form>
                    <!--a href="#">{!StorePoliciesLbl}</a-->
                </div>
                <div class="ftr-cr">{!CopyRight}</div>
            </div>
        </div>
    </div>
    <!--End Footer-->
</apex:component>

Best Answer

You can change your selector to 

 $("[id$=txtboxtocheck]")

this will select the element that ENDS WITH that value. Since VF MAY put block level ids in front of your ID this is the easiest way to select by ID.

If you do not have an ID attribute in every component in your VF page then VF will append the IDs and the selector using # will not work.

Also like Uwe stated, you can add the ID to the class parameter of the component and then select by the class selector

$(".txtboxtocheck")

Either should work.

Related Topic