PHP表单提交没有刷新

Question

我在创建此表单时已经完成了一个教程，并对其进行了编辑和格式化以匹配我的网站。原始表单的工作方式与我想要的方式相同，而且我的工作除了提交表单而不是向上滑动，页面刷新。我已经多次对这些代码进行了比较，并且遍布整个地方，无法弄清楚我改变了什么或遗漏了什么导致我的刷新页面。任何帮助将不胜感激。我花了好几个小时研究这个问题，我确信它的确很小。

以下是原始教程：http://www.hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial/

这是我的代码：

标题中的PHP：

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

使用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

解决方案很简单，

主要是您缺少指定要提交的表单的正确id，

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

它应该在哪里

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

表单中有一些缺少的属性，您在javascript中选择

例如

• .requiredField
• .error

尝试纠正这些。

修改

粗略编辑的表单块

<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>​

另一个编辑

在JS文件更改中，

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

到

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

和

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

到

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

与教程一样。