Submit POST form no longer work after using Bootstrap Styling

Question

context:

I'm using NodeJS, Express, MailTransport & Bootstrap for my website, creating a contact form to send me personal email.

i've created a route /sayhi to handle the mailtransport sendMail method and redirect back to / after it

i use then a classic html form :

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

with 3 input "from", "mail", and "text" that was working fine with classic html form & class like so

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

but when i tryied to sweet things up a little with bootstrap it no longer invoke /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>

EDIT#1 :

to add precision, i use Pug as my template engine and my form is in a special div to display it as an overlay

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

EDIT#2 Problem is in my overlay class, when i take my form off it, it works fine, but i'm not sure what is causing this behavior

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

EDIT#3 The problem seems the fact that my form is nested in another div, event with no CSS to it, just the fact that it's triggered by a button but still dont know why it behave like this

In what way? Note you have a change in submit value from `Send` to `AMA`, check for that. — Adam Azad, Jan 06 '17 at 21:30
Are you positive the form doesn't get sent? Did you debug this on the node end? As in, `console.log("POST for /sayhi");` right at the start of the handler? The form submits fine for me: https://jsfiddle.net/1cmwchxf/ — , Jan 06 '17 at 21:33
i've edit my post, problem is in the overlay div where my form is (i toggle it with a button) — Mehdi S., Jan 07 '17 at 00:10
`display: none;`? How can you see the form? And as @Ibu says, what actually happens when you click submit? — Don't Panic, Jan 07 '17 at 00:15
don't forget that my overlay is not shown when the page loads up (display: none;), it can be poped out by a button, and inside of it you have the mail form — Mehdi S., Jan 07 '17 at 00:26
Can't forget something we didn't know to start with ... what does the *real* overlay CSS look like when the form is visible? Why do you think the overlay CSS is the problem? What actually happens when you try to submit the form? The Bootstrap HTML you have posted works fine, tested locally. — Don't Panic, Jan 07 '17 at 00:37
i've editted my post to add the CSS of my overlay class and i'm sure the issue is the fact that my form is nested into my overlay div because when i take it off it works fine. sorry for the mis-understanding — Mehdi S., Jan 07 '17 at 00:49
The CSS you have posted would make the form invisible, so it can't be the real CSS when you are trying to post the form. Is `display` the only style which changes? What actually happens when you try to submit the form? My guess is some CSS clash with something else on the page - eg z-index issue where the button is under something else and not receiving clicks. — Don't Panic, Jan 07 '17 at 01:23
@Don'tPanic ok step by step: first my overlay div with the form is hidden (display:none;), for the button on my page to bring up the form i use `$("#showMail").click(function(event) { event.preventDefault(); $("div.overlay").fadeToggle("fast"); });` and to make sure overlay is hidden again when user clic outside of it i use : `$(".overlay").click(function(){ $(this).fadeOut("fast"); }).children().click(function(e) { return false; });` — Mehdi S., Jan 08 '17 at 16:48

score 1 · Accepted Answer · answered Jan 08 '17 at 22:40

1

The extra info you provided in a comment shows you are doing:

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

So any click on any element inside .overlay - including on your button - on will do nothing, as you are intercepting it and returning false.

answered Jan 08 '17 at 22:40

Don't Panic

13,965
5
32
51

thanks, i was comming at this conclusion, i'm now trying to solve the issue : i want to hide the `.overlay` div if it's clicked but **not** if children of `.overlay` are, **except** for my `#submit` button – Mehdi S. Jan 08 '17 at 22:48
1

[Here's an example of how to do that](http://stackoverflow.com/questions/152975/how-do-i-detect-a-click-outside-an-element). Please [upvote and accept my answer](http://stackoverflow.com/help/someone-answers), if it helps. – Don't Panic Jan 08 '17 at 22:51
i tried to chain the .not() selector with children() but don't understand why it don't work – Mehdi S. Jan 08 '17 at 23:00
it works with `$(".overlay").click(function(){ $(this).fadeOut("fast"); }); $("#email_form").click(function(event) { event.stopPropagation(); });` solved, but still have no clue on why the .not() haven't worked – Mehdi S. Jan 08 '17 at 23:09
1

You could try the answer I linked to above, or, as you are using Bootstrap you could use [Bootstrap modals](http://getbootstrap.com/javascript/#modals), which handle all this for you. – Don't Panic Jan 08 '17 at 23:12
thanks for the discovery of modal in Bootstrap, problem solved with it – Mehdi S. Jan 09 '17 at 00:06

Submit POST form no longer work after using Bootstrap Styling

1 Answers1