Disable a button until a text field is populated

Stuart Jones

July 31, 2015 at 2:02 pm #553

Hello,

I want to do the above for my UI. This seems pretty simple – there are examples in the Spark documentation that show how to do this. My problem is that they don’t seem to work.

I have a text area field with ControlId “ReviewComments” and a button. I do not want the button to work unless there is text in the text field. The example given in the JS Doc for Button is to put “return ${ReviewComments}.isValid(); in the onClick event handler. My challenge with this is that fields begin life as valid, so I would need to invalidate the text field on first load and that seems wrong. So I tried “return ${ReviewComments}.getText();”. Even though getText() returns a string, I have seen it used in several examples as if it returned a boolean … me.setValid(me.getText(),”field is required”).

Is there something obvious that I am doing wrong here? Or is there a better way to get this to work? Thanks

Stuart Jones

Matthew Oatts

July 31, 2015 at 3:30 pm #556

Hi Stuart,

Here are a few pointers that should help:

1) The event that you want to pay attention to is when the text field changes, so you’ll be calling your methods which change the button visibility in the text control’s On Change event configuration option

2) The JS Doc for Button does not show that .setValid is a method. However, there is a generic example under onclick that might be misleading so we’ll look into that. Remember to always scroll down to where it says “Methods” to see which methods are available on a control

I tested this myself and attached some screenshots that show what you want in 1 line of code in the Text control’s On Change event handler and 1 line of code for the button. My button was named “Button_1” by the way and the code is pasted here:

For the text control’s On Change:

((me.getText()==””||!(me.getText())) ? ${Button_1}.setEnabled(false) : ${Button_1}.setEnabled(true));

For button’s On Load:

me.setEnabled(false);

Stuart Jones

August 1, 2015 at 12:01 pm #563

Hello Matthew,

Thanks for the pointers. You have, no doubt, figured out that I am new to this and so I am making some pretty basic mistakes as I learn the best ways to do things. I hadn’t considered the setEnabled method but it seems like a good one. I do note that your example above uses me.getText() as if it returns a boolean whereas the JS doc says that it returns a string. Is it common practice to use the getText() method in this way? I see examples like this all over the documentation and it seems a little misleading?

After my initial post, I did get my button to work the way I wanted by placing the following in the on Click event of my button:

return ${ReviewComments}.getText().length>0;

Stephen Perez

August 3, 2015 at 8:03 am #564

Stuart,

These examples (that use me.getText() as if returning a boolean, even though getText() returns a string) are actually taking advantage of a very useful feature in Javascript called “truthy” and “falsy” values. These are values that, while not explicitly booleans, evaluate to either a true or a false when used where a boolean might normally be used instead. In the case of strings, if the string is either null or empty (str = “”), it is considered falsy, as it evaluates to false when used as a boolean. Otherwise, if it is populated with any value, it will evaluate to true. This is very useful when you need to check if a string has been populated before taking some action. This is just one example though, and truthy and falsy values are not limited to strings. For a bit more information on this feature, you can read a quick primer here.

EDIT: It should be noted that because of the nature of truthy and falsy values, they cannot simply be expected to return a boolean in all places (such as return statements). These values only evaluate to true or false when used somewhere that can only be evaluated as a boolean, such as the condition for an if statement, or when passed into a method in place of a boolean parameter. Anywhere that a boolean value is not required, either by definitions in the code or by the structure of javascript, these values will evaluate to their usual types.

Stuart Jones

August 3, 2015 at 11:12 am #566

Hello Andrew,

Thank you. Truthy and false are not something that I had come across before – at least not by these names. I suspected that this was what was going on  – though I had certainly not appreciated the second part of your explanation, which helps me to understand why things like returning a value don’t work when other uses do. (The link was very helpful as well).

Stuart…