2013-03-19 88 views
1

UPDATE:AJAX WordPress的接觸形式

<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在行動 - 電子郵件發送現在罰款 - 但它需要用戶到空白sendContact.php。

有沒有將他們重定向回站點的方法?或通過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); 
+0

粘貼你的JavaScript Ajax代碼,請 – 2013-03-19 06:03:44

+0

此外按鈕類型是提交,你需要使它簡單的按鈕,然後使用JavaScript AJAX方式提交。 – 2013-03-19 06:05:37

+0

我更新了javascript – Mark 2013-03-19 06:07:40

回答

1

WordPress中實現Ajax的最佳方法是使用管理-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'); 

阿賈克斯腳本(將它添加到的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); 
      } 
     }); 
    }); 
}); 
+0

謝謝! - 我需要表單操作嗎? – Mark 2013-03-19 16:42:35

+0

當我在die()函數中放入require(get_template_directory()。'/inc/sendContact.php')時沒有任何事情發生。 – Mark 2013-03-19 20:51:37

+0

@Mark form action是可選的,但你可以添加action =「<?php echo admin_url('admin-ajax.php');?>?action = MyAjaxCallBack」 – 2013-03-20 13:15:42

0

使用id選擇的形式。

更換

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

隨着

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

您需要添加一個提交處理程序類似

$(function(){ 
    $(".applywrap > form").submit(function(){ 
     var data = $(".applywrap > form").serialize(); 
     $.ajax({ 
      type: "POST", 
      url: "<?php bloginfo('template_directory'); ?>/inc/sendContact.php", 
      data: data, 
      cache: false, 
      success: function(msg){ 
      } 
     }); 
     return false; 
    }); 
}); 
+0

我忘了 - 我添加了一個提交處理程序 - 我認爲它的做法是將它的ajax轉換爲即時消息的即時消息。我會用php代碼更新我的帖子 – Mark 2013-03-19 06:13:51