I want get input field from user

[awkj]

Question
...your question...
get user a inbox field , how to get it and use in HandleClick of example ?

in root.vugu I have a input and a function call,

data.HandleClick(event)

in root-data.go have a function

func (data *RootData) HandleCick(event *vugu.DOMEvent){
}

I want to use input field as value when I click button, and fetch server api
Is your question related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Suggested Changes
If applicable, please provide any suggestions of how to improve.

Additional context
Add any other context, info, files, etc. related to your question.

[bradleypeabody]

Have a look at the DOM Events documentation page. That shows how to register to handle a DOM event (such click, or others).

To get the value property of an element you'll need to use https://golang.org/pkg/syscall/js/ to call into the browser to get it (for now, more functionality surrounding this is coming).

[bradleypeabody]

Closing this, feel free to re-open if more questions or something isn't clear the docs.

[ScreamingTaco]

I have a question about this. I'm having a hard time getting the value using syscall/js.

Here is the relevant portion of my component:

<div vg-if='data.isUpdating'>Loading...</div>
    <div vg-if='data.isUpdating == false'>
        <form @onSubmit='data.onSubmit(event)'>
            <div>
             <text-field vg-for='i := 0; i < 2; i++' :id="data.Fields[i].Name"
                 :name="data.Fields[i].Name" :contents="data.Fields[i].Contents">
         </div>
         <input type="submit" value="Submit">
        </form>
    </div>

And in my go code:

type RootData struct { 
    Fields []TextFieldData 
    isUpdating bool
}

func (data *RootData) onSubmit(event *vugu.DOMEvent){ 

    ee := event.EventEnv()
    go func() {
        ee.Lock()
        data.isUpdating = true
        ee.UnlockRender()
        ee.Lock()
        defer ee.UnlockRender()
        for i := 0; i < len(data.Fields); i++ {
            js.Global().Get("document").Call("getElementById", data.Fields[i].Name).Call("setAttribute", "name", data.Fields[i].Contents)
        }
        data.isUpdating = false
    }()
}

As a test, I'm trying to change the label (name) displayed next to the text box, but it isn't working. I'm at a loss here. Any advice @bradleypeabody ? I'm using this for the form validation tutorial.

[bradleypeabody]

@ScreamingTaco

A couple things I see at first glance:

• Your onSubmit function should be OnSubmit. For various reasons it needs to be an exported method, at least for now.
• The event name from @whatever needs to reflect the actual event name without "on", so for submit instead of @onsubmit=, you want @submit

Try fixing those points and see how it goes.

[ScreamingTaco]

Thanks for that. I hadn't noticed those things. However, it didn't change anything. Is there a way for me to tell if the function was even called? log.Printf doesn't work.

[bradleypeabody]

log.Printf should indeed work, also fmt.Printf. If there's no output I would suspect your function is still not being called. Are you sure that whatever you are doing it invoke it would cause the 'submit' event to be fired? You might try some other events like 'click', 'keydown', 'mouseover' in order to isolate if no events are being fired at all or if it's only specific ones that are having trouble. That might help narrow it down.

[bradleypeabody]

@ScreamingTaco This program works with a submit event:

<div class="my-first-vugu-comp">
    <form @submit='data.OnSubmit(event)'> <input type="submit">Submit</input> </form>
    <div vg-if="data.Show">It worked!</div>
</div>

<style>
.my-first-vugu-comp { background: #eee; }
</style>

<script type="application/x-go">
import "log"

type RootData struct { Show bool }
func (data *RootData) OnSubmit(event *vugu.DOMEvent) {
    log.Printf("event: %v", event)
    event.PreventDefault()
    data.Show = true
}
</script>

[bradleypeabody]

Also don't get tripped up by browser cache. Just today I was running into "log statements not working" and it turned out to just be the browser had cached the earlier version. There is some stuff in place in Vugu to mitigate this, but still... don't be shy about "Empty Cache and Hard Reload" if any doubt.

[ScreamingTaco]

Yep, emptying the cache was what I needed. Now it is showing log messages. I still haven't gotten the js to work, but now I have errors to work with. Thanks!

[itstmyi]

@bradleypeabody
Any new progress or plan about DOM object access by vugu's method instead of syscall/js package ?
Thanks for hard working !

[bradleypeabody]

@itstmyi Getting there - making steady progress but it's quite a bit of work. I hope to have the basic new DOM syncing mechanism working for markup by the end of this weekend and then follow up with events and type-safe components right after.