title: How to pass form data on submit listener so that axios can post form data?
body: <p>I have a form like the following. </p>
  
  <pre><code>&lt;form class="comment-post" method="POST" action="/api/v1/comment/&lt;%= post._id %&gt;" enctype="multipart/form-data&gt;
     &lt;div class="comment-section"&gt;
           &lt;textarea rows="4" name="comment"&gt;&lt;/textarea&gt;
           &lt;button type="submit" class="button"&gt;Submit&lt;/button&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>There can be more than one form with class 'comment -post'. I would like to add event listener on form submit so that the request is ajax like, as in the following. </p>
  
  <pre><code>const commentPostForms = document.querySelectorAll('.comment-post')
  
  commentPostForms.forEach(form =&gt; {
      form.addEventListener('submit', function(e) {
          e.preventDefault()
  
          axios
              .post(this.action)
              .then(res=&gt;{
                  console.log(res)
              })
              .catch(console.error);
  
      })
  })
  </code></pre>
  
  <p>My question is how do I submit the form data along with my axios request. Currently, no form data is being sent. </p>
  
  <p>I tried the following (edited),</p>
  
  <pre><code>function(e) {
      e.preventDefault()
      const formData = new FormData(e.target)
  
       axios
          .post(e.target.action, formData)
           .then(res=&gt;{
                console.log(res)
            })
           .catch(console.error);
  
   })
  </code></pre>
  
  <p>On the node js express server side I am doing console of the received object to see if the data has been actually passed.</p>
  
  <pre><code>router.post('/comment/:post_id/', comment );
  
  const comment = (req, res) =&gt; {
      console.log(req.body)
      res.json(req.body);
  }
  </code></pre>
  
  <p>I do not see 'comment' on req.body console.log</p>