# Extract html input field value to payload

**URL:** https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568
**Category:** Dashboard
**Created:** [5 November 2018 05:06 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568 "2018-11-05T05:06:53Z")
**Posts on this page:** 15
**Page:** 1

<div class="post-metadata">

### Author: ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)
#### Post date: [5 November 2018 05:06 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/1 "2018-11-05T05:06:54Z")

</div>

Hey all,  
I've created an input field in the template node and I just want to extract it to use in my flows.

Here's the basic input field (without the brackets): input type="text" name="joel"

And then I'd like to take the users input and do something with it. How can I access the value in the html input field and use it in my node-red flow logic?

---

<div class="post-metadata">

### Author: ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)
#### Post date: [5 November 2018 05:33 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/2 "2018-11-05T05:33:51Z")

</div>

So you have to send out a message from the template node. Whenever I want to send, I use the following line of code in my template nodes:

```auto
//Declare once to make scope available in functions
var theScope = scope;

//then use where needed
theScope.send({payload:'whatever'});

```

The message will appear on the output of the template node and from there you can continue with the next step in your flow

---

<div class="post-metadata">

### Author: ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)
#### Post date: [5 November 2018 15:43 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/3 "2018-11-05T15:43:25Z")

</div>

Thanks @krambriw that makes sense. But how do I reference the input field value in {payload: ${JSvariable??}}  
I can't seem to find the correct method...

---

<div class="post-metadata">

### Author: ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)
#### Post date: [5 November 2018 16:20 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/4 "2018-11-05T16:20:11Z")

</div>

I suppose you are inside the template nodes html code now? To send something initiated via the web page defined in the template node, I typically have html code when I click the mouse button like this:

```auto
onMouseDown="SendMessage('entrance lamp', this)"

```

This will call my javascript function

```auto
    function SendMessage(eventname, el){
        if(el.className == "on") {
            el.className="off";
            //writeToScreen(eventname+' turnoff');
            theScope.send({payload:eventname+' turnoff'});
            } 
        else {
            el.className="on";
            //writeToScreen(eventname+' turnon');
            theScope.send({payload:eventname+' turnon'});
            } 
        return false;
    }

```

To wait and listen to events coming into the template node, I have the following javascript code:

```auto
    scope.$watch('msg', function(msg) {
        //writeToScreen(msg.payload);
        inMessage(msg.payload);
    });

```

When an incoming message arrives, the function inMessage is called where you do whatever is needed based on the payload

Hope this helps

Kind regards, Walter

---

<div class="post-metadata">

### Author: ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)
#### Post date: [5 November 2018 16:39 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/5 "2018-11-05T16:39:19Z")

</div>

Sorry @krambriw I'm missing something here, so would the template node look something like this?

```
<button onMouseDown="SendMessage()">SendVarToPayload</button>

<script>
    var eventname = 'hi';
    function SendMessage(){
        theScope.send({payload:eventname+' turnoff'});
    }
</script>

```

Assuming the resulting msg.payload = 'hi turnoff'

---

<div class="post-metadata">

### Author: ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)
#### Post date: [5 November 2018 16:45 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/6 "2018-11-05T16:45:21Z")

</div>

> [@krambriw](#):
>
> var theScope = scope;

Correction!! I got it, was just missing the scope declaration.

Thanks again sir!

---

<div class="post-metadata">

### Author: ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)
#### Post date: [5 November 2018 18:28 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/7 "2018-11-05T18:28:07Z")

</div>

Great, good to hear!  
It is very powerful to use, I have built some nice web pages using template nodes, showing all kind of info including live videos, buttons to control lamps etc etc

---

<div class="post-metadata">

### Author: ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)
#### Post date: [6 November 2018 00:14 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/8 "2018-11-06T00:14:38Z")

</div>

Indeed.

@krambriw hopefully last question - how would I pre-populate html input fields in a template node with variables from a javascript function? I am trying the following in an attempt to set the temp1 field with the value from an array payload[0].temp :

```
<head>
    <script>
        var test = {{payload[0].temp}};
        let fetchTemp = () => {
            document.getElementById("temp1").value = test;
        }
    </script>
</head>
<body>
    <button onMouseDown="fetchTemp()">Assign temp</button>
</body>
```

---

<div class="post-metadata">

### Author: ![krambriw](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/krambriw/32/5429_2.png) [@krambriw](https://discourse.nodered.org/u/krambriw)
#### Post date: [6 November 2018 05:27 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/9 "2018-11-06T05:27:16Z")

</div>

I think you are very close, try just to add the id to the html code like this

```auto
<body>
    <button id="temp1" onMouseDown="fetchTemp()">Assign temp</button>
</body>

```

As example from my code, I have a typical line in the html to show the status of our home, "At home" or "Away". It looks like this:

```auto
<td><div style="text-align:center"><button id="emptyhouse" class="off" style="font-size:150%; background-color:black; height:60px; width:280px">&nbsp;AtHome</button></div></td>

```

When it is time to update, basically controlled by the state of our home alarm system, I use this javascript code:

```auto
        if (event === "Status.armed") {
            document.getElementById("emptyhouse").style.backgroundColor="#FBF14D";
            document.getElementById("emptyhouse").style.color ="black";
            document.getElementById("emptyhouse").className = "on";
            document.getElementById("emptyhouse").style.fontSize ="25";
            document.getElementById("emptyhouse").innerHTML = "&nbsp;Away";
        }
        if (event === "Status.unarmed"||event === "Status.armedhome") {
            document.getElementById("emptyhouse").style.backgroundColor="black";
            document.getElementById("emptyhouse").style.color ="white";
            document.getElementById("emptyhouse").className = "off";
            document.getElementById("emptyhouse").style.fontSize ="25";
            document.getElementById("emptyhouse").innerHTML = "&nbsp;AtHome";
        }

```

As you see, using document.getElementById you can control many other attributes as well

---

<div class="post-metadata">

### Author: ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)
#### Post date: [6 November 2018 21:52 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/10 "2018-11-06T21:52:50Z")

</div>

> [@jmacle](#):
>
> I am trying the following in an attempt to set the temp1 field with the value from an array payload[0].temp

> [@jmacle](#):
>
> var test = {{payload[0].temp}};

As you have no doubt found out, you cannot substitute payload values into your `<script> ... </script>` elements. Instead, you need to use the scope.watch code that Walter provided earlier to get the msg and update the element with the new value.

Also, your template source is NOT a complete html page -- so any `<head> ... </head>` elements are ignored. Only the body portion of your template in inserted into the overall Dashboard page layout. If you really need something added to the head of the dashboard, put it into a separate `ui_template` and select Template Type: "Added to site `<head>` section"

---

<div class="post-metadata">

### Author: ![jmacle](https://avatars.discourse-cdn.com/v4/letter/j/3ab097/32.png) [@jmacle](https://discourse.nodered.org/u/jmacle)
#### Post date: [8 November 2018 03:58 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/11 "2018-11-08T03:58:01Z")

</div>

Ok cool thanks for the info @shrickus!

---

<div class="post-metadata">

### Author: ![JayGhb](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/jayghb/32/5550_2.png) [@JayGhb](https://discourse.nodered.org/u/JayGhb)
#### Post date: [12 November 2018 09:00 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/12 "2018-11-12T09:00:23Z")

</div>

I have looked for days how to do that  
and everything refers to scope.$watch()  
kind of things that never worked on what I want.  
I can not believe it was so simple. Thank you very much.  
This should be included in ui\_template documentation instead of  
the current example imho.

---

<div class="post-metadata">

### Author: ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)
#### Post date: [12 November 2018 20:03 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/13 "2018-11-12T20:03:36Z")

</div>

If you can summarise the example you want to see we can certainly look to add/replace it.  
(or indeed a Pull request would be welcome)

---

<div class="post-metadata">

### Author: ![khaled.jelassi](https://avatars.discourse-cdn.com/v4/letter/k/ba9def/32.png) [@khaled.jelassi](https://discourse.nodered.org/u/khaled.jelassi)
#### Post date: [26 December 2018 22:30 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/14 "2018-12-26T22:30:46Z")

</div>

thanks a lot for your code (simple idea and a good result)

---

<div class="post-metadata">

### Author: ![Josov](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/josov/32/6228_2.png) [@Josov](https://discourse.nodered.org/u/Josov)
#### Post date: [3 May 2020 13:34 UTC](https://discourse.nodered.org/t/extract-html-input-field-value-to-payload/4568/15 "2020-05-03T13:34:06Z")

</div>

I am sorry to bother after such a long time, I would like to get entered html data back into in message but it does not work. Where do i go wrong?

```auto
<div>
    <script>
        var theScope = scope;
        function SendMessage(num, descr){
            theScope.send({payload:{output:num, description:descr}});
        }
    </script>
    <h3>Wijzig Switch details van {{msg.payload.description}}</h3>
    <h3>op schakelpaneel: {{msg.payload.location}}</h3>    

    <label for="outputnum"><b>IO nummer op board</b></label>
    <input type="number" id="outputnum" placeholder="{{msg.payload.output}}" name="outputnum">

    <label for="omschrijving"><b>Omschrijving</b></label>
    <input type="text" id="omschrijving" placeholder="{{msg.payload.description}}" name="omschrijving">
    
    <button onMouseDown="SendMessage(outputnum, omschrijving)">Submit</button>
</div>

```