JavaScript in Custom HTML- can JS modify outside CustomForm?

Anvil Q&A
1

I have a app with the Main Form and a Custom Form. The custom form has custom HTML with some JavaScript. I can make the JS print to console when an object is clicked, but I am unsure how to have it modify anything outside of a div tag in the custom HTML. Is there any way to access things like. self.form_1.text_box_1.text from the JS?

2

I think I am partway there, but not quite. I found this section on custom HTML templates. It discusses using anvil-slot repeat, but the nature of the div tagging is a bit unclear to me. For instance, my form has a text box above and a button beneath. I would like to tag each of them with a unique div s1 and s2:

<div anvil-slot-repeat=“default”
style=“border: 2px solid red”>
<div id=“s1” anvil-slot></div>
<div id=“s2” anvil-slot></div>
</div>

In my JavasScript, the first line of the below works! but the second does not. I want to change the text in the text box and simulate a button click on the button.

document.getElementById(“s1”).innerHTML = “some new text”;
document.getElementById(“s2”).click()

Any further insight would be appreciated.

3

Can you give me a specific example of what you are trying to do? Might help me understand how to help you a bit better.

There’s a few techniques you can use. You can call back to Anvil from JS using the technique in the link below. This would let you call a function which could in turn update a component’s properties (or “click” the button).

Calling Anvil from JS & vice versa :

But in brief -
You need to create a DIV and a unique ID in your custom html form (this is used purely to identify the calling form to Anvil) :

<div id="unique-form-id"></div>
...
<script>
    anvil.call($('#unique-form-id'), anvil_function [,parameters])
</script>
1 Like
4

Thanks a million David. anvil.call is exactly what I was looking for. Not sure how I didn’t find it sooner. I hope to have an example to post soon.

Cheers.

1 Like