Jquery Show Hidden Div inside php echo

Question

I am struggling here.. Need some help!! :)

I have a PHP and need to run a jquery .show inside an echo when a submit button is pressed.. Any help will be greatly appreciated..

The PHP Code >

<?php
                        $name = $_POST['name'];
                        $email = $_POST['email'];
                        $title = $_POST['title'];
                        $content = $_POST['content'];
                        $from = 'From: Comeone Form'; 
                        $to = 'info@someemail.com'; 
                        $subject = 'Contact Form';
                        $human = $_POST['human'];

                        $body = "From: $name\n E-Mail: $email\n Subject: $title\n Message:\n $content";

                    if ($_POST['submit'] && $human == '4') {                 
                    if (mail ($to, $subject, $body, $from)) { 
                            echo '<p>Your email has been successfully sent!</p>';
                    } else { 
                            echo '<p>Something went wrong, go back and try again!</p>'; 
                            } 
                    } else if ($_POST['submit'] && $human != '4') {
                            echo '<script>
$("submit-mail").click(function () {
$("#mail-message-window").show("slow");
});
</script>';
                            }
                    ?>

The FORM >

<form method="post" action="#contact-us">
                        <label>Name *</label>
                        <input type="text" name="name" class="rounded" required />
                        <label>E-mail *</label>
                        <input type="email" name="email" class="rounded" required />
                        <label>Subject *</label>
                        <input type="text" name="title" class="rounded" required />
                        <label>Message *</label>
                        <textarea name="content" cols="42" rows="7" class="rounded" required></textarea>
                        <label>What is 2+2? (Anti-spam) *</label>
                        <input type="text" name="human" class="rounded" required />
                        <input id="submit" name="submit" id="submit-mail" type="submit" class="submit-btn rounded" value="SEND">
                    </form>

The Hidden DIV >

<div id="mail-message">
                        <table>
                            <tr>
                                <td>
                                    <div id="mail-message-window">
                                        <div id="mail-message-header"></div>
                                        <p id="mail-failure">Unable to send your email!</p>
                                        <p id="invalid-email">Please enter valid email address!</p>
                                        <p id="empty-field">Please fill out all the fields in order to send us a message.</p>
                                        <p id="mail-success">Your email has been successfully sent to us!</p>
                                        <input type="button" id="mail-message-btn" class="mail-message-btn rounded" value="OK" />
                                    </div>
                                </td>
                            </tr>
                        </table>

the CSS >

#mail-message
{
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 210;
}
#mail-message
{
    width: 100%;
    height: 100%;
    text-align: center;
}
#mail-message-window
{
    width: 400px;
    padding-bottom: 20px;
    border: solid 0px #ffffff;
    background: #000000 url('../images/bg.png') repeat top left;
    margin: 0 auto;
}
#mail-message-header
{
    width: 400px;
    height: 70px;
}
.mail-message-success
{
    background: transparent url('../images/success.png') no-repeat top left;
}
.mail-message-error
{
    background: transparent url('../images/error.png') no-repeat top left;
}
#mail-message-window p
{
    margin: 0 0 5px 10px;
    text-align: left;
}
#mail-message-window input
{
    margin-top: 10px;
}
#mail-message td
{
    vertical-align: middle;
}

Answer 1

Instead of

$("#mail-message-window").show("slow");

you need

$("#mail-message").show("slow");

Because from CSS it seems display: none; is set to #mail-message but not to mail-message-window .

If you want to use $("#mail-message-window").show("slow"); then set display:none to #mail-message-window instead of #mail-message .

Note

You should use $(document).ready(function() { ... }) , in short $(function() { .. }) to wrap you all jQuery code.