How do you make a button alert() the text of a textbox?

Question

In "Introduction to Nitrogen", there is this example:

body() -> 
    #panel { style="margin: 50px;", body=[
        #h1 { text="My Page" },
        #label { text="Enter Your Name:" },
        #textbox { },
        #button { id=mybutton, text="Submit" }
    ]}.

Then they have you add an event that alert()'s hello:

body() ->
    [
        #button { text="Submit", actions=[
          #event{type=click, actions=#alert { text="Hello" } 
        ]}
    ].

so I came up with this:

%% -*- mode: nitrogen -*-
%% vim: ts=4 sw=4 et
-module (my_page).
-compile(export_all).
-include_lib("nitrogen_core/include/wf.hrl").
-include("records.hrl").

main() -> #template { file="./site/templates/bare.html" }.

title() -> "Hello from my_page.erl!".

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        actions="alert('hello')"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id="mybutton"}
    ]}.

It would only seem natural that the guide would show you how to alert() a name that is entered in the textbox. I tried:

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        actions="alert(obj('mytextbox').text)"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id="mybutton"}
    ]}.

...but the alert() says undefined. I can't even find the docs for the obj() function.

I also tried using pure js for the action because the guide says:

What is a Nitrogen Action?

An action can either be Javascript, or some record that renders into Javascript.

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        actions="alert(document.getElementById('mytextbox').innerHTML)"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id="mybutton"}
    ]}.

But, no alert() pops up. Can anyone help?

Edit: Well, when I look at the page source, the html looks like this:

<input type="text" class="wfid_temp182655 wfid_mytextbox textbox" value="" />
<input type="button" value="Submit" class="wfid_temp182684 wfid_mybutton button" />

I notice that even though the button and textbox records have an id field, nitrogen does NOT set the id attribute for those html elements--which makes no sense to me.

Answer 1

According to the docs:

Event Action - #event {}
...
Within the Javascript, you can use obj('id') where id is the id of a Nitrogen element. You can also use obj('me') to refer to the target of the current action.

Using the value property (rather than the textContent or innerHTML property--yeah, my js is rusty!) in conjunction with obj('mytextbox') works:

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        actions="alert( obj('mytextbox').value )"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id=mybutton}
    ]}.

Elsewhere, the docs say:

trigger - (atom) The id of the Nitrogen element that will trigger this action. Set automatically.

target - (atom) The id of the Nitrogen element to be referenced by obj('me'). Set automatically.

So, if I set the target to 'mytextbox', then I should be able to write:

"alert( obj('me').value )"

but no alert() pops up when I try the following code:

%% -*- mode: nitrogen -*-
%% vim: ts=4 sw=4 et
-module (my_page).
-compile(export_all).
-include_lib("nitrogen_core/include/wf.hrl").
-include("records.hrl").

main() -> #template { file="./site/templates/bare.html" }.

title() -> "Hello from my_page.erl!".

body() -> 
    wf:wire(#event{
        type=click,
        trigger=mybutton,
        target=mytextbox,
        actions="alert( obj('me').value )"
    }),
    #panel{ style="margin: 50px;", body=[
        #h1{ text = "My Simple App..." },
        #label{ id=mylabel, text="Enter your name:"},
        #textbox{ id=mytextbox },
        #button{ text="Submit", id=mybutton}
    ]}.

And if I try just:

actions="alert( obj('me') )"

still no alert() pops up.