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

[Mochice]

 <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

But I totally don't know how to call that value into the function. I tryed like this:

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

[E1cid]

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

[TotallyInformation]

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:

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.

[Mochice]

[Mochice]

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

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

and html part

<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

[UnborN]

Hi,

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

HTML:

 <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

 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 ?

[Mochice]

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

[TotallyInformation]

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.

[Mochice]

Thank you so much everyone, i resolved

<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.

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