Form does not postback when submit is clicked, jade, node.js - node.js

Question

I have a form created with jade, it does not postback when submit button is clicked.
I have looked at many similar problems, I tried the solutions, which include ensuring that the input fields all have a 'name', I have made sure all the input field have a name but the form still does not post back, here it is
//views/users/new.jade
h1 New User
form(action="/users", method="POST")
p
label(for="username") Username
input#username(name="username")
p
label(for="name") Name
input#name(name="name")
p
label(for="bio") Bio
textarea#bio(name="bio")
p
input(type="submit",value="Create")
The post handler is this
//routes/users
module.exports=function(app){
app.post('/users',function(req,res){
if(users[req.body.username]){ //Check if user exists
res.send('Confllict, 409')
}else
{
//add to users list
users[req.body.username]=req.body;
res.redirect('/users');
}
});
};

Answer 1

Jade uses indention to show what content goes between the tags
p
this is inside the p tags
also there is shorthand
p this is also in the tag
in your original code you are telling Jade that there is a p tag then the next line is outside the p tags.

Answer 2

This is an easy problem to run into if you aren't careful with indentation using Pug (previously Jade). I realize this is an old question, and it has several hits so perhaps this answer will shed some light for new Pug users.
The problem with the OP's code is the Form does not know how to post without a button, and the Submit button doesn't know where to post to without being associated with the Form. Why? Indentation.
Jade and Pug tips for success:
They produce html, so it helps to think in html layouts when developing the template (would you put text outside of your p element? Of course not).
Pug uses indentation to form layout and element hierarchy.
Html Forms must enclose the elements that are to be associated or bound to it.
A Submit Button does nothing unless you define an event handler.
Forms define a destination in their definition, which a button type element can leverage.
In the code listed by the OP, every Pug element is left-aligned. This puts all elements at the same level, so there is no hierarchy or nesting. Since there is no other event handler explicitly defined for the Submit button, nothing happens when it is clicked, despite the form having an action and a valid method.
To fix this, the Input (submit button) can be nested inside the Form.
Reworking the code to include indented hierarchy will enable the POST to function as expected (removed all the other elements for readability):
h1 New User
form(action="/users", method="POST")
label(for="username") Username
input#username(name="username")
label(for="name") Name
input#name(name="name")
label(for="bio") Bio
textarea#bio(name="bio")
input(type="submit",value="Create")
The resulting form won't be a pretty, but it will function:
The Form has an action and method.
All dependent elements are indented.
The input has a type of Submit and is child to the form.
Of course, a server must have a binding at the address to receive the data in order to do anything with it.