CODEWITHSUNDEEP
javascriptphpjquerytwitter-bootstrap
Sebastian
Sebastian

Reputation: 3626

Showing a Bootstrap modal after form is submitted

I want to display a "thank you" modal when the page is reloaded after successful form submission.

Here's my PHP at the bottom of the <head>:

<?php
    if (isset($_POST["email"]) && !empty($_POST["email"]))
    {
        $response_text = "Thanks, we'll be in touch soon!";
        include('connect.php');
        mysqli_query($con, "INSERT INTO sh_betalist (email, ip_address, signup_loc) VALUES ('" . $_POST['email'] . "', '" . $_SERVER['REMOTE_ADDR'] . "', '" . "homepage')");
        ?>
        <script type="text/javascript"> $('#thankyouModal').modal('show'); </script>
        <?php
    }
?>

That all works fine except for showing the modal, which doesn't happen. I don't get any errors in the JS console.

Here's my modal at the bottom of the <body>:

<div class="modal fade" id="thankyouModal" tabindex="-1" role="dialog" aria-labelledby="thankyouLabel" 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" id="myModalLabel">Thank you for pre-registering!</h4>
            </div>
            <div class="modal-body">
                <p>You'll be the first to know when Shopaholic launches.</p>                     
                <p>In the meantime, any <a href="http://shopaholic.uservoice.com/" target="_blank">feedback</a> would be much appreciated.</p>
            </div>    
        </div>
    </div>
</div>

Upvotes: 1

Views: 9743

Answers (1)

Dan Johnson
Dan Johnson

Reputation: 1482

Try wrapping a $(document).ready around the javascript.

<?php
    if (isset($_POST["email"]) && !empty($_POST["email"]))
    {
        $response_text = "Thanks, we'll be in touch soon!";
        include('connect.php');
        mysqli_query($con, "INSERT INTO sh_betalist 
        (email, ip_address, signup_loc) VALUES ('" . $_POST['email'] . "', '" . 
        $_SERVER['REMOTE_ADDR'] . "', '" . "homepage')");
 ?>
       <script type="text/javascript"> 
       $(document).ready(function(){
           $('#thankyouModal').modal('show');
       });
      </script>
    <?php
}
?>

Upvotes: 3

Related Questions