title: How to submit forms with QuillJs and body-parser?
body: <p>I am new to Nodejs (and coding, in general). I am trying to build a small Content Management System. I want my potential end users to be able to style their contents (bold, italicize, hyper link, etc...)  before submitting a post to my blog with a click of a button. Kind of kind the tools bar I am seeing on <strong><em>Stackoverflow as I am typing this</em></strong></p>
  
  <p>Here is what I got so far after reading Quill's guide:</p>
  
  <p><strong>form.ejs</strong></p>
  
  <pre><code>&lt;style&gt;
  #editor {
    height: 300px;
  }
  
  &lt;/style&gt;
  
  &lt;!-- Include Quill stylesheet --&gt;
  &lt;link href="https://cdn.quilljs.com/1.0.0/quill.snow.css" rel="stylesheet"&gt;
  
  &lt;!-- Create the toolbar container --&gt;
  &lt;div id="toolbar"&gt;
    &lt;button class="ql-bold"&gt;Bold&lt;/button&gt;
    &lt;button class="ql-italic"&gt;Italic&lt;/button&gt;
  &lt;/div&gt;
  
   &lt;form action = '/blog' method = 'POST'&gt;
    &lt;!-- Create the editor container --&gt;
    &lt;input type = 'text' name = 'title' placeholder = 'title'&gt;
    &lt;label for="body"&gt;About me&lt;/label&gt;
    &lt;input name="body" type="hidden"&gt;
    &lt;div id="editor"&gt;
       &lt;p&gt;I am at my wit's end. Stackoverflow is my last hope&lt;/p&gt;
    &lt;/div&gt;
      &lt;button type="submit"&gt;Submit&lt;/button&gt;
  
   &lt;/form&gt;
  
  
  &lt;!-- Include the Quill library --&gt;
  &lt;script src="https://cdn.quilljs.com/1.0.0/quill.js"&gt;&lt;/script&gt;
  
  &lt;!-- Initialize Quill editor --&gt;
  &lt;script&gt;
    var editor = new Quill('#editor', {
      modules: { toolbar: '#toolbar' },
      theme: 'snow'
    });
  
    var form = document.querySelector('form');
    form.onsubmit = function() {
      console.log("hey")
      // Populate hidden form on submit
      var body = document.querySelector('input[name=body]');
      body.value = JSON.stringify(quill.getContents());
  
      console.log("Submitted", $(form).serialize(), $(form).serializeArray());
  
    };
  
  &lt;/script&gt; 
  </code></pre>
  
  <p><strong>app.js file</strong></p>
  
  <pre><code>var app             = require('express')(),
      mongoose        = require('mongoose'),
      Blog            = require('./model/blog'),
      bodyParser      = require('body-parser');
  
  mongoose.connect("mongodb://localhost/quill_demo", {useMongoClient:true});    
  app.set('view engine','ejs'); //EJS WILL BE THE DEFAULT FILE THAT DISPLAYS THE FRONT-END DATA
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({extended:true})); // retrieve text from submitted forms from the EJS files. 
  
  //Add new blog to the database
  app.post('/blog', function(req, res){
      var myPost = {
          title:req.body.title,
          body: req.body.body
      };
      Blog.create(myPost, function(err, newBlog){
          if(err){
              console.log(err);
          } else {
              console.log("New Blog has been added");
              newBlog.save(function(err, savedBlog){
                  if(err){
                      console.log(err);
                  }else {
                      console.log(savedBlog);
                      res.redirect('/blog');
                  }
  
              });
          }
      });
  
  });
  </code></pre>
  
  <p>I check the database after clicking on submit. The "title" field is working fine. But nothing is being added in the "body" field. </p>
  
  <p>So, it looks like I am missing a few pieces. I would appreciate any help. I wouldn't mind if someone simply add the missing parts in my code and I'll learn from their steps later on.</p>
  
  <p>P.S. I don't have a CS degree. Learning on my own. So, keep your responses in layman's terms as much as possible</p>