PHP 表单提交而不刷新

标签 php javascript forms refresh

我在创建此表单时跳过了教程，并对其进行了编辑和格式化以匹配我的网站。原始表单的工作方式正是我想要的，而我的工作方式只是页面刷新而不是在提交表单时向上滑动。我已经对代码进行了多次比较，并查看了所有地方，但无法弄清楚我更改或遗漏了什么导致我刷新页面。任何帮助将不胜感激。我花了几个小时研究这个，我确信这只是小事。

原教程如下:http://www.hongkiat.com/blog/ajax-html5-css3-contact-form-tutorial/

这是我的代码:

header 中的 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>

最佳答案

解决办法很简单，

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

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

它应该在哪里

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

表单中缺少一些属性，您在 javascript 中选择了这些属性

例如。

  • .requiredField
  • .error

也尝试纠正这些问题。

编辑

粗略编辑的表单 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>​

再次编辑 ​

在你的 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">

如教程中所示。

关于PHP 表单提交而不刷新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11910830/

上一篇：javascript - 按属性对 JavaScript 对象数组进行排序时数字有什么问题

下一篇：javascript - 禁用基于下拉选择启用文本框 asp.net javascript

相关文章：

javascript - 如何将多个 HTML 表单中的值添加到一个数组中进行发送

php - 文件上传.js + MySQL

PHP-SQLite 与 SQLite3

javascript - Ynaxdh 代表什么？ (自耕农)

javascript - 将整数数组从 JSP 传递到 JS

javascript - Jquery Repeater 解析 jquery 中的值

php - 如何验证表单是否为空？ PHP 或 JS

php - 使用 'like' 的 Magento 属性过滤器未按预期运行

php - 使用 Doctrine DQL 和 Symfony2 检查日期是否在 -45 分钟 +45 分钟范围内

javascript - 单击按钮时如何退出 native 应用程序？

©2024 IT工具网  联系我们