Koa 2.0 form submit can not work normally

Question

When I run it, it shows form correctly, but when I click submit button, nothing happened, the post seems do not work! I run with "nodemon index.js", and the chrome shows forms correctly,but when I click the submit button, the post method handleform do not shows.

index.js

const Koa = require('koa');

const Router = require('koa-router'); //Use router instead of route

const router = new Router();

const bodyParser = require('koa-body');

const app = new Koa();

const Pug = require('koa-pug');

const pug = new Pug({

    viewPath: './views',

    basedir: './views',

    app: app

});

app.use(bodyParser({
        formidable: {uploadDir: './uploads'},
        multipart: true,
        urlencode: true
}));

router.get('/', renderForm);

router.post('/', handleForm);

async function renderForm(ctx,next) {

    ctx.render('form');

    await next();
}

async function handleForm(ctx) {

    console.log("Submitted")

    console.log(ctx.request.body);

    console.lgo(ctx.req.body);

    ctx.body = ctx.request.body;
}

app.use(router.routes()); //use router

app.listen(3000);

form.pug

html

head

title Form Tester

body

form(action="/", method="post")

div

label(for="say") Say:

input(type="text" name="say" value="Hi")

br

div

label(for="to") To:

input(type="text" name="to" value="Koa form")

br

input(type="submit" value="Send my greetings") 

Answer 1

I tested your code. Besides of the console.lgoproblem, that was already mentioned, your pug-code was malformed. When inspective the page-sourcecode in the browser I had <form action="/" method="post"></form> and all input fields behind then closing form tag. So this is my working code:

index.js*

const Koa = require('koa');
const Router = require('koa-router'); //Use router instead of route
const router = new Router();
const bodyParser = require('koa-body');

const app = new Koa();
const Pug = require('koa-pug');
const pug = new Pug({
    viewPath: './views',
    basedir: './views',
    app: app
});

app.use(bodyParser({
        formidable: {uploadDir: './uploads'},
        multipart: true,
        urlencode: true
}));

router.get('/', renderForm);
router.post('/', handleForm);
async function renderForm(ctx,next) {
    ctx.render('form');
    await next();
}

async function handleForm(ctx) {
    console.log("Submitted")
    console.log(ctx.request.body);
    ctx.body = ctx.request.body;
}

app.use(router.routes()); //use router
app.listen(3000);

form.pug

html
  head
    title Form Tester
  body
    form(action="/", method="post")
      div
        label(for="say") Say:
        input(type="text" name="say" value="Hi")
      br
      div
        label(for="to") To:
        input(type="text" name="to" value="Koa form")
      br
      input(type="submit" value="Send my greetings")