function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
doubleminusdoubleminus 

anyone know how to use javascript to disable a command button when an inputfield is empty?

 

<script type="text/javascript">

   function enable()
   {
    if (document.getElementById("input").value.length > 0)
      document.getElementById("button").disabled = false;
    else
      document.getElementById("button").disabled = true;
   }
</script>


           <apex:inputField value="{!foo.bar__c}" id="input" onchange="enable()"/>

           <apex:commandButton action="{!save}" value="View" status="save" id="button" disabled="true"/>

 

That doesn't work at all. Any ideas? Seems like it should be super simple, so I may be missing something.

 

vhanson222vhanson222

I recommend that you put the jQuery library in your Org as a static resource.

 

Once you have the jquery library in your static resources, it should be fairly easy... example below:

 

 

<apex:includeScript value="{!URLFOR($Resource.jquery_18, '/js/jquery-ui-1.8.custom.min.js')}"/>

<script>
    var j$ = jQuery.noConflict();

    function DisableCancelStatus()
    {
        j$("#statusPage\\:statusForm\\:CancelSaleBlock\\:CancelSalePageBlockSection\\:CanceledStatus").attr("disabled","true");
    }
</script>

 

www.jquery.com

 

 

EDIT:

While you may make the ID of your input button like this:

 

<apex:commandButton action="{!foo}" id="fooButton" />

 

depending on where that commandButton sits ont he page, the Id will change when the page is rendered.

 

Example:

 

 

<apex:page id="thePage">

    <apex:Form id="theForm">

      <apex:pageBlock id="theBlock">

         <apex:commandButton action="{!foo}" id="fooButton" />

      </apex:pageBlock>

   </apex:Form>

</apex:page>

 

 

 

when the page is loaded, the Id of your commandButton will be "thePage:theForm:theBlock:fooButton".  Use firefox and download the FireBug add-on.  Then load your visualforce page, right-click on the button, and click 'Inspect Element'... This will show you the ID of your element after the page is rendered.  That ID is the one that you will need to use in your javascript.

 

Hope that helps
doubleminusdoubleminus

Thanks for the reply. I was hoping to not have to use an external library for this one tidbit of js functionality. So there is no way around using jquery?

 

(I did adjust Ids via firebug though, thank you.)
vhanson222vhanson222

You can copy/paste the code below in to a new VFPage and it will add the 'Disabled' attribute to 'TheButton' but i haven't been able to get the button to LOOK disabled (greyed out, un-clickable).

 

 

<apex:page id="thePage">

<script>
function disableButton()
{
   document.getElementById("thePage\:theForm\:theBlock\:theButton").disabled = true;
}
</script>

  <apex:form id="theForm">
    <apex:commandButton value="test" onClick="disableButton(); return false;" reRender="theBlock"/>
    <apex:pageBlock id="theBlock">
      <apex:commandButton value="theButton" action="{!save}" id="theButton" />
    </apex:pageBlock>
  </apex:form>
</apex:page>

 hope that helps at least lead you in the right direction.

 
jwetzlerjwetzler

As an aside, you should be using $Component to get the ids of your elements instead of hardcoding them in, since they change based on the structure of your page.

 

Regarding the original issue in this thread, there is a disabled attribute on commandButton that includes updating the styling.  Something like this should work:

 

<apex:page id="thePage" controller="disableCon">
  <apex:form id="theForm">
    <apex:actionRegion>
      <apex:actionFunction name="toggleButton" rerender="theBlock"/>
      <apex:inputText value="{!theInput}" onkeyup="toggleButton()"/>
    </apex:actionRegion>
    <apex:pageBlock id="theBlock">
      <apex:commandButton value="theButton" action="{!save}" disabled="{!OR(ISBLANK(theInput), '' == theInput)}" id="theButton" />
    </apex:pageBlock>
  </apex:form>
</apex:page>

 

 

So you have a commandButton that is disabled based on the value of the input (whether it's null or an empty string).  You have an actionFunction that submits everything in the surrounding actionRegion (i.e. the inputText for {!theInput}) to the server, and then rerenders the pageBlock that contains the button.  Your inputText will call this actionFunction after every key is pressed, thus causing the commandButton to reevaluate its disabled attribute.

 

The controller doesn't have anything exciting in it, just allowing the quick fixes to do their thing should still get this example working for you.
doubleminusdoubleminus

 

How would this work for an inputfield (a lookup field) instead of an inputtext? I tried experimenting with the inputfield, but couldn't get this to work (passing the value to the disabled attribute won't seem to work).
And, just to double check...using the proper $Component binding would look like this?
<script>var viewButton = document.getElementById(“{!$Component.thebutton}”);</script>

jwetzler wrote:

As an aside, you should be using $Component to get the ids of your elements instead of hardcoding them in, since they change based on the structure of your page.

 

Regarding the original issue in this thread, there is a disabled attribute on commandButton that includes updating the styling.  Something like this should work:

 

<apex:page id="thePage" controller="disableCon">
  <apex:form id="theForm">
    <apex:actionRegion>
      <apex:actionFunction name="toggleButton" rerender="theBlock"/>
      <apex:inputText value="{!theInput}" onkeyup="toggleButton()"/>
    </apex:actionRegion>
    <apex:pageBlock id="theBlock">
      <apex:commandButton value="theButton" action="{!save}" disabled="{!OR(ISBLANK(theInput), '' == theInput)}" id="theButton" />
    </apex:pageBlock>
  </apex:form>
</apex:page>

 

 

So you have a commandButton that is disabled based on the value of the input (whether it's null or an empty string).  You have an actionFunction that submits everything in the surrounding actionRegion (i.e. the inputText for {!theInput}) to the server, and then rerenders the pageBlock that contains the button.  Your inputText will call this actionFunction after every key is pressed, thus causing the commandButton to reevaluate its disabled attribute.

 

The controller doesn't have anything exciting in it, just allowing the quick fixes to do their thing should still get this example working for you.

 
jwetzlerjwetzler

Lookups are a whole different animal.  onchange might be what you want to use instead of onkeyup.  The button will be toggled once the input box loses focus, whether the value is valid or not.  You'll probably have a hard time getting this one to do exactly what you want but I think it's pretty close.

 

As for your $Component example, whether or not that works for you is totally determined by where your script tag is in relationship to the element you are referring to.  You might have to qualify your $Component a little further.  Plenty of examples on the forums and in the dev guide for this.