title: Node.js: Using "onsubmit" instead of POST to handle form data
body: <p>I have a simple node app that consists of a form that uses nodemailer to email its data on submit, through POST. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;form accept-charset="UTF-8" action="/" method="POST" class="contact-form"&gt;
      &lt;input type="text" name="name" placeholder="NAME" required&gt;
      &lt;input type="email" name="email" placeholder="EMAIL" required&gt;
      &lt;textarea name="message" placeholder="MESSAGE" required&gt;&lt;/textarea&gt;
      &lt;button name="send" type="submit"&gt;SEND&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>Js (in my index.js)</strong></p>
  
  <pre><code>var transporter = nodemailer.createTransport({
      service: 'gmail',
      auth: {
          user: 'nodemailersampleemail@gmail.com',
          pass: 'foopassword'
      }
  });
  
  app.post('/', function (req, res) {
      response = {
          name: req.body.name,
          email: req.body.email,
          message: req.body.message
      };
      var mailClient = {
          from: 'nodemailersampleemail@gmail.com',
          to: 'nodemailersampleemail@gmail.com',
          subject: `Message from ${response.name}`,
          text: `Name: ${response.name}\nEmail: ${response.email}\nMessage:${response.message}`
      };
      transporter.sendMail(mailClient, function (error, info) {
          if (error) {
              console.log(error);
          } else {
              res.redirect("/success.html");
          }
      });
  })
  </code></pre>
  
  <p>I uploaded the entire (minimized) app to github, if any clarification is needed on how my app works: <a href="https://github.com/agreyfield91/Nodemailer-Firebase-App" rel="nofollow noreferrer">https://github.com/agreyfield91/Nodemailer-Firebase-App</a></p>
  
  <p>I'm trying to deploy this to firebase, but I was informed by support that <em>for some reason</em>, POST is not supported in the firebase SDK. I was told that I would have to use <code>onsubmit</code> in my html linked to a function in order to make my app work correctly, like so:</p>
  
  <pre><code>&lt;form accept-charset="UTF-8" class="contact-form" onsubmit="sendData(); return false;"&gt;
    &lt;input type="text" name="name" placeholder="NAME" id="formName" required&gt;
      &lt;input type="email" name="email" placeholder="EMAIL" id="formEmail" required&gt;
      &lt;textarea name="message" placeholder="MESSAGE" id="formMessage" required&gt;&lt;/textarea&gt;
      &lt;button name="send" type="submit"&gt;SEND&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>The problem I'm having is that I can't seem to link a function properly. I have written a sendData() function, placed in my index.js file, as follows (my transporter variable is outside of the function):</p>
  
  <pre><code>function sendData(){
      response = {
          name: document.getElementById('formName').value,
          email: document.getElementById('formEmail').value,
          message: document.getElementById('formMessage').value
      };
      var mailClient = {
          from: 'nodemailersampleemail@gmail.com',
          to: 'nodemailersampleemail@gmail.com',
          subject: `Message from ${response.name}`,
          text: `Name: ${response.name}\nEmail: ${response.email}\nMessage:${response.message}`
      };
      transporter.sendMail(mailClient, function (error, info) {
          if (error) {
              console.log(error);
          } else {
              res.redirect("/success.html");
          }
      });
  }
  </code></pre>
  
  <p>But when I submit, the page refreshes and the form data is inserted into the url (exactly what happens when there is no function at all). Therefore, either the function isn't getting called, or what I've written inside the function doesn't do anything. What am I doing wrong?</p>