Updating a Textarea value and submit button status

Community Help
1

Hi,
I am writing my first notebook and I am using a Select Box to update the value of a Textarea for selecting different preset texts for the textarea, which are stored as objects in an array.

The submit button of the text area, which is mandatory, becomes active, as soon as I enter/type into the field of the text area, but it does not, when I update the value via the select box. The content of the text area is updated, but the submit button remains inactive. How can I update the value dynamically in a way that the submit button becomes active after the update? Or alternatively keep it active in general?

Example notebook

Many thanks,
C.

2

I think you are trying to do too much with the submit button. I think you you want the submit button to gate some later processing step, so I would pull that button out as its own Input.button()

viewof submit3 = Inputs.button("submit", {
  required: true,
  reduce: () => selection
})

Community Help / Tom Larkworthy / Observable (FYI: you did not list your example notebook so its unreadable)

1 Like
3

I made a few tweaks, is this what you were looking for? Example Selectbox Textarea Update / Observable / Observable

4

Many thanks @tomlarkworthy and @shancarter for your very helpful answers.
Tom, I forgot to publish the example first in a hurry, sorry, but it is now published.
I guess you are right and I was trying to do too much with the submit button I am currently working on a new version which combines it with a separate button. The content of the input area should be parsed by a parser after submit. The result should be processed and displayed/rendered in several ways.

2 Likes
5

I modified my example with some rendering outputs.

I changed my to just have live-editing text input too, but you could bring back the submit button if you like. The only difference is that the downstream renders will only update when you hit submit versus live as you type.

1 Like
6

@tomlarkworthy and @shancarter this is my solution so far, thanks to your help.
At the moment it takes all characters and symbols and the examples are just for demonstration.

Select first and then click parse. The result is displayed in LaTeX afterwards to show its math notation. I am consciously using the button to avoid a continuous update when typing a grammar and to parse only a complete grammar, which can contain multiple lines.

Now I need to create the parser and figure how to work with tex/LaTeX/KaTeX, especially how to translate the line breaks in the textarea.

Besides its mathematical notation I want to display the result as a Hypergraph with D3 and run a simulaton. So I guess I will come up with further questions…

1 Like
7

One small suggestion, you can also use our latex cell types if that is easier: Comparing Selectbox to textarea to Selectbox to textarea / Observable

1 Like
8

Also, not sure if this is helpful, but we do provide graphviz support as well: Graphviz / Observable / Observable

1 Like
9

Overlooked both, many thanks!

1 Like