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! While you're at it, check out some resources Treehouse students have shared here.

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

PHP

Posted by Sankurushetty Pavan Kumar
Sankurushetty Pavan Kumar
Courses Plus Student 149 Points

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

Sergio Alen
Sergio Alen
26,726 Points

can you post your code?

Sankurushetty Pavan Kumar
Sankurushetty Pavan Kumar
Courses Plus Student 149 Points

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

Sergio Alen
Sergio Alen
26,726 Points
Sergio Alen
Sergio Alen
26,726 Points

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

Sankurushetty Pavan Kumar
Sankurushetty Pavan Kumar
Courses Plus Student 149 Points

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

Sergio Alen
Sergio Alen
26,726 Points

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