# Change @jashkenas/inputs value from click event in Leaflet map?

**URL:** <https://talk.observablehq.com/t/change-jashkenas-inputs-value-from-click-event-in-leaflet-map/2248>\
**Category:** Help\
**Created:** [August 9, 2019, 7:21pm UTC](https://talk.observablehq.com/t/change-jashkenas-inputs-value-from-click-event-in-leaflet-map/2248 "2019-08-09T19:21:58Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![maptastik](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/maptastik/32/106_2.png) [@maptastik](https://talk.observablehq.com/u/maptastik)\
**Post date:** [August 9, 2019, 7:21pm UTC](https://talk.observablehq.com/t/change-jashkenas-inputs-value-from-click-event-in-leaflet-map/2248/1 "2019-08-09T19:21:58Z")

</div>

I am attempting to update the value of a [@jashkenas/inputs](https://observablehq.com/@jashkenas/inputs) text form using a value derived from a click event in a Leaflet map. The idea here is that a user could either provide the coordinates manually or from clicking on a map.

I am able to get the value I need from the click event, but I am having trouble passing it into the text form. The text form value is apparently a constant. As such it appear I cannot just assign the value from the click event to the variable containing the initial text form value. I’ve included a basic example of what I’ve been trying to. Does anyone have any suggestions for how I can pass the value from a click event into a @jashkenas/inputs text form?

> **[Change text input value using result from click interaction with a Leaflet map](https://observablehq.com/@maptastik/change-text-input-value-using-result-from-click-interactio)**
>
> An Observable notebook by Ryan Cooper.

---

<div class="post-metadata">

**Author:** ![bgchen](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/bgchen/32/784_2.png) [@bgchen](https://talk.observablehq.com/u/bgchen)\
**Post date:** [August 9, 2019, 7:38pm UTC](https://talk.observablehq.com/t/change-jashkenas-inputs-value-from-click-event-in-leaflet-map/2248/2 "2019-08-09T19:38:41Z")

</div>

Here’s something that works:

> **[Comparing ‘Change text input value using result from click interaction with a...](https://observablehq.com/compare/8d7ec427528277f6@122...a5e8e5da1166b936@136)**
>
> A comparison of two Observable notebooks.

(I think I learned this trick from the [Linked Inputs](https://observablehq.com/@mbostock/linked-inputs) example.)

The “assigning to a constant” error occurs because Observable cells are in strict mode, and inside the cell `newCoordinates` hasn’t been defined yet. You don’t actually need a new view cell for what you’re trying to do, so I just placed the code defining the event handler directly inside the `map` cell.

There’s also a fancier technique in [Synchronized Views](https://observablehq.com/@mbostock/synchronized-views) that I’ve also used from time-to-time.

---

<div class="post-metadata">

**Author:** ![maptastik](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/maptastik/32/106_2.png) [@maptastik](https://talk.observablehq.com/u/maptastik)\
**Post date:** [August 9, 2019, 7:52pm UTC](https://talk.observablehq.com/t/change-jashkenas-inputs-value-from-click-event-in-leaflet-map/2248/3 "2019-08-09T19:52:07Z")

</div>

This is great. There are a few concepts I think I need to dig into a bit more, but this approach on the whole makes sense. Thanks for the suggestions and explanation!

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 9, 2019, 10:56pm UTC](https://talk.observablehq.com/t/change-jashkenas-inputs-value-from-click-event-in-leaflet-map/2248/4 "2019-08-09T22:56:12Z")

</div>

Specifically for Jeremy’s inputs collection there’s also

> **[Mutable Forms](https://observablehq.com/@mootari/mutable-forms)**
>
> An Observable notebook by Fabian Iwand.

which automatically handles most of the widgets.

---

<div class="post-metadata">

**Author:** ![jashkenas](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/jashkenas/32/1778_2.png) [@jashkenas](https://talk.observablehq.com/u/jashkenas)\
**Post date:** [August 9, 2019, 11:11pm UTC](https://talk.observablehq.com/t/change-jashkenas-inputs-value-from-click-event-in-leaflet-map/2248/5 "2019-08-09T23:11:15Z")

</div>

@mootari — Is Mutable Forms a feature that you’d like (and think would be appropriate) to merge back into the Inputs notebook?

It seems generally useful, and safe — as long as we keep it in mind when adding any new input types.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [August 9, 2019, 11:35pm UTC](https://talk.observablehq.com/t/change-jashkenas-inputs-value-from-click-event-in-leaflet-map/2248/6 "2019-08-09T23:35:57Z")

</div>

> [@jashkenas](#):
>
> Is Mutable Forms a feature that you’d like (and think would be appropriate) to merge back into the Inputs notebook?

@jashkenas I’d love to, but right now I’m getting a 500 server error when I try to fork the changes that I added.

Edit: It worked after I reloaded the original notebook and reapplied the changes.