Nodejs very simple Form with Routes failing to pos

问题:

I have a super simple form within a NodeJS/ExpressJS app which fails to post.

The app.js code (I call it server.js) looks like this.

var express = require('express');
var fs = require('fs');
var path = require('path');
var urlEncoded = require('urlencoded-request-parser');

var bodyParser = require('body-parser');

var server = express();
var port = process.env.port || 1337;

server.use(urlEncoded());
server.use(bodyParser.urlencoded({extended: true}));

var routePath="./routes/"; 
fs.readdirSync(routePath).forEach(function(file) {
    var route=routePath+file;
    require(route)(server);
});

server.set('view engine', 'ejs');
server.set('views', __dirname);
server.listen(port);

My post form (post.ejs)

<form method="post" action="post-put"> 
    <fieldset>

        <!-- Form Name -->
        <legend>Which Test Type</legend>

        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-2 control-label" for="TestType">Please test our</label>
            <div class="col-md-4"> 
                <label class="radio-inline" for="TestType-0">
                    <input type="radio" name="SoftwareTestType" id="TestType-0" value="SoftwareTest" checked="checked">
                    Software
                </label> 
                <label class="radio-inline" for="TestType-1">
                    <input type="radio" name="HardwareTestType" id="TestType-1" value="HardwareTest">
                    Hardware
                </label>
            </div>
        </div>
    </fieldset>
    <input type='submit' class="btn btn-default" id='submit' value='Submit your Test'/>
</form>

The results are shown in this page (post-results.ejs)

<%= Test %>

I have two routes (post-get.js)

module.exports = function(server){

    server.get('/post', function(req,res){
        res.render('./views/test/post.ejs',{            
        });
    });
}

and (post-puts.js)

module.exports = function(server){
    server.post('post-put', function(req,res){
        console.log("In Submission POST")
        var TestType = "";
        if(req.body.HardwareTestType == true) 
            TestType = "Hardware";
        else
            TestType = "Software";

        res.render('./views/test/post-results.ejs',{
            Test: TestType
        });
    });
}

When I click on submit button, developer tools shows this:

This is driving me insane. Does anyone know how to get this to post the results to the post-results.ejs file. The layout of the filesystem for the application looks like this:

UPDATE: Both the form and the router have same paths "post-puts". In the post-puts route there is a console.log() ... but it is NOT called. I think it could still be the application type as shown in the image two up (Developer Tools) When a "thing" has only 1 function, saying it does not work is specific - if I could be more specific I would know what the problem was and fix it.

回答1:

This HTML URL path <form method="post" action="/post-put"> doesn't match this path in your code server.post('/test/post-put'. Make them match and it will work.

回答2:

remove slash from post-put

<form method="post" action="post-put"> 

回答3:

SOLVED

The resolution to the above problem was the following.

1) I changed the route back to "/post-put" in the form Action and in the Route file. 2) I added enctype="multipart/form-data" to the form.

So the form now looks like

<form method="post" action="/post-put" enctype="multipart/form-data"> 
    <fieldset>

        <!-- Form Name -->
        <legend>Which Test Type</legend>

        <!-- Multiple Radios (inline) -->
        <div class="form-group">
            <label class="col-md-2 control-label" for="TestType">Please test our</label>
            <div class="col-md-4"> 
                <label class="radio-inline" for="TestType-0">
                    <input type="radio" name="TestType" id="TestType-0" value="SoftwareTest" checked="checked">
                    Software
                </label> 
                <label class="radio-inline" for="TestType-1">
                    <input type="radio" name="TestType" id="TestType-1" value="HardwareTest">
                    Hardware
                </label>
            </div>
        </div>
    </fieldset>
    <input type='submit' class="btn btn-default" id='submit' value='Submit your Test'/>
</form>

ALTERNATIVE SOLUTION Keep the form enctype as enctype="application/x-www-form-urlencoded" In App.js (my server.js) Remove app.use(bodyparser.urlencoded()); Change app.use(bodyParser.urlencoded({extended: true})); to server.use(bodyParser.urlencoded());

Now the POST method of the form works! Thanks to those who tried to help.