PHP Form Submit Without Refresh

Question

I went off an tutorial when creating this form, and have edited and formatted it to match my site. The original form works just the way I want it to, and mine works except for instead of sliding up on submitting the form, the page refreshes. I have compared the code so many times and looked all over the place and can't figure out what I changed or left out that is causing mine to refresh the page. Any help would be greatly appreciated. I've spent hours working on this, and I'm sure it's somethings small.

Here is the original tutorial: http://www.hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial/

Here is my code:

PHP in the header:

<?php 
error_reporting(E_ALL ^ E_NOTICE); // hide all basic notices from PHP

//If the form is submitted
if(isset($_POST['submitted'])) {

// require a name from user
if(trim($_POST['contactName']) === '') {
    $nameError =  '<strong>WARNING:</strong> Please provide your full name.'; 
    $hasError = true;
} else {
    $name = trim($_POST['contactName']);
}

// need valid email
if(trim($_POST['email']) === '')  {
    $emailError = '<strong>WARNING:</strong> Please provide an email address.';
    $hasError = true;
} else if (!preg_match("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[a-z]{2,4}$/i", trim($_POST['email']))) {
    $emailError = 'Please provide a valid email address.';
    $hasError = true;
} else {
    $email = trim($_POST['email']);
}

// require a phone from user
if(trim($_POST['phone']) === '') {
    $phoneError =  '<strong>WARNING:</strong> Please provide a phone number.'; 
    $hasError = true;
} else {
    $phone = trim($_POST['phone']);
}

// we need at least some content
if(trim($_POST['comments']) === '') {
    $commentError = '<strong>WARNING:</strong> Please provide a message.';
    $hasError = true;
} else {
    if(function_exists('stripslashes')) {
        $comments = stripslashes(trim($_POST['comments']));
    } else {
        $comments = trim($_POST['comments']);
    }
}

// upon no failure errors let's email now!
if(!isset($hasError)) {

    $emailTo = 'myemail@gmail.com';
    $subject = 'Submitted message from '.$name;
    $sendCopy = trim($_POST['sendCopy']);
    $body = "Name: $name \n\nEmail: $email \n\nPhone: $phone \n\nComments: $comments";
    $headers = 'From: ' .' <'.$email.'>' . "\r\n" . 'Reply-To: ' . $email;

    mail($emailTo, $subject, $body, $headers);

    // set our boolean completion value to TRUE
    $emailSent = true;
}
}
?>

Form with PHP:

            <div class="separator">
                <h5>Keep in touch</h5>
                <div class="sep_line"></div><!-- separator line -->
            </div>

            <div class="clear"></div>


            <div class="twoThirds">

        <?php if(isset($emailSent) && $emailSent == true) { ?>
            <div class="Note Success hideit">
            <p><strong>SUCCESS: </strong>Your message has been sent.</p>
            </div>
        <?php } else { ?>

                <div id="respon">

                <?php if(isset($hasError) || isset($captchaError) ) { ?>
                    <div class="Note Failure hideit">
                    <p><strong>FAILURE: </strong>Error submitting the message.</p>
                    </div>
                <?php } ?>

                    <form action="contact.php" method="post" id="contact-form">    

                        <label for="name">
                            Name:  *                    </label>
                        <input type="text" name="contactName" id="contactName" value="<?php if(isset($_POST['contactName'])) echo $_POST['contactName'];?>" size="22" tabindex="1" class="nameInput">
                        <?php if($nameError != '') { ?>
                            <br><div class="Note Warning hideit"><p><?php echo $nameError;?></p></div> 
                        <?php } ?>
                       <label for="email">
                            Email:  *                   </label>
                        <input type="text" name="email" id="email" value="<?php if(isset($_POST['email']))  echo $_POST['email'];?>" size="22" tabindex="2" class="emailInput">  
                        <?php if($emailError != '') { ?>
                            <br><div class="Note Warning hideit"><p><?php echo $emailError;?></p></div>
                        <?php } ?>
                        <label for="phone">
                            Phone:  *               </label>
                        <input type="text" name="phone" id="phone" value="<?php if(isset($_POST['phone']))  echo $_POST['phone'];?>" size="22" tabindex="3" class="webInput">
                        <?php if($phoneError != '') { ?>
                            <br><div class="Note Warning hideit"><p><?php echo $phoneError;?></p></div> 
                        <?php } ?>
                        <label for="message">
                            Your Message:   *               </label>
                        <textarea name="comments" id="commentsText" tabindex="4" class="messageInput"><?php if(isset($_POST['comments'])) { if(function_exists('stripslashes')) { echo stripslashes($_POST['comments']); } else { echo $_POST['comments']; } } ?></textarea>
                        <?php if($commentError != '') { ?>
                            <br><div class="Note Warning hideit"><p><?php echo $commentError;?></p></div> 
                        <?php } ?>                            
                        <br>

                        <input name="reset" class="button" type="reset" id="reset" tabindex="5" value="Reset">
                        <input name="submit" class="button" type="submit" id="submit" tabindex="6" value="Submit">
                        <input type="hidden" name="submitted" id="submitted" value="true" />                            
                    </form>

                </div>
        <?php } ?>


        </div><!-- end main contact-us -->

Javascript:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
$(document).ready(function() {
    $('form#contact-us').submit(function() {
        $('form#contact-us .error').remove();
        var hasError = false;
        $('.requiredField').each(function() {
            if($.trim($(this).val()) == '') {
                var labelText = $(this).prev('label').text();
                $(this).parent().append('<span class="Note Warning hideit">Your forgot to enter your '+labelText+'.</span>');
                $(this).addClass('inputError');
                hasError = true;
            } else if($(this).hasClass('email')) {
                var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
                if(!emailReg.test($.trim($(this).val()))) {
                    var labelText = $(this).prev('label').text();
                    $(this).parent().append('<span class="Note Warning hideit">Sorry! You\'ve entered an invalid '+labelText+'.</span>');
                    $(this).addClass('inputError');
                    hasError = true;
                }
            }
        });
        if(!hasError) {
            var formInput = $(this).serialize();
            $.post($(this).attr('action'),formInput, function(data){
                $('form#contact-us').slideUp("fast", function() {                  
                    $(this).before('<p class="Note Success hideit"><strong>SUCCESS: </strong>Your message has been sent.</p>');
                });
            });
        }

        return false;   
    });

});
//-->!]]>
</script>

Answer 1

The solution is simple,

Mainly you are missing to specify the correct id of the form that you are submitting,

<form action="contact.php" method="post" id="contact-form">

Where it should be

<form action="contact.php" method="post" id="contact-us">

The there are some missing attributes in the form, which you are selecting in javascript

Eg.

• .requiredField
• .error

Try to correct those also.

EDIT

Roughly edited form block

<form action="contact.php" method="post" id="contact-us">    

    <label for="name">
        Name:  *                    </label>
    <input type="text" name="contactName" id="contactName" value="<?php if (isset($_POST['contactName'])) echo $_POST['contactName']; ?>" size="22" tabindex="1" class="nameInput requiredField">
    <?php if ($nameError != '') { ?>
        <br><div class="error"><p><?php echo $nameError; ?></p></div> 
    <?php } ?>
    <label for="email">
        Email:  *                   </label>
    <input type="text" name="email" id="email" value="<?php if (isset($_POST['email'])) echo $_POST['email']; ?>" size="22" tabindex="2" class="email requiredField">  
    <?php if ($emailError != '') { ?>
        <br><div class="error"><p><?php echo $emailError; ?></p></div>
    <?php } ?>
    <label for="phone">
        Phone:  *               </label>
    <input type="text" name="phone" id="phone" value="<?php if (isset($_POST['phone'])) echo $_POST['phone']; ?>" size="22" tabindex="3" class="webInput requiredField">
    <?php if ($phoneError != '') { ?>
        <br><div class="error"><p><?php echo $phoneError; ?></p></div> 
    <?php } ?>
    <label for="message">
        Your Message:   *               </label>
    <textarea name="comments" id="commentsText" tabindex="4" class="messageInput requiredField"><?php if (isset($_POST['comments'])) {
        if (function_exists('stripslashes')) {
            echo stripslashes($_POST['comments']);
        } else {
            echo $_POST['comments'];
        }
    } ?></textarea>
    <?php if ($commentError != '') { ?>
            <br><div class="error"><p><?php echo $commentError; ?></p></div> 
    <?php } ?>                            
    <br>

    <input name="reset" class="button" type="reset" id="reset" tabindex="5" value="Reset">
    <input name="submit" class="button" type="submit" id="submit" tabindex="6" value="Submit">
    <input type="hidden" name="submitted" id="submitted" value="true" />                            
</form>​

YET ANOTHER EDIT​

In your JS file change,

$(this).parent().append('<span class="Note Warning hideit">

to

$(this).parent().append('<span class="error">

and

$(this).before('<p class="Note Success hideit">

to

$(this).before('<p class="tick">

as in the tutorial.