Re: [Tobago] How to make button disable when user inputing a text field by using tc:in?

[Madan Narra]

Hi Sam,

I had a case earlier to the same what u specified in ur mail.

The onChange() event in <tc:in/> is called when the focus is lost from that.
But if u enter some value in <tc:in> and directly click on the button then ,
the button will not get disabled instead ur button action will be called.

So we need to add 'Key Press' events for <tc:in/>

Try the code snippt as followed,
<tc:in id="inputText" />

<tc:button label="Click Me" id="clickMe" action="#{yourBean.actionMethod}"/>

<tc:script>
   Tobago.addEventListener(window, 'load', initFunctionOnLoad);

   function initFunctionOnLoad(){
     if(Tobago.element('page:inputText')
     {
      Tobago.addEventListener(Tobago.element('page:inputText'), 'keypress',
onValueChange);
     }
   }

   function onValueChang(event)
   {
      var unicode=event.keyCode;
      if(Tobago.element('page:clickMe') && unicode!=9) // Dont disable if
the keyPress is 'Tab'
      {
          Tobago.element('page:clickMe').disabled = true;
          Tobago.element('page:clickMe').className = 'tobago-button-default
tobago-button-disabled';
      }
   }
</tc:script>

1) First define your components with proper Id's.
2) The elements get observed when the page loads in <tc:script>.
3) The ' if ' Statement check's for <tc:in> component exists in the page or
not. If so then it add's key press listeners to that component.
4) If keyPress is done in <tc:in> then the function onValueChang() called
and checks for the keyPressed. If its 'Tab' key, then it will not disable
else for any press the 'Click Me' button gets disabled.
5) The clikcMe button gets disabled and it gets the style class as spefied
in the code.

Regards,
Madan



On 4/24/07, Wong, Emmanuel (Sam) <[EMAIL PROTECTED]> wrote:

 Hi:

        I would like to disable a submit button when user is entering a
text field by using tc:in? Could someone give me better direction?
Thanks.

For example:

<tc:script>

function disableButton()

{

        var submitBut = document.getElementById('submit');

        alert(submitBut = ' + submitBut);

        submitBut.disabled = true;

}

</tc:script>

<tc:cell spanX="4">

                        <tc:in focus="true" onchange="disableButton();"
value="#{Controller.title}"

                                readonly="#{Controller.readOnly}"

                                tip="title" >

                                <f:validateLength maximum="120" />

                        </tc:in>

                </tc:cell>

 <tc:button action="#{Controller.submit}"

                                label="submit"

                                id=" submit"

                                immediate="false">

                                <f:facet name="confirmation">

                                        <tc:out value="Are you sure to
submit?" />

                                </f:facet>

                        </tc:button>

--> Sam Wong