Save user input from a form

[Yu Jin]

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]

The topic you linked shows how to create a POST route so you can send the form data to it. Your code only has GET routes. You need to create the POST route as well.

[Yu Jin]

@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

[Yu Jin]

@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?

[baris]

Instead of creating your GET route manually use the setupPageRoute function from nodebb core. It will properly add the required middleware for csrf handling. https://github.com/NodeBB/NodeBB/blob/master/src/routes/helpers.js#L28

[Yu Jin]

@baris Thanks for your help! It works