使用Bootstrap Styling后，提交POST表单不再有效

Question

上下文：

我正在使用NodeJS、Express、MailTransport&启动我的网站，创建一个联系表格发送我的个人电子邮件。

我已经创建了一个路由/sayhi来处理mailtransport sendMail方法，并重定向回

然后我使用一个经典的html格式：

<form action="/sayhi" method="post" name="sendMail" id="sendMail">

使用3个输入"from"、"mail"one_answers"text"，可以很好地使用经典的html表单&类如

<form action="/sayhi" method="post" name="sendMail" id="sendMail">
<input type="text" name="from" placeholder="Who?"/>
<input type="email" name="mail" placeholder="Mail?"/>
<input type="text" name="text" placeholder="Why?"/>
<input type="submit" value="Send"/>
</form>

但当我试图用bootstrap让事情变得更美好时，它不再调用/sayhi

<form action="/sayhi" method="post" name="sendMail" id="sendMail">
<div class="form-group">
<label for="InputName">Name</label>
<input type="text" name="from" id="InputName" aria-describedby="emailHelp" placeholder="John Appleseed" form="sendMail" class="form-control"/>
<small id="nameHelp" class="form-text text-muted">How do you define yourself ?</small>
</div>
<div class="form-group">
<label for="InputEmail">Email address</label>
<input type="email" name="mail" id="InputEmail" aria-describedby="emailHelp" placeholder="[e-mail]" form="sendMail" class="form-control"/>
<small id="emailHelp" class="form-text text-muted">To contact you back !</small>
</div>
<div class="form-group">
<label for="Textarea">Something to tell me ?</label>
<textarea name="text" id="Textarea" rows="3" placeholder="blah" form="sendMail" class="form-control"></textarea>
<small id="textHelp" class="form-text text-muted">It can be anything, really!</small>
</div>
<button value="Send" id="submit" type="submit" class="btn btn-primary">Submit</button>
</form>

编辑#1:

为了增加精度，我使用Pug作为模板引擎，我的表单在一个特殊的div中显示为覆盖

div.overlay
div#email_form
form(action="/sayhi" method="post" name="sendMail" id="sendMail")
div(class="form-group")
label.lettersB(for="InputName") Name
input(type="text" name="from" class="form-control" id="InputName" aria-describedby="emailHelp" placeholder="John Appleseed" form="sendMail")
small(id="nameHelp" class="form-text text-muted") How do you define yourself ?
div(class="form-group")
label.lettersB(for="InputEmail") Email address
input(type="email" name="mail" class="form-control" id="InputEmail" aria-describedby="emailHelp" placeholder="[e-mail]" form="sendMail")
small(id="emailHelp" class="form-text text-muted") To contact you back !
div(class="form-group")
label.lettersB(for="Textarea") Something to tell me ?
textarea(class="form-control" name="text" id="Textarea" rows="3" placeholder="Don't let The Blank Page Syndrome Hit!" form="sendMail")
small(id="textHelp" class="form-text text-muted") It can be anything, really!
button(value="Send" class="btn btn-primary" id="submit" type="submit") Submit

EDIT#2问题是在我的覆盖类中，当我把表单从它上取下时，它工作得很好，但我不确定是什么导致了这种行为

CSS：

.overlay {
display: none;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-color:rgba(0, 0, 0, 0.85);
background: url(data:;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAABl0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjUuNUmK/OAAAAATSURBVBhXY2RgYNgHxGAAYuwDAA78AjwwRoQYAAAAAElFTkSuQmCC) repeat scroll transparent9;
z-index:9999;
color: white;
}
.overlay:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}

EDIT#3问题似乎是我的表单嵌套在另一个div中，事件没有CSS，只是它是由按钮触发的，但仍然不知道为什么它的行为像这个

Answer 1

您在评论中提供的额外信息显示您正在执行以下操作：

$(".overlay").click(function(){ 
$(this).fadeOut("fast"); 
}).children().click(function(e) { 
return false;
});

因此，任何点击.overlay中的任何元素(包括你的按钮)都不会有任何作用，因为你正在拦截它并返回false。