PlutoUI Buttons to push user input to a list

Tooling Pluto
1

I would like to append some user input to a list by using a Button to submit it. The problem is that every change in the user input results in a new submission, regardless of whether the submit button has been clicked.

I think the general scheme would be something like this:

my_list = []

@bind some_input TextField()

@bind submit_button Button()

let submit_button 
    push!(my_list, some_input)
end

I’ve also tried to use a function like this but it did not solve the problem either:

function submit_function(b, input)
    push!(my_list, input)
end

submit_function(submit_button , some_input)

In both cases, if the first input to be added is “here’s stuff”, the result in my_list is:

["h", "he", "her", "here", "here's", "here's ", "here's s", ... , "here's stuff"]

…and so on. I also briefly explored using other html user interface tools but that appeared to have the same behavior.

For other cases I’ve done a workaround using a CheckBox and executing based on whether checked or not, but this will become impractical for the current problem. Am I using Buttons incorrectly or is this an inherent limitation? Are there any alternatives to interactively adding user input to a list?

If it makes any difference, what I ultimately want to do is have the ability for a user to input multiple values using a mix of Select, NumberField, Slider, TextField which are all contained in a Type. Then once all fields are complete, the user can submit, that type will be instantiated and pushed to the list, and the fields will return to default values.

Thanks in advance for advice!

2

The issue is that the let-cell is executed also for any change of some_input, which is not what you want here. The solution is to wrap it into a ref:

# ╔═╡ 248637d9-fbb1-4b9b-9ba1-23539206b3d0
using PlutoUI

# ╔═╡ c2fc96ab-6b86-4cf5-8d34-47443e3c206a
my_list = String[]

# ╔═╡ a7b70b21-ff49-4521-ba97-d5b67dbf1e26
@bind some_input TextField()

# ╔═╡ 6104110e-4b5a-49c9-a4d9-2f9653de01f5
typeof(some_input)

# ╔═╡ c475d4ba-f832-4f97-b116-f8d95cbed4c9
some_input_ref = Ref{String}()

# ╔═╡ 6dc037ab-90f8-4579-bc94-93f3ffb88f5f
some_input_ref[] = some_input

# ╔═╡ 89549754-af0d-4d33-82db-257d815dd006
@bind submit_button Button()

# ╔═╡ 43d1b02f-36dd-4ad8-9fa1-1356ca6edbc0
let submit_button 
	length(some_input_ref[]) > 0 && push!(my_list, some_input_ref[])
end

# ╔═╡ 529211bb-eceb-41f3-abe6-d6f7fe31cca0
my_list
3 Likes
3

worked perfectly! I’ll have to read the documentation for Ref so I can understand it a little better. Thank you!

1 Like