Form post makes req.body.[name of input] undefined

Question

I have looked over my code but cannot seem to find the issue. When I submit the form, I want the form to post to the same page "/admin". To test this, I made the app.post("/admin",...) console.log the respective req.body values from the inputs of the form. However, each console.log for each input of the form produces "undefined". I cannot seem to find the issue.

HTML Form

<form class="col s12" method="post" action="/admin" enctype="multipart/form-data">
                        <div class="row">
                            <div class="input-field col s12">
                                <input name="eventname" id="event_name" type="text" class="validate">
                                <label for="event_name">Event Name</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input name="location" id="location" type="text" class="validate">
                                <label for="location">Location</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12 m6">
                                <input name="date" type="date" id="createdate" class="validate">
                                <label for="createdate">Date</label>
                            </div>
                            <div class="input-field col s6 m3">
                                <input name="starttime" id="createstart" type="text" class="validate timepicker">
                                <label for="createstart">Start Time</label>
                            </div>
                            <div class="input-field col s6 m3">
                                <input name="endtime" id="createend" type="text" class="validate timepicker">
                                <label for="createend">End Time</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input name="eventleader" id="eventleader" type="text" class="validate">
                                <label for="eventleader">Event Leader</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input name="eventleadernumber" id="eventleaderno" type="text" class="validate">
                                <label for="eventleaderno">Event Leader Contact No.</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input name="attendee" id="attendeequota" type="text" class="validate">
                                <label for="attendeequota">Attendee Quota</label>
                            </div>
                        </div>
                        <div class="row">
                            <div class="input-field col s12">
                                <input name="email" id="email" type="email" class="validate">
                                <label for="email">Email</label>
                            </div>
                        </div>
                        <div class="file-field input-field">
                            <div class="btn">
                                <span>File</span>
                                <input type="file">
                            </div>
                            <div class="file-path-wrapper">
                                <input id="uploadposter" class="file-path validate" type="text">
                                <label for="uploadposter">Upload Poster Image File</label>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col s12">
                                <div class="row">
                                    <div class="input-field col s12">
                                        <textarea name="description" id="eventdescr" class="materialize-textarea"></textarea>
                                        <label for="eventdescr">Event Description</label>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button onclick="submitted()" type="submit" value="Submit" class="modal-close waves-effect waves-green btn-small right">Create Event</button>
                        </div>
                    </form>

Express Route(all the console.log prints out "undefined")

app.post('/admin', function(req, res) {
    console.log(req);
    console.log("Event Name:" + req.body.eventname)
    console.log("Location:" + req.body.location)
    console.log("Date:" + req.body.date)
    console.log("StartTime:" + req.body.starttime)
    console.log("EndTime:" + req.body.endtime)
    console.log("EventLeader:" + req.body.eventleader)
    console.log("EventLeaderNumber:" + req.body.eventleadernumber)
    console.log("Attendee:" + req.body.attendee)
    console.log("Email:" + req.body.email)
    console.log("Description:" + req.body.description)
})

Answer 1

You're passing data as Formdata in your Form enctype="multipart/form-data">

Removing this would solve your issue given that you are using body-parser.

OR

If you'd like to go with the multipart route, consider using modules like multer or busboy - use multer its easy.

Code using multer

var express = require('express');
var app = express();
var multer  = require('multer');
var upload = multer();
app.post('/admin', upload.none(), function(req, res) {
    console.log(req);
    console.log("Event Name:" + req.body.eventname)
    console.log("Location:" + req.body.location)
    console.log("Date:" + req.body.date)
    console.log("StartTime:" + req.body.starttime)
    console.log("EndTime:" + req.body.endtime)
    console.log("EventLeader:" + req.body.eventleader)
    console.log("EventLeaderNumber:" + req.body.eventleadernumber)
    console.log("Attendee:" + req.body.attendee)
    console.log("Email:" + req.body.email)
    console.log("Description:" + req.body.description)
});

Answer 2

Might be stating the obvious, but are you using body-parser?