Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

PHP

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"])){

    if(!$_POST["reg-username"]){
        $errmsg = "</br> Please enter password";
    }

     if(!$_POST["reg-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";
    }

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

    }else{

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

    if(mysqli_query($con,$insert))
    {
        $result='<div class="alert alert-success"><strong>You have been successfully registered. Close this box and login using the login form</strong></div>';
    }
    else{
        $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) {
    event.preventDefault();
    $.ajax({
    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>');
    }
    });
});