用于提交电子邮件表单而无需刷新页面且未经验证的代码

时间:2013-07-21 17:53:55

标签: php jquery html ajax

我使用requires属性创建了一个联系表单。现在我想提交此电子邮件表单而不刷新页面。当我用谷歌搜索它时,我得到了验证码,我不需要验证,因为我在我的html中使用了必需的属性。我只想要我可以添加的功能,以便在提交后电子页面不会刷新,电子邮件应该去...

的index.html

<!DOCTYPE html>
<html>  
    <head>
        <meta charset="utf-8">
        <title>HTML5 Contact Form</title>
        <link rel="stylesheet" media="screen" href="styles.css">
    </head>     
    <body>
        <div id="contact">
            <form class="contact_form" action="contact.php" method="post" name="contact_form">
                <ul>
                    <li>
                         <h2>Contact Us</h2>
                         <span class="required_notification">* Denotes Required Field</span>

                    </li>
                    <li>
                        <label for="name">Name:</label>
                        <input type="text" id="name" name="name" placeholder="John Doe" required />
                    </li>
                    <li>
                        <label for="email">Email:</label>
                        <input type="email" name="email" id="email" placeholder="john_doe@example.com" required /> <span class="form_hint">Proper format "name@something.com"</span>

                    </li>
                    <li>
                        <label for="message">Message:</label>
                        <textarea name="message" id="message" cols="40" rows="6" required></textarea>
                    </li>
                    <li>
                        <button class="submit" id="submit_btn" type="submit">Submit Form</button>
                    </li>
                </ul>
            </form>
        </div>
    </body>
</html>

contact.php

<?php
    $field_name = $_POST['name'];
    $field_email = $_POST['email'];
    $field_message = $_POST['message'];
    $mail_to = 'babloopuneeth@gmail.com';
    $subject = 'Message from a site visitor '.$field_name;
    $body_message = 'From: '.$field_name."\n";
    $body_message .= 'E-mail: '.$field_email."\n";
    $body_message .= 'Message: '.$field_message;
    $headers = 'From: '.$field_email."\r\n";
    $headers .= 'Reply-To: '.$field_email."\r\n";
    $mail_status = mail($mail_to, $subject, $body_message, $headers);

    if ($mail_status) {
        ?>

        </script>
    <?php
     } else { ?>

    <?php
     } 
?>

我不知道如果要在其他情况下添加内容以实现我的目标?请帮帮我......

2 个答案:

答案 0 :(得分:0)

您必须使用jQuery的{​​{1}}函数发送表单而不刷新页面,这是官方文档:http://api.jquery.com/jQuery.ajax/

希望它有所帮助!

答案 1 :(得分:0)

只需将其用作contact.php

即可
<?php
$field_name = $_POST['name'];
$field_email = $_POST['email'];
$field_message = $_POST['message'];
$mail_to = 'babloopuneeth@gmail.com';
$subject = 'Message from a site visitor '.$field_name;
$body_message = 'From: '.$field_name."\n";
$body_message .= 'E-mail: '.$field_email."\n";
$body_message .= 'Message: '.$field_message;
$headers = 'From: '.$field_email."\r\n";
$headers .= 'Reply-To: '.$field_email."\r\n";
$mail_status = mail($mail_to, $subject, $body_message, $headers);
?>