# Uibuilder: How can I get the input value to store it into DB?

**URL:** <https://discourse.nodered.org/t/uibuilder-how-can-i-get-the-input-value-to-store-it-into-db/35490>\
**Category:** General\
**Created:** [7 November 2020 09:26 UTC](https://discourse.nodered.org/t/uibuilder-how-can-i-get-the-input-value-to-store-it-into-db/35490 "2020-11-07T09:26:49Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mochice](https://avatars.discourse-cdn.com/v4/letter/m/c67d28/32.png) [@Mochice](https://discourse.nodered.org/u/Mochice)\
**Post date:** [7 November 2020 09:26 UTC](https://discourse.nodered.org/t/uibuilder-how-can-i-get-the-input-value-to-store-it-into-db/35490/1 "2020-11-07T09:26:50Z")

</div>

```auto
 <b-form class="border p-3 m-2">
                        <div id="boxDate" class="col-md-4">
                             <ul class="nav nav-stacked">
                                <li><strong>New value to insert</strong><br></li>
                                <li>
                                    <b-form-input v-model="msgInput" name="msgInput" placeholder="Insert the value"></b-form-input>
                                </li>
                            </ul>
                        </div>
                    </b-form>

```

This is the html code, I want to save the value insert into the input to create a function node to insert into DB

 ![immagine_2020-11-07_102427](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/c/f/cf72c226b29ba7cbaa810776ee3ee15b14c36218.png)  
But I totally don't know how to call that value into the function. I tryed like this:

```auto
var num = msg.payload.msgInput;
msg.payload=["06/11/20", num];
msg.topic="INSERT INTO test (`Date`,`Value`) VALUES (?,?);"
return msg;

```

but it didn't work. Can someone help me, please? Thank you

---

<div class="post-metadata">

**Author:** ![E1cid](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/e1cid/32/77971_2.png) [@E1cid](https://discourse.nodered.org/u/E1cid)\
**Post date:** [7 November 2020 10:04 UTC](https://discourse.nodered.org/t/uibuilder-how-can-i-get-the-input-value-to-store-it-into-db/35490/2 "2020-11-07T10:04:04Z")

</div>

Add a debug to the second output of interface, and post the complete message object.

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [7 November 2020 12:49 UTC](https://discourse.nodered.org/t/uibuilder-how-can-i-get-the-input-value-to-store-it-into-db/35490/3 "2020-11-07T12:49:18Z")

</div>

To get the data from a form, you have to have a click event function on a button, or in your case add a function to the change or key-up events (see the Vue documentation on how to call a function on an HTML event and what data that gives you).

In that function, you call the `uibuilder.send(msg)` function where `msg` is a msg-like object, for example:

```auto
uibuilder.send( { "topic": "myformdata", "payload": this.msgInput } )

```

`this.msgInput` gives you access to the msgInput variable that should be defined in the `data` property of your Vue app.

Change your uibuilder output debug node to show the whole msg rather than just the payload if you want to see everything.

Finally, you've connected you db output to the control output of uibuilder instead of the data output. The control output is for recognising and acting on new (dis)connections and calls for resending any cache, etc. It will, in the future, also be used for controlling authentication and authorisation.

---

<div class="post-metadata">

**Author:** ![Mochice](https://avatars.discourse-cdn.com/v4/letter/m/c67d28/32.png) [@Mochice](https://discourse.nodered.org/u/Mochice)\
**Post date:** [7 November 2020 13:37 UTC](https://discourse.nodered.org/t/uibuilder-how-can-i-get-the-input-value-to-store-it-into-db/35490/4 "2020-11-07T13:37:30Z")

</div>

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/8/0/805d0a31035bbfc20355f00c47a0c6ef8394c5c5.jpeg)

---

<div class="post-metadata">

**Author:** ![Mochice](https://avatars.discourse-cdn.com/v4/letter/m/c67d28/32.png) [@Mochice](https://discourse.nodered.org/u/Mochice)\
**Post date:** [7 November 2020 13:40 UTC](https://discourse.nodered.org/t/uibuilder-how-can-i-get-the-input-value-to-store-it-into-db/35490/5 "2020-11-07T13:40:01Z")

</div>

Thank you so much, so i tryed to do a function on key up

```auto
submit: function (msgInput) {
          uibuilder.send( { "topic": "myformdata", "payload": this.msgInput } )
        },

```

and html part

```auto
<b-form-input v-on:keyup.enter="submit(msgInput)" v-model="msgInput" name="msgInput" placeholder="Insert value"></b-form-input>

```

but it did't work, I know I doing something wrong

---

<div class="post-metadata">

**Author:** ![UnborN](https://avatars.discourse-cdn.com/v4/letter/u/4491bb/32.png) [@UnborN](https://discourse.nodered.org/u/UnborN)\
**Post date:** [7 November 2020 15:04 UTC](https://discourse.nodered.org/t/uibuilder-how-can-i-get-the-input-value-to-store-it-into-db/35490/6 "2020-11-07T15:04:17Z")

</div>

Hi,

I think its better if you use a button to control submitting the form as @TotallyInformation recommended.

**HTML** :

```auto
 <b-form class="border p-3 m-2">
          <div id="boxDate" class="col-md-4">
            <ul class="nav nav-stacked">
              <li><strong>New value to insert</strong><br /></li>
              <li>
                <b-form-input v-model="msgInput" name="msgInput" placeholder="Insert the value!"></b-form-input>
                <b-button v-on:click.prevent="submit" type="submit" variant="primary" class="mt-2">Submit</b-button>
              </li>
            </ul>
          </div>
        </b-form>

```

In your Vue data obviously you must have the **msgInput** defined so Vue's v-model will have the value stored and synchronized / updated

```auto
 data() {
    return {
      msg: "No Message Received from Node-Red",
      msgInput: ""
    }
  },
  methods: {
    submit() {
      console.log("msgInput", this.msgInput);
      uibuilder.send({ topic: "myformdata", payload: this.msgInput });
    }
  },

```

no need to pass the value in a function like your code since v-model takes care of that and msgInput is readily available to be send using **this.msgInput**

ps1. when you share code its good to send the complete html, js , flow so we can have a complete picture of your code.  
ps2. what db are you using ?

---

<div class="post-metadata">

**Author:** ![Mochice](https://avatars.discourse-cdn.com/v4/letter/m/c67d28/32.png) [@Mochice](https://discourse.nodered.org/u/Mochice)\
**Post date:** [7 November 2020 15:36 UTC](https://discourse.nodered.org/t/uibuilder-how-can-i-get-the-input-value-to-store-it-into-db/35490/7 "2020-11-07T15:36:32Z")

</div>

Thank you so much for your reply and your advice  
I will try and let you know, btw I'm using mysql

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [7 November 2020 16:24 UTC](https://discourse.nodered.org/t/uibuilder-how-can-i-get-the-input-value-to-store-it-into-db/35490/8 "2020-11-07T16:24:14Z")

</div>

keyup will trigger everytime a user lets go of a key so you would get lots of messages back and would need to handle things until the user had finished typing.

I recommend doing a quick tutorial on keyboard and mouse events in HTML in order to find the event that most suits your user interface. There are lots of different ways to do it. But, as mentioned, a button is the simplest to program.

---

<div class="post-metadata">

**Author:** ![Mochice](https://avatars.discourse-cdn.com/v4/letter/m/c67d28/32.png) [@Mochice](https://discourse.nodered.org/u/Mochice)\
**Post date:** [7 November 2020 17:41 UTC](https://discourse.nodered.org/t/uibuilder-how-can-i-get-the-input-value-to-store-it-into-db/35490/9 "2020-11-07T17:41:31Z")

</div>

Thank you so much everyone, i resolved

```auto
<div id="app" v-cloak>
                <b-container id="app_container">
                    <div class="container">
                      <div class="row">
                        <form id="search" role="form" style="border:0">
                          <div id="boxDate" class="col-md-3">
                            <ul class="nav nav-stacked">
                              <li><strong>From Date</strong></li>
                              <li>
                                <input type="text" class="form-control" placeholder="gg/mm/aaaa" id="dateFrom" />
                              </li>
                            </ul>
                          </div>
                          <div id="boxDate" class="col-md-3">
                            <ul class="nav nav-stacked">
                              <li><strong>To Date</strong><br></li>
                              <li>
                                <input type="text" class="form-control" placeholder="gg/mm/aaaa" id="dateTo" />
                              </li>
                            </ul>
                          </div> 
                          <div id="boxDate" class="col-md-3">
                              <ul class="nav nav-stacked">
                              <li id="notvisible"><strong>Push to Search</strong><br></li>
                              <li>
                                <button class="btn btn-outline-primary" type="button" id="getJsonSrc">Cerca</button>
                              </li>
                            </ul>
                          </div>
                        </form>
                      </div>
                    <table class="table" >
                      <thead class="thead">
                        <tr>
                          <th scope="col">Date</th>
                          <th scope="col">Value</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr v-for="item in msgFromDB" :key="item.value">
                          <td>{{item.Date}}</td>
                          <td>{{item.value}}</td>
                        </tr>
                      </tbody> 
                    </table>
                    <b-form class="border p-3 m-2">
                        <div id="boxDate" class="col-md-4">
                             <ul class="nav nav-stacked">
                                <li><strong>Nuovo valore da inserire in tabella</strong><br></li>
                                <li>
                                    <b-form-input v-model="msgInput" name="msgInput" placeholder="Inserisci il valore"></b-form-input>
                                </li>
                            </ul>
                        </div>
                        <div id="boxDate" class="col-md-4">
                              <ul class="nav nav-stacked">
                                  <li id="notvisible"><strong>Nuovo valore da inserire in tabella</strong><br></li>
                                  <li>
                                    <input v-on:click="submit" type="submit" class="btn btn-outline-primary">Aggiungi</input>  
                                  </li>
                            </ul>
                        </div>
                    </b-form>
                </b-container>
            </div>

```

this is the form and I add an input button. In the js file I add msgInput to data and the function submit() to methods.

```auto
var num = msg.payload;
var int = parseInt(num, 10);
console.log(num)
msg.payload=["06/11/20", int];
msg.topic="INSERT INTO test (`Date`,`Value`) VALUES (?,?);"
return msg;

```

This is the function node to insert into DB and now it works 😍

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [21 November 2020 17:41 UTC](https://discourse.nodered.org/t/uibuilder-how-can-i-get-the-input-value-to-store-it-into-db/35490/10 "2020-11-21T17:41:33Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.