Javascript form to POST data to back end database?

Code Examples
1

Hello,
I`m new to dreamfactory and i have what i believe to be a basic question that i need help with?
I would like to create a form to through which a user can send data to the backend database,
This is part of some sample code from one of the default apps index.html pages.

<p> Fill In The Form Below </p>    
    Surname: <input id="surname" name="surname" type="text" />
    <br /><br />
    Company: <input id="company" name="company" type="text" />
    <br /><br />
    Email: <input id="email" name="email" type="text" />
    <br /><br />
    MobileNumber: <input id="number" name="number" type="text" />
    <br /><br />
    FirstName: <input id="firstname" name="firstname" type="text" />
    <br /><br />

<input name="myBtn" type="submit" value="Submit Data" onClick="window.app.addTodo()" />

<P><b>Retrieve records from the "Clients" sample table located in your DreamFactory Services Platform</b></P>

<pre>
   window.df.apis.db.getRecords({table_name: "clients"}, function (response) {
          //Do something with the data;
            console.log(response);
        });
</pre>
<button style="display:none" id="try-now-get" onclick="window.app.getTodos()">Try it Now</button><br/>
<p><b>Response:</b></p>
<textarea class="results" style="width:400px;height:200px" id="get-results">Loading APIs...</textarea>


<p>--------------------------------------------------------------------------------------------------------------------------------------------</p>
<P><b>Insert records into the "clients" sample table located in your DreamFactory Services Platform</b></P>

<pre>
        var item = {"record":[{"surname":"srname","company":"compny","email":"emailaddr","number":"phoneno","firstname":"firstnme"}]};
        window.df.apis.db.createRecords({"table_name":"clients", "body":item}, function(response) {
            document.getElementById("post-results").innerHTML = JSON.stringify(response);
        }, function(response) {
            document.getElementById("post-results").innerHTML = JSON.stringify(response);
        });
</pre>
<button style="display:none" id="try-now-post" onclick="window.app.addTodo()">Try it Now</button><br/>
<p><b>Response:</b></p>
    <textarea class="results" style="width:400px;height:200px" id="post-results">Loading APIs...

And this is the code from the app.js file with the insert record code function.

//Insert a record

    var surname = document.getElementById('surname');
    var company = document.getElementById('company');
    var email = document.getElementById('email');
    var number = document.getElementById('number');
    var firstname = document.getElementById('firstname');

    window.app.addTodo = function () {
         
        alert("impliment me!");
        var item = {"record":[{"surname":"#surname","company":"company","email":"email","number":"number","firstname":"firstname"}]}; 
         window.df.apis.db.createRecords({"table_name":"clients", "body":item}, function(response) {
            document.getElementById("post-results").innerHTML = JSON.stringify(response);
         }, function(response) {
            document.getElementById("post-results").innerHTML = window.app.getErrorString(response);
        });
    };

I would really like to know how i can get data from a simple form with javascript from the fron`t end sent to the backend ? in the corresponding fields in the data base. Please help.

2

We provide some sample apps when you create a new DSP. These show basic CRUD using a to-do list. Is your app making a call to the REST API? If so please include the request and response so we can better assist you. Are you having trouble getting addTodo() to be called? Please provide more information if possible.