Save user input from a form
-
Re: Whats the Workflow to save User Input from a Form
Hi guys,
I tried following the steps from this post to access the data from my form. I have created a new route in the users dashboard which contains some form for the users to fill and I want to store the data in the db similar to the post.plugin.init = function (params, callback) { var router = params.router; var middleware = params.middleware; // Define the function that renders the custom route. function render(req, res, next) { var data = {whatever: 44}; // This is the path to your template without the .tpl, relative to the templates directory in plugin.json var template = 'discord2'; // Send the page to the user. res.render(template, data); } // This actually creates the routes, you need two routes for every page. // The first parameter is the actual path to your page. router.get('/user/:user/visTest', middleware.buildHeader, render); router.get('/api/user/:user/visTest', render); callback(); };
In my tpl file called discord2.tpl I have some HTML forms that I want to get. I have been tinkering around with this for a while but still cannot get it to work. Following the code from the previous post i will get error post 404 not found when submit the form. I also tried to use express to get the form data but it is also not working. I am kinda new to Javascript and web development so I might be doing something wrong. Any help would be much appreciated.
-
@baris Hi thanks for the reply, I have already coded the post route in my main.js file
'use strict'; /* globals document, $ */ $(document).ready(function () { $('#testSubmit').on('click', function () { $.ajax(config.relative_path + '/user/sacktheadmin/visTest', { data: $('#testForm').serialize(), type: 'POST', headers: { 'x-csrf-token': config.csrf_token, }, success: function (data) { console.log('success'); }, error: function(xhr, status, errorThrown) { console.log(arguments); } }); return false; }); console.log('nodebb-plugin-quickstart: loaded'); });
This is my code that makes the post route but I will always get the error 404 when I click my submit button
<form id="testForm"> <label for="fname">First name:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Last name:</label><br> <input type="text" id="lname" name="lname"> <button id = "testSubmit" type="submit">Submit Data</button> </form>
This is the form in my tpl file
-
@baris I realized my mistake now I have added the post route but now I am getting a different error which is error 403 forbidden
const controllers = require('./lib/controllers'); var plugin = module.exports = {}; plugin.init = function (params, callback) { var router = params.router; var middleware = params.middleware; // Define the function that renders the custom route. function render(req, res, next) { // Get whatever data you want to send to the template here. // var c = renderChart(); var data = {whatever: 44}; // This is the path to your template without the .tpl, relative to the templates directory in plugin.json var template = 'discord2'; // Send the page to the user. res.render(template, data); } // This actually creates the routes, you need two routes for every page. // The first parameter is the actual path to your page. router.get('/user/:user/visTest', middleware.buildHeader, render); router.get('/api/user/:user/visTest', render); router.post('/user/:user/visTest', [middleware.applyCSRF], async function (req, res) { console.log(JSON.stringify(req.body)); // // req.body has the form data res.json('success'); }); callback(); };
I realized that my config.csrf_token is undefined when i do console.log(config.csrf_token) which seems to be the problem what can I do to fix this?