ajax wordpress 联系表格答案

【问题标题】：ajax wordpress contact formajax wordpress 联系表格
【发布时间】：2013-03-19 05:58:42
【问题描述】：

更新：

<form method="post" id="formApply"  action="<?php bloginfo('template_url');?>/inc/sendContact.php" name="applyForm">
    <div id="col1">
        <fieldset class="col-1">
            <div class="white info-line">Want to know more? Drop us a line and we'll get right back to you.</div>
            <label class="white text-label name" for="fname">Name:</label><input type="text" name="fname" id="fname" tabindex="1" />
            <div class="clear"></div>
            <label class="white text-label email" for="email">Email:</label><input type="email" class="lower" name="email" id="email"  tabindex="2"/>
            <div class="clear"></div>
            <label class="white text-label phone" for="phone">Phone:</label><input type="tel" name="phone" id="phone" tabindex="3" maxlength="10"/>
            <div class="white text-label checker-title" id="checkererror">I am interested in:</div>
            <input type="checkbox" id="checkbox-2-1" class="regular-checkbox big-checkbox" name="checker[]" value="Office Space" /><label for="checkbox-2-1"></label><div class="white text-label checker">Office Space</div>
            <input type="checkbox" id="checkbox-2-2" class="regular-checkbox big-checkbox" name="checker[]" value="Designated Workspace" /><label for="checkbox-2-2"></label><div class="white text-label checker">Designated Workspace</div>
            <input type="checkbox" id="checkbox-2-3" class="regular-checkbox big-checkbox" name="checker[]" value="Shared Space" /><label for="checkbox-2-3"></label><div class="white text-label checker">Shared Space</div>
        </fieldset>
    </div>
    <div id="col2">
        <fieldset class="col-2">
            <label class="white text-label note-label" for="notes">Notes:</label><br/>
            <textarea name="notes" id="notes" rows="10" cols="30" class="requiredField" tabindex="4"></textarea>
            <input type="hidden" name="submitted" id="submitted" class="submitted" value="true" /><button id="submit" type="submit">Submit Application</button>
        </fieldset>
    </div>
</form>

所以我将表单更改为 php on action - 电子邮件现在可以正常发送 - 但它会将用户带到空白的 sendContact.php。

有没有办法将它们重定向回网站？还是通过 ajax 来做这个？

我在 ajax 中尝试了几种方法，但它没有发送电子邮件

谢谢！

PHP：

require_once 'lib/swift_required.php';


$transport = Swift_MailTransport::newInstance();

$mailer = Swift_Mailer::newInstance($transport);

$name = Trim(stripslashes($_POST['fname']));
$email = Trim(stripslashes($_POST['email']));
$phone = Trim(stripslashes($_POST['phone']));
$notes  = Trim(stripslashes($_POST['notes']));
$checkbox = $_POST['checker'];


$message = Swift_Message::newInstance()
  ->setFrom(array('From_Email' => 'My Website'))
  ->setSubject('[My_Subject from '.$name.']')
  ->setTo(array('My_Email'))
  ->setBody(
'<html>'.
'<head></head>'.
'<body>'.
'<strong>Name:</strong><br />'.
$title.' '.$name.'<br /><br />'.
'<strong>Email Address:</strong><br />'.
$email.'<br /><br />'.
'<strong>Phone Number:</strong><br />'.
$phone.'<br /><br />'.
'<strong>Interested in:</strong><br />'.
implode('<br />', $checkbox).'<br /><br />'.
'<strong>Message:</strong><br />'.
$notes.'<br /><br />'.
'</body>'.
'</html>',
'text/html' );
$result = $mailer->send($message);

【问题讨论】：

请粘贴您的 javascript ajax 代码
另外按钮类型是提交，您需要将其设为简单按钮，然后使用 javascript ajax 方式进行提交。
我用 javascript 更新了
@Mark 页面上有一个 JS 错误，上面写着“TypeError: $ is not a function”，所以请将 $ 更改为 jQuery like jQuery("form#applywrap").submit 并让我知道它是否适合你。

标签： php jquery ajax wordpress

【解决方案1】：

在 WordPress 中实现 Ajax 的最佳方式是使用 admin-ajax.php

在模板的functions.php中添加以下代码

function MyAjaxCallBack()
{
    foreach($_POST as $key=>$value)
        $$key = $value;
    //Email script will go here!
    die();
}

// creating Ajax call for WordPress  
add_action('wp_ajax_nopriv_MyAjaxCallBack', 'MyAjaxCallBack');
add_action('wp_ajax_MyAjaxCallBack', 'MyAjaxCallBack');

Ajax 脚本（添加到 header.php 或 footer.php）：

jQuery(document).ready(function() {  
    jQuery("#PleasePushMe").click(function(){ 
        jQuery.ajax({  
            type: 'POST',  
            url: '<?php echo admin_url('admin-ajax.php');?>',  
            data: {  
                action: 'MyAjaxCallBack',
                MyParam: 'MyParamValue'
            },  
            success: function(data, textStatus, XMLHttpRequest){  
                alert(data);  
            },  
            error: function(MLHttpRequest, textStatus, errorThrown){  
                alert(errorThrown);  
            }  
        });  
    });  
});

【讨论】：

当我将 require( get_template_directory() . '/inc/sendContact.php' ) 放入 die() 函数时，什么都没有发生。
@Mark 表单操作是可选的，但您可以添加 action="?action=MyAjaxCallBack"
谢谢，只是我不确定如何将脚本实现到 die() 函数中 - 我应该在其中包含 sendContact.php 文件吗？
@Mark 我已经更新了我的答案，电子邮件脚本不会进入 die()

【解决方案2】：

使用id 选择器作为表单。

替换

var data = $(".applywrap > form").serialize();

有

var data = $("#applywrap > form").serialize();

【讨论】：

【解决方案3】：

你需要添加一个submit handler:

$(function(){

    $(".applywrap > form").on("submit", function(){
        // here you should probably validate your form fields...

        $.ajax({
            type : this.method,
            url  : this.action, // HTML <form> "action" attribute
            data : $(this).serialize(),
            cache: false
        })
        .done(console.log)
        .fail(console.warn)

        return false; // so the form won't refresh the page
    });

});

【讨论】：

我忘记了——我添加了一个提交处理程序——我认为它做的事情是 ajax 到 php，我很难处理。我会用 php 代码更新我的帖子