PHP/JavaScript電子郵件聯繫表

我試圖使用電子郵件的聯繫表格，默認情況下，在提交郵件重定向到另一個頁面後。不過，我想在郵件提交後留在同一頁面上，但是彈出消息告訴發件人，而不是郵件已發送，但不離開頁面。下面是我試圖使用的PHP的HTML頁面&的JavaScript。PHP/JavaScript電子郵件聯繫表

任何人都可以解釋我失蹤&如何做到這一點？

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

      $("#contactFormSubmit").click(function(event) { 
       $.post(「/contactengine.php", $("#contactForm").serialize()); 
       $('#contactFormConfirmation').slideDown(); 
       $('#submitFormReset').click(); 
      }); 

     }); 
    </script> 




<?php 
$EmailFrom = ""; 
$EmailTo = ""; 
$Subject = ""; 
$Name = Trim(stripslashes($_POST['Name'])); 
$Email = Trim(stripslashes($_POST['Email'])); 
$Message = Trim(stripslashes($_POST['Message'])); 

// validation 
$validationOK=true; 
if (!$validationOK) { 
    print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; 
    exit; 
} 

// prepare email body text 
$Body = ""; 
$Body .= "Name: "; 
$Body .= $Name; 
$Body .= "\n"; 
$Body .= "Email: "; 
$Body .= $Email; 
$Body .= "\n"; 
$Body .= "Message: "; 
$Body .= $Message; 
$Body .= "\n"; 

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>"); 

// redirect to success page 
if ($success){ 
    print "<meta http-equiv=\"refresh\" content=\"0;URL=contactthanks.php\">"; 
} 
else{ 
    print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">"; 
} 
?>

來源

2014-04-24 markkane

Java！= JavaScript –

如果你想留在同一頁面上，你應該使用ajax。 – Slim

@slim你能舉個例子嗎？ – markkane

好吧，我想你應該試試這個！

首先運行PHP腳本，你會發送電子郵件，然後之後加入這一行，在你的PHP腳本的底部

header("Location: http://myurl.com/contact?check=1");

隨後聯繫頁面上有一個包含值的隱藏輸入0這稱爲檢查，然後使用url參數填充輸入框。

在頁面加載檢查隱藏的輸入框的值，看看它的1或0。如果它的1顯示一個彈出框，如果它的0加載頁面通常

我希望這有助於！

使用此代碼

<form id="contactForm" method="post" action="contactengine.php"> 
    <div class="row half"> 
     <div class="6u"> 
      <input type="text" class="text" placeholder="Name" name="Name" /> 
     </div> 
     <div class="6u"> 
      <input type="text" class="text" placeholder="Email" name="Email" /> 
     </div> 
    </div> 
    <div class="row half"> 
     <div class="12u"> 
      <textarea name="message" placeholder="Message" name="Message"></textarea> 
     </div> 
    </div> 
    <div class="row" id="contactFormConfirmation" style="display: none;"> 
     <div class="12u"> 
      <p style="color: white; background-color: #FF3B30;width: 325px;border-radius: 0.25em;padding: .3em;margin: 0 auto;">Thank you for getting in touch!</p> 
      </div> 
    </div> 
    <div class="row"> 
     <div class="12u"> 
      <ul class="actions"> 
        <li> 
         <input type="submit" name="submit" id="contactFormSubmit" class="form-button" value="Submit" /> 
        </li> 
        <li> 
         <input type="reset" name="reset" id="submitFormReset" class="form-button alt" value="Clear" /> 
        </li> 
      </ul> 
     </div> 
     </div> 
    </form> 
    <form name="checkf" id="checkf"> 
     <input name="check" id="check" value="0"> 
    </form>

編輯：

更改您剛纔添加到一個下面的代碼我忘了在添加一行笑

<script type="text/css"> 
    function fcheckf(){ 
    var x = document.getElementById('check').value; 
    if(x == 0) 
    { 
     return false; 
    } 
    else 
    { 
     alert("Thank you for submitting your data! - This is the pop up box content!"); 
    } 
    } 
</script>

一旦你已經添加了上面的內容，改變你的：

<body>

標籤，這樣的：

<body onload="fcheckf()">

另一個編輯

現在只是

</body>

標籤之前添加此。它是在該行body標籤:)

<script type="text/javascript"> 
var data=location.search; 
if(data) { 
data=location.search.substring(1); 
data=data.split('&'); 
var pairs={}; 
for(var i=0; i<data.length; i++){ 
    var tmp=data[i].split('='); 
    pairs[tmp[0]]=tmp[1]; 
    } 
var f = document.checkf; 
for (var i in pairs) { 
    if(f.elements[i]) {f.elements[i].value = pairs[i];} 
    } 
}

編輯56981 V3

使用您的HTML中的這段代碼粘貼之前，這是很重要

<script> 
function fcheckf(){ 
var x = document.getElementById('check').value; 
if(x == 0) 
{ 
    return false; 
} 
else 
{ 
    alert("Thank you for submitting your data! - This is the pop up box content!"); 
} 
} 
</script> 
<section id="fourth" class="contact"> 
    <header> 
     <div class="container"> 
      <span class="image-header-contact"><img src="images/contact-header.png" alt="Video" /></span> 
      <h2>Get In Touch</h2> 
     </div> 
    </header> 
    <div class="content style4 featured"> 
     <div class="container small"> 
      <form id="contactForm" method="post" action="contactengine.php"> 
<div class="row half"> 
    <div class="6u"> 
     <input type="text" class="text" placeholder="Name" name="Name" /> 
    </div> 
    <div class="6u"> 
     <input type="text" class="text" placeholder="Email" name="Email" /> 
    </div> 
</div> 
<div class="row half"> 
    <div class="12u"> 
     <textarea name="message" placeholder="Message" name="Message"></textarea> 
    </div> 
</div> 
<div class="row" id="contactFormConfirmation" style="display: none;"> 
    <div class="12u"> 
     <p style="color: white; background-color: #FF3B30;width: 325px;border-radius: 0.25em;padding: .3em;margin: 0 auto;">Thank you for getting in touch!</p> 
     </div> 
</div> 
<div class="row"> 
    <div class="12u"> 
     <ul class="actions"> 
       <li> 
        <input type="submit" name="submit" id="contactFormSubmit" class="form-button" value="Submit" /> 
       </li> 
       <li> 
        <input type="reset" name="reset" id="submitFormReset" class="form-button alt" value="Clear" /> 
       </li> 
     </ul> 
    </div> 
    </div> 
</form> 
<form name="checkf" id="checkf"> 
    <input name="check" id="check" value="1"> 
</form> 
     </div> 
    </div> 
</section> 
    <script> 
     var data=location.search; 
if(data) { 
data=location.search.substring(1); 
data=data.split('&'); 
var pairs={}; 
for(var i=0; i<data.length; i++){ 
var tmp=data[i].split('='); 
pairs[tmp[0]]=tmp[1]; 
} 
var f = document.checkf; 
for (var i in pairs) { 
if(f.elements[i]) {f.elements[i].value = pairs[i];} 
} 
} 
    </script>

來源

2014-04-24 13:24:39 KM123

謝謝你的迴應 - 你能告訴我這將是什麼樣子，因爲我只能得到它現在重新加載提交頁面，但沒有彈出 – markkane

好吧在你的頁面上創建了一個隱藏在與支票和支票的名稱與檢查的ID爲0 – KM123

讓我知道你什麼時候做完了:) – KM123

待辦事項像這樣：

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#contactFormSubmit").click(function(event) { 
      $.post("contactengine.php", $("#contactForm").serialize(), function(data) { 
       $('#contactFormConfirmation').html(data.message).slideDown(); 
      },'json'); 
     }); 
    }); 
</script> 

<?php 

//code to send email here... 
$success = true; 

$result['status'] = "ok"; 
$result['message'] = "Your email has been sent."; 
if (!$success){ 
    $result['status'] = "error"; 
    $result['message'] = "Unable to send your message."; 
} 
echo json_encode($result); 
?>

來源

2014-04-24 13:28:06 scottfreeman

嗨斯科特，我害怕沒有工作 – markkane

在什麼方式沒有工作？我在這裏創建了一個JSFiddle：http：///jsfiddle.net/scottfreeman/dC4Jb/這可能會有所幫助（請注意，JSFiddle示例如果運行它不起作用，因爲它不會執行PHP的東西）。 – scottfreeman

如果你想留在同一頁面，你應該使用ajax。我建議嘗試jquery $.ajax調用，因爲它似乎更容易。

下面是一個簡單的例子：

$.ajax({ 
    url: "pathToThePHPGoesHere", // Here you have to place the path to the php file 
    type: 'GET', 
    data: $.extend({ 
     mailSubject: encodeURI(mailSubjectVar), // 1st variable name and value - you can place the content of your HTML box here 
     mailBody: encodeURI(mailBodyVar) // 2nd variable name and value - you can place the content of your HTML box here 
    }, tJS.getCommonPostData()), 
    dataType: "json", 
    cache: false, 
    success: function (responseText, status, xhr) { 
     alert("Job done!"); // Here is what happens when the request is executed 
    }, 
    error: function (jqXHR, textStatus, error) { 
     tJS.manageError(jqXHR); // show an error message if something goes wrong 
    } 
});

您需要decode在你的PHP腳本中的變量。

我不是一個PHP開發人員，但你的代碼應該是這樣的：

$mailSubject = urldecode($_POST['mailSubject']); 
$mailBody = urldecode($_POST['mailBody']);

在.$ajax呼叫我已編碼的字符，這樣你就可以轉移UTF-8，這就是爲什麼你需要使用urldecode在你的PHP。

爲了使用上面的代碼，不要忘記在項目中包含jquery庫。

來源

2014-04-25 14:26:12 Slim

PHP/JavaScript電子郵件聯繫表

回答

相關問題