I can't figure out why popup disappears & reappears when there's an error or when it sends

I wrote a popup for signing up with a website. It works fine except for one aspect - when the user fails to provide all the necessary info, the popup will disappear but then reappear with the error message. Likewise, if the user provides all the info and clicks send, the message will send successfully but the popup disappears and then reappears with the success message. When the user clicks close, the popup closes and stays gone like it should.

I've been going over the code and I just can't find out why it disappears and then reappears. I want it to stay there and display either the error message or success message and then to only disappear when the user clicks "close." Here is the following code - HTML, CSS, JS and PHP

Here's the website so you can see it in action.

I appreciate any and all advice! Thanks

HTML

<?php include $_SERVER['DOCUMENT_ROOT']. '/php/signup-popup.php'; ?>
        <div id="pop-wrapper">
    <!-- Popup Div Starts Here -->
    <div id="popupContact">
    <!-- Contact Us Form -->
                <form action="#" id="form" method="post" name="form">
        <h2 id="popup-h2">Join the Civil War Digital Digest</h2>
        <hr>
        <input id="name" name="name" placeholder="Name" type="text" value="<?php echo htmlspecialchars($_POST['name']);?>">
        <input id="email" name="email" placeholder="Email" type="text" value="<?php echo htmlspecialchars($_POST['email']);?>">
        <textarea id="msg" name="message" placeholder="Message"><?php echo htmlspecialchars($_POST['message']);?></textarea>
                    <?php echo "<p id='error-message' class='text-danger'>$errError</p>";?>
                    <?php echo $result; ?>
                    <button id="submit" name="submit" type="submit" value="Send">Send</button>
        <br>
        <button onclick="hide()" id="close">Close</button>
                </form>
    </div>
    <!-- Popup Div Ends Here -->
        </div>

Javascript

function show() {
    if(sessionStorage.getItem("close") == null){
        document.getElementById('pop-wrapper').style.display = "block";
     }
     else {
        document.getElementById('pop-wrapper').style.display = "none";
     }          
 }

    function hide(){
        sessionStorage.setItem("close", 1);
        document.getElementById('pop-wrapper').style.display = "none";
    }


    window.onload=function(){
        setTimeout(function(){
            show();
        }, 500);
    }

PHP

<?php
    if (isset($_POST["submit"])) {
        $name = $_POST['name'];
        $email = $_POST['email'];
        $message = $_POST['message'];
        $from = 'Civil War Digital Digest Popup Form'; 
        $to = 'kennethpavia@gmail.com'; 
        $subject = 'Message from CWDD Popup Form ';

        $body ="From:\n Name: $name\n E-Mail: $email\n Message:\n $message";

        // Check for errors
        if (!$_POST['name'] || !$_POST['email'] || !$_POST['message']) {
            $errError = 'Some information is missing. Unable to send.';
        }

        // If there are no errors, send the email
                if (!$errError) {
                    if (mail ($to, $subject, $body, $from)) {
                        $result='<div class="alert alert-success">Message sent. Thank you for contacting the CWDD.</div>';
                    } else {
                        $result='<div class="alert alert-danger">Sorry, there was an error sending your message. Please try again.</div>';
                    }
                }

    }
?>

CSS

/* popup header color #394650 */
        /*font IM Fell DW Pica */

        /*----------------------------------------------
        CSS settings for HTML div Exact Center
        ------------------------------------------------*/
        #pop-wrapper {
            width:100%;
            height:100%;
            opacity:.99;
            top:0;
            left:0;
            display:none;
            position:fixed;
            background-color:#313131;
            overflow:auto;
        }

            div #popupContact {
                position:absolute;
                left:50%;
                top:17%;
                margin-left:-202px;
                font-family:'IM Fell DW Pica', serif;
            }

            form {
                                width: 450px;
                                height: 680px;
                /*max-width:300px;
                min-width:250px;*/
                padding:10px 50px;
                border:2px solid gray;
                border-radius:10px;
                font-family:raleway;
                background-color:#fff;
            }

            #error-message {
                /*margin-top:30px;*/
                                font-size: 18px !important;
            }

            #popup-h2 {
                background-color:#394650;
                padding:20px 35px;
                margin:-10px -50px;
                text-align:center;
                border-radius:10px 10px 0 0;
                color: #fff;
            }
            hr {
                margin:10px -50px;
                border:0;
                border-top:1px solid #ccc;
            }
            input[type=text] {
                width:82%;
                padding:10px;
                margin-top:30px;
                border:1px solid #ccc;
                padding-left:40px;
                font-size:16px;
                font-family: raleway;
            }
            #name {
                background-repeat:no-repeat;
                background-position:5px 7px;
            }
            #email {
                background-repeat:no-repeat;
                background-position:5px 7px;
            }
            textarea {
                background-repeat:no-repeat;
                background-position:5px 7px;
                width:82%;
                height:95px;
                padding:10px;
                resize:none;
                margin-top:30px;
                border:1px solid #ccc;
                padding-left:40px;
                font-size:16px;
                font-family:raleway;
                margin-bottom:30px;
            }
            #submit, #close {
                text-decoration:none;
                width:100%;
                text-align:center;
                display:block;
                background-color:#394650;
                color:#fff;
                border:1px solid #fff;
                padding:10px 0;
                font-size:20px;
                cursor:pointer;
                border-radius:5px;
            }
            span {
                color:red;
                font-weight:700;
            }
            button {
                width:10%;
                height:45px;
                border-radius:3px;
                background-color:#cd853f;
                color:#fff;
                font-family:'IM Fell DW Pica', serif;
                font-size:18px;
                cursor:pointer;
            }

1 answer

  • answered 2017-06-17 19:37 Ecniv Noraa Worrom

    your form's submit request basically reloads the page therefor firing up the window.onload function again