1

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>

2 Answers 2

1

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.

0

When you are going to use id="txtboxtocheck" in plain html you'd have to take #txtboxtocheck as selector not .txtboxtocheck - the later is to select a class - not an id.

But in visualforce the id will be prefixed and so it won't work. Try to use the styleClass="txtboxtocheck" at the text textarea instead and stick with the .txtboxtocheck selector.

3
  • Changed but still same issue.
    – user10584
    Aug 11, 2014 at 4:40
  • <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>
    – user10584
    Aug 11, 2014 at 4:41
  • No, that's not as I said. Again: you can not use the id attr. You can not use use the # selector. You need to set a styleClass and use . to select it. Additionally there may be other errors I can't tell - but how you are using selectors it can't work.
    – Uwe Heim
    Aug 11, 2014 at 8:03

You must log in to answer this question.

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