The modal form submits, returns formSuccess, sends the email, returns the signup alert, but the modal does not hide. Any suggestions?

The modal html:

   <div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="signupModal" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title">Provide a few details and we'll be in touch...</h4>
         </div>
         <div class="modal-body">
           <form id="contactForm" role="form">
             <input type="hidden" id="theme" name="theme" value="flatly"/>
             <div class="form-group">
               <label for="name">Name</label>
               <input type="text" class="form-control" id="name" name="name" placeholder="Your name" required>
             </div>
             <div class="form-group">
               <label for="email">Email address</label>
               <input type="email" class="form-control" id="email" name="email" placeholder="Your email address" required>
             </div>
             <div class="form-group">
               <label for="message">Message</label>
               <textarea id="message" class="form-control" rows="5" placeholder="Have a question or ment?" required></textarea>
             </div>
         </div>
         <div class="modal-footer">
           <button id="form-submit" type="submit" class="btn btn-success">Sign Up</button>
         </div>
         </form> <!-- add tag v_07 -->
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div>

The signup alerts html:

  <div class="container form-message">
    <div class="row">
      <div id="signupSuccess" class="alert alert-success" style="display:none">
       <p id="signupSuccessText">Thanks for signing up for preview access, we'll be in touch! In the meantime join us on Twitter, Facebook, and LinkedIn.</p>
      </div>

      <div id="signupError" class="alert alert-info" style="display:none">
      <p id="signupErrorText">Well this is embarrassing. It looks like we're having trouble. While we fix this, we can be reached at [email protected]</p>
      </div>
    </div>
  </div>

And here is the code from js file.

$("#contactForm").submit(function(event){
    event.preventDefault();
    submitForm();
});

function submitForm(){
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();

$.ajax({
    type: "POST",
    url: "php/process.php",
    data: "name=" + name + "&email=" + email + "&message=" + message,
    success : function(text){
        if (text == "success"){
            formSuccess();
        } else {
            formError();
        }
    }
});

};

function formSuccess(){
    $("#signupSuccess").show();
    $("#signupModal").modal('hide'); // add v_07
};

function formError(){
    $("#signupError").show();
    $("#signupModal").modal('hide'); // add v_07
};

The modal form submits, returns formSuccess, sends the email, returns the signup alert, but the modal does not hide. Any suggestions?

The modal html:

   <div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="signupModal" aria-hidden="true">
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
           <h4 class="modal-title">Provide a few details and we'll be in touch...</h4>
         </div>
         <div class="modal-body">
           <form id="contactForm" role="form">
             <input type="hidden" id="theme" name="theme" value="flatly"/>
             <div class="form-group">
               <label for="name">Name</label>
               <input type="text" class="form-control" id="name" name="name" placeholder="Your name" required>
             </div>
             <div class="form-group">
               <label for="email">Email address</label>
               <input type="email" class="form-control" id="email" name="email" placeholder="Your email address" required>
             </div>
             <div class="form-group">
               <label for="message">Message</label>
               <textarea id="message" class="form-control" rows="5" placeholder="Have a question or ment?" required></textarea>
             </div>
         </div>
         <div class="modal-footer">
           <button id="form-submit" type="submit" class="btn btn-success">Sign Up</button>
         </div>
         </form> <!-- add tag v_07 -->
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div>

The signup alerts html:

  <div class="container form-message">
    <div class="row">
      <div id="signupSuccess" class="alert alert-success" style="display:none">
       <p id="signupSuccessText">Thanks for signing up for preview access, we'll be in touch! In the meantime join us on Twitter, Facebook, and LinkedIn.</p>
      </div>

      <div id="signupError" class="alert alert-info" style="display:none">
      <p id="signupErrorText">Well this is embarrassing. It looks like we're having trouble. While we fix this, we can be reached at [email protected]</p>
      </div>
    </div>
  </div>

And here is the code from js file.

$("#contactForm").submit(function(event){
    event.preventDefault();
    submitForm();
});

function submitForm(){
    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();

$.ajax({
    type: "POST",
    url: "php/process.php",
    data: "name=" + name + "&email=" + email + "&message=" + message,
    success : function(text){
        if (text == "success"){
            formSuccess();
        } else {
            formError();
        }
    }
});

};

function formSuccess(){
    $("#signupSuccess").show();
    $("#signupModal").modal('hide'); // add v_07
};

function formError(){
    $("#signupError").show();
    $("#signupModal").modal('hide'); // add v_07
};

• javascript
• jquery
• html
• modal-dialog

• Try $("#signupModal").modal().hide() instead. – Nikhil Nanjappa Commented Dec 8, 2016 at 15:59
• Thanks for the suggestion, but this did not solve it. – edb Commented Dec 8, 2016 at 16:14
• Then this has your answer - stackoverflow./questions/10466129/… – Nikhil Nanjappa Commented Dec 8, 2016 at 16:25
• I appreciate the link – edb Commented Dec 8, 2016 at 16:51

3 Answers 3

You should add data-dismiss="modal" instead on your button because you are anyway going to show another modal.

EDIT : Change type from submit to button

<button id="form-submit" type="button" class="btn btn-success" data-dismiss="modal">Sign Up</button>

And try this,

$("#form-submit").click(function(event){

    var name = $("#name").val();
    var email = $("#email").val();
    var message = $("#message").val();

$.ajax({
    type: "POST",
    url: "php/process.php",
    data: "name=" + name + "&email=" + email + "&message=" + message,
    success : function(text){
        if (text == "success"){
            formSuccess();
        } else {
            formError();
        }
    }
});

};

function formSuccess(){
    $("#signupSuccess").show();
    $("#signupModal").modal('hide'); // add v_07
};

function formError(){
    $("#signupError").show();
    $("#signupModal").modal('hide'); // add v_07
};

This solution works for me:

setTimeout(function(){
    $('#close-modal').click();
    $('#close-modal').click();
},200);

Instead of..

$('#myModal').modal('hide')

This worked...

$('#myModal').hide();
$('.modal-backdrop').hide();

Source: https://stackoverflow./a/29560331/7069248

Could be related to version of Bootstrap