用php在不同的页面上显示div

Question

I want my contact form to change to 'mail successful' when a mail has been send. So the div from the contactform has to be display:none and the div from 'mail successful' has to be display:block right?

Somehow I don't succeed in this.

Here is a print screen and how I want it:

This is the php code I use (only the end cause that's the only needed part):

$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

if ($success) {
    ?>
    <style type="text/css">
        #mail_succeed {
            display: block;
        }
        #mail_failed {
            display: none;
        }
        #contat-area{
            display: none;
        }
    </style>
    <?php
    header('Location: index.php#contact');
    exit();
} else {
    ?>
    <style type="text/css">
        #mail_failed {
            display: block;
        }
        #mail_succeed {
            display: none;
        }
        #contact-area{
            display: none;
        }
    </style>
    <?php
    header('Location: index.php#contact');
    exit();
}
?>

This is the html code I have now (its quit a bit of code, I also added the modal because maybe its important):

<div id="myModal" class="modal">
         <div class="modal-content">
                <div class="modal-header">
                    <span class="close">x</span>
                    <h4>Contact Form</h4>
                </div>
                <div class="modal-body">
                    <div id="contact-area">
                        <form method="post" action="contactengine.php">
                            <div class="nametel">
                                <div class="name">
                                    <label for="Name">Name:</label>
                                    <input type="text" name="Name" id="Name">
                                </div>
                                <div class="tel">
                                    <label for="Tel">Tel:</label>
                                    <input type="text" name="Tel" id="Tel">
                                </div>
                            </div>

                            <label for="Email">Email:</label>
                            <input type="text" name="Email" id="Email">

                            <label for="Message">Message:</label><br>
                            <textarea name="Message" rows="20" cols="20" id="Message"></textarea>
                            <input type="submit" name="submit" value="Send" class="submit-button" onclick="showDiv()">
                        </form>
                        <div style="clear: both;"></div>
                    </div>
                    <div id="mail_succeed" style="display: none">
                        <h3>Mail succesfull send, go back to </h3>
                        <span class="close"><a href="index.php#contact">contact page</a></span>
                    </div>
                    <div id="mail_failed" style="display: none">
                        <h3>Mail not send, go back to </h3>
                        <span class="close"><a href="index.php#contact">contact page</a></span>
                    </div>
                </div>
                <div class="modal-footer"></div>
            </div>
        </div>

I possibly send to much code but i'm not sure what to leave away since it can be important.

Answer 1

If you don't want to use jQuery/Ajax then you can do the following :

In contactengine.php, change your header redirects to:

header('Location: index.php?resp=1#contact');

and

header('Location: index.php?resp=0#contact');

respectively for success and failure.

Then on index.php add this little php code in your head section (or wherever you define styles):

if(isset($_GET['resp']) && $_GET['resp']==1){
     echo '
       <script type="text/javascript">$("#ButtonThatOpensModal").click();</script>
       <style type="text/css">
        #mail_succeed {
            display: block;
        }
        #mail_failed {
            display: none;
        }
        #contat-area{
            display: none;
        }
    </style>';
}
elseif(isset($_GET['resp']) && $_GET['resp']==0){
     echo '<style type="text/css">
        #mail_failed {
            display: block;
        }
        #mail_succeed {
            display: none;
        }
        #contact-area{
            display: none;
        }
    </style>';
}