How to submit a custom object to express with or without jade / pug?

Question

js

let routineExerciseArray = []
window.onload = function () {
  $('#workoutName').on('change', function () {
    document.getElementById('workoutNameOut').innerHTML = "<hr/>" + "Name: " + $('#workoutName').val()
  })
  $('#workoutSets').on('change', function () {
    document.getElementById('workoutSetsOut').innerHTML = "Sets: " + $('#workoutSets').val()
  })
  $('#workoutMeta').on('change', function () {
    document.getElementById('workoutMetaOut').innerHTML = "Meta: " + $('#workoutMeta').val()
  })
  $('input[type="checkbox"]').on('change', function() {
    if (this.checked == true) {
      routineExerciseArray.push(this.id)
    } else {
      var indexToRemove = routineExerciseArray.indexOf(this.id)
      routineExerciseArray.splice(indexToRemove,1)
    }
    displayWorkout();
  });
}

pug

          h4.exercises Exercise List
          p Choose exercises and name the workout
          form(method='POST' action='/buildWorkout')
            div.form-group
              input.form-control(type='text' id='workoutName' placeholder= 'Workout Name' name='workoutName')
              input.form-control(type='text' id='workoutSets' placeholder= 'Workout Sets' name='workoutSets')
              input.form-control(type='text' id='workoutMeta' placeholder= 'Workout Meta Info' name='workoutMeta')
              br

              ul
                each val in exerciseArray
                  input(type="checkbox", id=val.exerciseName)
                  |  #{val.exerciseName} | #{val.exerciseDuration}
                  br

              div(id="workoutNameOut")
              div(id="workoutSetsOut")
              div(id="workoutMetaOut")
              div.form-group(id="workoutDisplay" name='workoutExercises')
            button.btn.btn-primary(type='submit') Save Workout

I've dynamically added a checkbox that displays with documents from mongo. When the checkboxes are selected, they build an array in the js file. I'm trying to store this object (name, sets, meta and exercises) into mongo, but don't know how to either 1.)access the request object from the js file or 2.) pass the created array of items to the jade template to submit with the form. or 3.) any other way to pass the created object to express to store in mongo.

Thank you Huston Hedinger

Answer 1 · 2016-11-26T20:13:34Z

November 26, 2016 8:13pm

Hey Stephen,

You just need to use the body-parser package.

var express = require('express');
var bodyParser = require('body-parser');
var path = require('path');
var app = express();

app.use(bodyParser.urlencoded({ extended: true });
app.use(bodyParser.json());

app.get('/', function(req, res) {
   res.sendFile(path.join(__dirname, '/index.html'));
}

// Now you need to submit your form to this url (you can change it).
app.post('/', function(req, res) {
   /* Inside your callback func you will have access to the
   req.body object with all the properties submitted from your html
   in this example (req.body.firstName) but you can change it or add more. */
   console.log(req.body);
});

app.listen(5000, function(err) {
   if (err) throw err;

   console.log('Server is up and running!');
});

Now, in your form you set the action to the url you defined in your application, then when you submit your form, you will have access using req.body and the name set in your form (in this case req.body.firstName).

<form method="POST" action="/">
   <input type="text" name="firstName" id="firstName">
   <input type="submit">
</form>

Welcome to the Treehouse Community

Looking to learn something new?

Stephen Printup

Stephen Printup

How to submit a custom object to express with or without jade / pug?

1 Answer

Jesus Mendoza

Jesus Mendoza

Stephen Printup

Stephen Printup

Jesus Mendoza

Jesus Mendoza

Stephen Printup

Stephen Printup

Jesus Mendoza

Jesus Mendoza