Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community!

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial


Bootstrap modal is hiding when clicked a button in it.

Hi, I have a registration form set up in modal and fields are validated using PHP, but when I click on the register button the modal is disappearing and cannot see modal and the error messages until i open it. If everything is correct, the registration is getting successful and getting stored in database but the modal goes away automatically before getting any success messages, i cannot see messages unless I open the modal again.

Please help. Thanks

can you post your code?

This is my php code

if(!$con) { die("Connection to server failed"); }else{ if(isset($_POST["login"])){

        $errmsg = "</br> Please enter password";

        $errmsg = "</br> Please enter username";

 if(strlen($password <= 5) && (strlen($password >=12)))
        $errmsg = "</br>Passwords must be between 5 and 12 characters in length";

 if($password !== $confirm){
        $errmsg = "</br> Password and confirm password should match";

        $result='<div class="alert alert-danger"><strong>There were error(s) in your form:</strong>'.$errmsg.'</div>';


    $insert = "INSERT INTO `member`(`firstname`, `password`, `confirm`) VALUES ('$firstname','$password','$confirm')";

        $result='<div class="alert alert-success"><strong>You have been successfully registered. Close this box and login using the login form</strong></div>';
        $result='<div class="alert alert-danger"><strong>Problem in registration</strong></div>';

This is my modal code:

<div class="modal fade" id="login-modal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button class="close" data-dismiss="modal">X</button> <h4 class="modal-title">Member register </h4> <?php if(!empty($result)){ echo $result; } ?> </div> <!--<form method="post" action="home.php" id="register-form"> <form action="home.php" method="post" id="register-form"> <div class="modal-body"> <div class="form-group"> <label for="reg-firstname"> Firstname: </label> <input type="text" class="form-control" name="reg-firstname" id="reg-username"/> </div> <div class="form-group"> <label for="reg-password"> Password: </label> <input type="password" class="form-control" name="reg-password" id="reg-password"/> </div> <div class="form-group"> <label for="reg-cpassword"> Confirm Password: </label> <input type="password" class="form-control" name="reg-cpassword" id="reg-cpassword"/> </div> <div class="modal-footer"> <div class="form-group"> <button class="btn btn-success" name="login" id="butt">Register</button> <button class="btn btn-danger" data-dismiss="modal" name="close">Close</button> </div> </div> </form> </div> </div> </div>

1 Answer

Is the page refreshing when the from is submitted? does bootstrap closes the modal on form submit maybe?

Yeah exactly, when i fill the form and click on a button, it doesn't stay on. To view the messages i need to open the modal again. I tried e.preventDefault(), it was working but couldn't figure out how to link that with php form validation..

Then you'll have to use AJAX, you're in the right track with the e.preventDefault(); so you'll have to do something like this:

$('#register-form').submit(function(event) {
    type: "POST",
    url: $('#register-form').attr('action'),
    data: dataString,
    success: function() {
        $('.modal-header').html('<div class="alert alert-success"><strong>You have been successfully registered. Close this box and login using the login form</strong></div>');