javascript - 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="/" target="_blank">feedback</a> would be much appreciated.</p>
            </div>    
        </div>
    </div>
</div>

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./" target="_blank">feedback</a> would be much appreciated.</p>
            </div>    
        </div>
    </div>
</div>

Share Improve this question asked Apr 3, 2014 at 13:03 Sebastian 3,64618 gold badges63 silver badges95 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

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
}
?>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Showing a Bootstrap modal after form is submitted - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)