使用Bootstrap样式后,提交POST表单不再有效

时间:2017-01-06 21:27:25

标签: javascript html node.js forms twitter-bootstrap

上下文:

我使用的是NodeJS,Express,MailTransport&我的网站引导程序,创建一个联系表单给我发个人电子邮件。

我创建了一个路由/ sayhi来处理mailtransport sendMail方法并重定向回到/之后

我使用经典的html表单:

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

有3个输入&#34;来自&#34;,&#34; mail&#34;和&#34; text&#34;这与经典的html表格和&amp;这样的课程

<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>

但是当我尝试用引导程序稍微提高一点时它不再调用/ 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="you@yourdomain.com" 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="you@yourdomain.com" 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

编辑#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 transparent\9;
    z-index:9999;
    color: white;
}
.overlay:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

编辑#3问题似乎是我的表单嵌套在另一个div中,没有CSS的事件,只是它被一个按钮触发,但仍然不知道它为什么表现得像这样< / p>

1 个答案:

答案 0 :(得分:1)

您在评论中提供的额外信息显示您正在执行:

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

因此,点击.overlay内的任何元素 - 包括按钮上的任何元素 - 都将无效,因为您正在拦截它并返回false。