# Computed expression on TextInput?

**URL:** <https://forums.fusetools.com/t/computed-expression-on-textinput/5213>\
**Category:** How-to Discussions\
**Created:** [April 28, 2017, 10:22am UTC](https://forums.fusetools.com/t/computed-expression-on-textinput/5213 "2017-04-28T10:22:52Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kevin](https://avatars.discourse-cdn.com/v4/letter/k/2acd7d/32.png) [@kevin](https://forums.fusetools.com/u/kevin)\
**Post date:** [April 28, 2017, 10:22am UTC](https://forums.fusetools.com/t/computed-expression-on-textinput/5213/1 "2017-04-28T10:22:52Z")

</div>

Hi I’m trying to add a computed expression on TextInput

js:

```
	var searchinput = Observable("");

	searchinputLogger = function(){
		debug_log(searchinput.value);
	};
	searchinput.addSubscriber(searchinputLogger);

	module.exports = {
		'searchinput':searchinput,
	}

```

ux:

```
<TextInput PlaceholderText="search..." Value="{= toLower({searchinput})}" Alignment="Center" FontSize="20" />

```

what I’m trying to do is making the user input lowercase (force capital to lowercase) but this doesn’t seem to work

ps this works:  
`<TextInput Value="{= toLower(HELLO)}!" Alignment="Center" />`

---

<div class="post-metadata">

**Author:** ![Uldis](https://yyz1.discourse-cdn.com/flex035/user_avatar/forums.fusetools.com/uldis/32/657_2.png) [@Uldis](https://forums.fusetools.com/u/Uldis)\
**Post date:** [April 28, 2017, 10:24am UTC](https://forums.fusetools.com/t/computed-expression-on-textinput/5213/2 "2017-04-28T10:24:54Z")

</div>

Hey Kevin,

it seems there’s a bit of misunderstanding on when you should use [UX expressions](https://www.fusetools.com/docs/ux-markup/expressions) and when you have to do something else. Let me try to break it down for you.

UX expression string functions are useful to perform some user-facing string manipulation on relatively static things - stuff that the user does not interact directly with. See in the example below how I have used them to change a label and a value.

What you want to do is, instead, something much more complicated. It is a user input validation / manipulation _in place_. Meaning that you need to change the actual data-bound value of the `TextInput`, not just its visual representation. And for that you need to use a bit more involved approach, like the one I’ve included in the same example below.

```auto
<App>
    <JavaScript>
    var Observable = require("FuseJS/Observable");

    var someLabel = "LaBeL";
    var someValue = "sOmE vAlUe";

    var searchinput = Observable("");
    searchinput.onValueChanged(module, function(x) {
        var lowered = x.toLowerCase();
        // to avoid a feedback loop, only change the value when it differs,
        // because when we change the searchinput.value to the lowered string,
        // it triggers this .onValueChanged again, but this time with the
        // already-lowered value
        if (searchinput.value !== lowered) {
            searchinput.value = lowered;
        }
    });

    module.exports = {
        searchinput: searchinput,
        someLabel: someLabel,
        someValue: someValue
    }
    </JavaScript>
    <StackPanel Orientation="Horizontal" Alignment="TopCenter" ItemSpacing="8" Margin="0,16,0,0">
        <Text Value="{= toUpper({someLabel})}" />
        <Text Value="{= toLower({someValue})}" />
    </StackPanel>
    <TextInput PlaceholderText="search..." Value="{searchinput}" Alignment="Center" FontSize="20" />
</App>

```

Hope this helps!

---

<div class="post-metadata">

**Author:** ![kevin](https://avatars.discourse-cdn.com/v4/letter/k/2acd7d/32.png) [@kevin](https://forums.fusetools.com/u/kevin)\
**Post date:** [April 28, 2017, 11:02am UTC](https://forums.fusetools.com/t/computed-expression-on-textinput/5213/3 "2017-04-28T11:02:27Z")

</div>

Works great thanks 😃