Update one edit-text when another changes

1

I need to have two edit-texts so that when I change the value in one, the other is updated. In particular, if one edit-text is A and the other is B, then when A changes, B needs to be A*F1/F2 where F1 and F2 are field values and when B changes A needs to be set to B*F2/F1.

I wish this to be without a button.

2

Hi @Ittayd ,

I canā€™t get you all the way there - but I can get you started:

Letā€™s say you have two fields:

  • Tiddler called Main
    • Within the Main Tiddler - you have two fields:
      • Field Called: Item_A
      • Field Called: Item_B

Then, you can have this inside Main - or any other Tiddler:

Show Item_A: (You can also change it)

<$edit-text 
  tiddler="Main" 
  field="Item_A" 
  size="10"
  placeholder="100"
/>

Show Item_B: (You can also change it)

<$edit-text 
  tiddler="Main" 
  field="Item_B" 
  size="10"
  placeholder="20"
/>

To Update the values - you have options,ā€¦

  • You can use ā€œletā€ and set the values - this is set before you calculate

Letā€™s Update A - when we set B

<$let Update_A={{{ [{Main!!Item_B} -(something here that multiplies and divides)- []] }}}>

<$action-setfield $tiddler="Main" $field="Item_A" $value=<<Update_A>>  />

ā€“

Letā€™s Update B - when we set A

<$let Update_B={{{ [{Main!!Item_A} -(something here that multiplies and divides)- []] }}}>

<$action-setfield $tiddler="Main" $field="Item_B" $value=<<Update_B>>  />

I hope this helps,ā€¦

TwN00b

3

A bit hacky but maybe itā€™d be possible to use a placeholder to show the calculated value, i.e:

letā€™s call ā€œedit-text for field Aā€ edit-A and equivalent for edit-B
then use an action delete such that entering into edit-A deletes content in B and vice versa
and let the placeholder value for each show the calculated value

You can style a placeholder value so it doesnā€™t look faded.

Actually, this is probably not ā€œhackyā€. This is probably how to do it.

4

Give this a try:

\define updateA() <$action-setfield A={{{ [{!!F2}divide{!!F1}multiply{!!B}] }}}/>
\define updateB() <$action-setfield B={{{ [{!!F1}divide{!!F2}multiply{!!A}] }}}/>

| F1|<$edit-text field="F1"/>|
| F2|<$edit-text field="F2"/>|
| A|<$eventcatcher $change="<<updateB>>"><$edit-text field="A"/></$eventcatcher>|
| B|<$eventcatcher $change="<<updateA>>"><$edit-text field="B"/></$eventcatcher>|

Notes:

  • The ā€œtrickā€ is to use the $eventcatcher widget with a $change handler, so that you can enter a value in the A or B field, and only trigger an update of the other field when the focus leaves the input field and the field value has been changed.

-e

5

Perfect! Thanks! (making this more than 20 bytes long)

6

Thanks @EricShulman ! - - - This is amazing - - adding to my bag of ā€œgoldā€,ā€¦

7

Is there a way to do the update inline instead of defining a macro? Or alternatively define it just above the $event catcher ?

8

Yes, you can put the $action-setfield code inline like this:

| F1|<$edit-text field="F1"/>|
| F2|<$edit-text field="F2"/>|
| A|<$eventcatcher $change="<$action-setfield B={{{ [{!!F1}divide{!!F2}multiply{!!A}] }}}/>"><$edit-text field="A"/></$eventcatcher>|
| B|<$eventcatcher $change="<$action-setfield A={{{ [{!!F2}divide{!!F1}multiply{!!B}] }}}/>"><$edit-text field="B"/></$eventcatcher>|

-e

9

I think the second version makes the code much harder to maintain.

10

For me, putting the macros at the top of the tiddler while the code that uses them is at the bottom makes it hard to maintain.

11

Friendly words of advice: learn to ā€œseparate concernsā€. Co-mingling producers (macros, procedures, et al) amongst and within your code would be like dragging around the manufacturing facility (along with all their suppliers) for the car youā€™re driving.

Needless to say, in both cases, itā€™s not possible.

12

Actually, when the value in the edit text changes, the field is updated immediately, so canā€™t I just have a widget that constantly updates the other field (without catching events)? I guess action-setfield is not good since it sets the field only when triggered as an action.

13

You can use the inputActions attribute of the $edit-text widget.

14

Well, in my case there are several edit texts and I want to change another field according to the fields they changed. Essentially I think iā€™m looking for a spreadsheet like behavior. If A3 has =A1+A2 then whenever A1 or A2 change, A3 changes. Seems like wrapping everything in eventcatchers or using inputactions is too verbose.

15

Like in speadsheets rather than update the value in the formula, it is better to store the values separately, only once and use a reference to the ā€œcellā€,

Eg {{tiddler!!field}}

16

In my case, I need some calculation, e.g. add ā€˜field1ā€™ and ā€˜field2ā€™. can I do it in a third field value?