Interdependant Input(Number) Fields

I have 2 interdependent input fields. The value in the fields is calculated based on the input number in the other field.

Example: If Gold = 10 then USD should be 9800 ( = 10x980)
Alternately if input USD = 980, THEN the Gold should reset value to 1 (= 980/980).

Please suggest ways to implement this logic
Many Thanks :slight_smile:

With the conditional part of the input, I think you can easily manage it.

Hi there, @ajitsahu2… if I understand your post correctly, I think it’s a bit more involved than using conditionals on the elements (no offense to @ecomerss, of course). I put together an example that seems to produce the desired result, and the way I went about it involves two custom states and a workflow on each input element.

First, I added two custom states (with a type of number) to the page, one for each of the inputs, and I set the Initial content of each input to its associated custom state. Then, I added a workflow so that when gold’s input is changed, the custom state for USD’s input is set as follows…

Oh, I also have each input in a group, and the second step of the workflow resets the group for the opposite input because if there is already a value in the input, the value won’t reset on its own to the value of its associated custom state.

Anyway, the workflow for a change to the USD input looks the same aside from the fact that the calculation divides by 980, and the second step resets the group that contains the gold input.

Who knows, maybe I overcomplicated the whole thing, but again, my example does seem to produce the desired result, and I hope this helps.


1 Like

@mikeloc I see no offense at all, no worry. :slight_smile:

I just don’t undestand why using a workflow is better than conditionals (which are making the same result, with a condition where the text changes when the other input is not empty).
Perhaps, workflow is better but I don’t understand where (I help others here to learn more about bubble, then don’t hesitate to tell me where I am wrong. :slight_smile: ).

In theory, conditionals look like they would work, @ecomerss, and it does appear to be a much simpler way to go. That being said, I did try to get it to work using conditionals, and while it does seem to work at first, bouncing back and forth between the inputs and changing their values when the inputs are not empty does not seem to produce the desired result. So, that’s why I thought the solution needed to involve custom states and workflows. Again, though, I could be missing something and overcomplicating things, so if you have it working using conditionals, clue me in, please. :slight_smile:

1 Like

You could put a custom state which is the actual ratio of gold vs USD and then have a second custom state that is the actual ratio of USD vs gold.

Then in the input that is used for the USD value, make the conditional to have an initial content value equal to the Gold inputs value multiplied by the custom state value holding the ratio of USD to Gold…do the same thing for the Gold input to have a conditional that puts the initial value at the USD inputs value multiplied by the custom state value holding the ratio of Gold to USD.

That might work so that when you enter the value into the Gold input first, the USD input will automatically be shown (if the conditional to be met on the USD input is when Gold input value is not empty)…

You may need to have a custom state though to signal which input has had a value inputted. This would probably make it function better.

I tried with just conditionals and the inputs count down…

Screen Shot 2021-05-18 at 2.27.20 AM

Screen Shot 2021-05-18 at 2.26.37 AM

Screen Shot 2021-05-18 at 2.26.23 AM
Screen Shot 2021-05-18 at 2.26.17 AM

1 Like

Thanks, Matthew. You are articulate. The suggestion indeed works.

Follow-up Question: The ratios USD/GOLD and GOLD/USD is getting MANUALLY stored in custom states, however in real-time It’s intended to fetch the LIVE Gold vs USD rates from a Market API. The idea is to display LIVE rates via the API and the calculation in the input field will be based off those values.
How do we store the values( Gold rates Vs USD) rendered from the API in a custom state?
Alternately, Should those values(Gold rates vs USD) be stored in a DB – Won’t that solution slow down the app?

When you load the page you can set the custom state value using the workflow action set state and use the api value.

I wouldn’t store the value in DB as there is no need for that considering the fact it is meant to be real time.

So for the live rates to be updated the page has to be loaded every time? Is there a way to stream live rates and store values in custom states?

You could but to get the real live rates down to the second you are needing to recall the api every second…you could always just use the api call value instead of the custom state value, but again, you’ll need to recall the api every second to get “live” updates.

@mikeloc I didn’t wanted to work instead of ajitsahu but, yeah, it works with only conditional things. :slight_smile:
The things the visitor is seeing are just not the one there are on the page.
When I use this kind of convertor, the field where put the number to convert is always on the top (or on the left when it is horizontal) because it is the way we read. Then, to think like the user will think I add a slider to change the fields. I have not only two inputs but four, which work two by two, without any bouncing back (and I can also have the ratio in the state of an element). When the slider is on “Gold => USD”, I see the first two inputs wich allow me to change my Gold in USD. When the slider is on “USD => Gold”, I see the others ones to change my USD in Gold (and it is also possible to have a rate with a state). But yes, it is not really what our guy wants, just what the user wants more (on my way). :slight_smile:
But I understand now where was the issue the bouncing thing. Thanks to comment it. :slight_smile: