Question

我有一个联系表单，它只发送php atm，我想用ajax发送它？什么是最简单的方法？

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

                //Check to make sure that the name field is not empty
                if(trim($_POST['contactname']) == '') {
                    $hasError = true;
                } else {
                    $name = trim($_POST['contactname']);
                }




                //Check to make sure that the subject field is not empty
                if(trim($_POST['subject']) == '') {
                    $hasError = true;
                } else {
                    $subject = trim($_POST['subject']);
                }

                //Check to make sure sure that a valid email address is submitted
                if(trim($_POST['email']) == '')  {
                    $hasError = true;
                } else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
                    $hasError = true;
                } else {
                    $email = trim($_POST['email']);
                }

                //Check to make sure comments were entered
                if(trim($_POST['message']) == '') {
                    $hasError = true;
                } else {
                    if(function_exists('stripslashes')) {
                        $comments = stripslashes(trim($_POST['message']));
                    } else {
                        $comments = trim($_POST['message']);
                    }
                }

                //If there is no error, send the email
                if(!$hasError) {
                    $emailTo = '123@gmail.com'; // Put your own email address here
                    $body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
                    $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

                    if(wp_mail($emailTo, $subject, $body, $headers)) {
                        $emailSent = true;
                    }else{
                        echo '<p class="alert-message error">Error sending mail.</p>';  
                    }
                }
            }
            ?>

请注意改进发送功能。

任何帮助都非常感激。

如果您需要查看表单，请告诉我，我将编辑并将其放入

Answer 1

您需要在客户端执行此操作

只需使用此插件http://jquery.malsup.com/form/

即可

Answer 2

您可以按照以下方式修改代码。

以下是您所要求的独立示例（未经测试）。

只需将两个代码块复制/粘贴到两个文件中：

contacttest.php （或任何您想称之为的内容）
yourphpprocessor.php （如果更改名称，还必须在AJAX代码块中更改它）

请注意：
1.每个表单元素现在都有一个ID attr
2. <form>功能完全不再使用，事实上阻止通过e.preventDefault()

HTML： contacttest.php

<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />

        <style>
        </style>

        <script type="text/javascript">
            $(document).ready(function() {

                //If you want the output from php side in a lightbox...
                $('#alertmsg').dialog({
                    autoOpen: false,
                    modal: true,
                    width: 400,
                    buttons: {
                        Thanks: function() {
                            $(this).dialog('close');
                        }
                    }
                });

                $('#contactform').submit(function(e) {
                    e.preventDefault();
                    var frm = $('#cname').val();
                    var eml = $('#cemail').val();
                    var sub = $('#subj').val();
                    var msg = $('#msg').val();

                    //validation goes here, for eg.
                    if (frm == '' || eml==''){
                        alert('All fields must be completed');
                        return false;
                    }

                    $.ajax({
                        type: "POST",
                        url: "yourphpprocessor.php",
                        data: 'f=' +frm+ '&e=' +eml+ '&s=' +sub+ '&m=' +msg,
                        success: function(recd) {
                            $('#alertmsg').html(recd);
                            $('#alertmsg').dialog('open'); //Uses lightbox to display message
                        }
                    });
                }); //END AJAX


            }); //END $(document).ready()

        </script>
    </head>
<body>

    <form id="contactform" action="" method="POST">
        From: <input type="text" name="contactname" id="cname"><br />
        Email: <input type="text" name="email" id="cemail"><br />
        Subject: <input type="text" name="subject" id="subj"><br />
        Message: <textarea name="message" id="msg"></textarea><br /><br />
        <input type="submit" id="mysubmit" value="Submit">
    </form>

    <div id="alertmsg"></div>

</body>
</html>

PHP方面： yourphpprocessor.php

<?php
    $name = $_POST['f'];
    $email = $_POST['e'];
    $subject = $_POST['s'];
    $comments = $_POST['m'];

    $emailTo = '123@gmail.com'; // Put your own email address here
    $body = "Name: $name \n\nEmail: $email \n\nSubject: $subject \n\nComments:\n $comments";
    $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

    if(wp_mail($emailTo, $subject, $body, $headers)) {
        $emailSent = true;
    }else{
        echo '<p class="alert-message error">Error sending mail.</p>';  
    }
?>

如何使这个PHP脚本发送到ajax而不是

2 个答案: