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

  • NodeBB

    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.


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

  • NodeBB

    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


  • @baris Thanks for your help! It works 🙂

Suggested Topics

| |