2014-09-19 101 views
3

JQuery和Ajax有點新鮮,但我有一個簡單的郵件表單,我試圖使用JQUERY發佈以防止重新加載頁面。Ajax在coldfusion頁面中發送電子郵件不會觸發

以下是樣本頁面:DetailInfo.cfm。

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

<script> 

$(document).ready(function() { $("#frmSubmit").submit(sendForm) });  

function SubmitForm() 
{ 
Tbody = document.getElementById("txtBody"); 

if(Tbody.value == '') 
    alert('Please enter some text for your message.'); 
else 
{    
    $("#frmSubmit").submit(sendForm); 
       //frmSubmit.submit();    
} 
}   

function sendForm() 
{    
    $.post('DetailInfo.cfm',$("#frmSubmit").serialize(),function(data,status){  
     $("#result").html(data) 
    }); 
    alert('Email Sent'); 
    return false 
}  
</script> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Email Test</title> 
</head> 

<body> 

<cfif isdefined("form.txtBody")> 
    <CFMAIL [email protected] 
    [email protected] 
    SUBJECT= "Thank you for submitting the information">Message below sent from user #Session.UserID# , the info to be updated is the following: 

    #form.txtBody# 

    </CFMAIL> 

<cfelse> 

    <form method="post" name="frmSubmit" id="frmSubmit" action="DetailInfo.cfm"> 
          <table id="tblError" name="tblError" >   
          <tr><td colspan="2" class="ui-widget-content" align="center">Suggested Detail to Submit</td></tr> 
          <tr><td colspan="2" class="ui-widget-content">System does not recognize detail. Please provide a suggested name. Click Send when done.</td></tr> 
          <tr><td colspan="2" class="ui-widget-content" valign="top">Comments: </td></tr> 
          <tr><td class="ui-widget-content" ><textarea cols="75" rows="5" id="txtBody" name="txtBody" class="ui-widget-content"></textarea></td><td class="ui-widget-content" ><input type="button" id="btnSubmit" value="Send" class="ui-widget-content" align="middle" onclick="SubmitForm();" /></td></tr> 
        <tr><td class="ui-widget-content" colspan="2" align="center"><div id="dvMessage"></div></td></tr> 
        </table></form> 
    </cfif>      
</body> 
</html> 

我使用這種方法引起這種頁面是要在一個模式窗口打開理想了,我不希望父頁面消失,當我發帖。也僅用於測試我硬編碼的電子郵件地址。

問題是,當我把一個正常的通過註釋掉在線提交:

frmSubmit.submit(); 

形式職位電子郵件,我得到它。不過,我試圖使用上面的方法,而當我點擊發送,沒有什麼會發生視覺(這很好),但電子郵件不會發送。

我似乎無法得到這個通過

$("#frmSubmit").submit(sendForm); 

另一個建議我被告知代碼火是使用preventDefault,但我想,在代碼的一些地方和沒」工作。

任何想法爲什麼電子郵件不會出去?很多幫助表示讚賞。這是一個真正簡單的頁面,應該盡我所能,但我的JQuery和AJAX體驗有點受限,爲什麼這不起作用。

感謝

+0

你在做一個AJAX後,以同樣的.CFM文件中的代碼? – 2014-09-19 19:17:42

+0

似乎很奇怪,爲什麼使用ajax如果邏輯在同一個文件中。如果你想通過ajax – Lance 2014-09-19 19:48:41

+0

Scott,那麼我會把電子郵件的邏輯放在一個cfc中,呃......我想是這樣嗎?它會發布到相同的頁面,如你所見。蘭斯我正在使用這種方法導致頁面在模態窗口中打開,如果以另一種方式完成後,將導致父窗體消失。我希望頁面在發佈時保持加載狀態。如果有更好的方法來做到這一點,請隨時通知我。謝謝! – EXL 2014-09-19 20:06:27

回答

0

創建2頁,form.cfm的形式,並action.cfm行動(當阿賈克斯從表單頁面調用發送郵件)。

這裏是您form.cfm

<html> 

<head> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 

    <script> 

     function SubmitForm(){ 

      $.ajax({ 
       type: "POST", 
       url: "action.cfm", 
       data: $("#frmSubmit").serialize(), 
       dataType: "text", 
       success: function(data, status) { 
        alert(data); 
        console.log(status); 
       } 
      }); 

     }; 

    </script> 

    <title>Email Test</title> 

</head> 

<body> 

    <form method="post" name="frmSubmit" id="frmSubmit" action="DetailInfo.cfm"> 
     <table id="tblError" name="tblError" >   
      <tr><td colspan="2" class="ui-widget-content" align="center">Suggested Detail to Submit</td></tr> 
      <tr><td colspan="2" class="ui-widget-content">System does not recognize detail. Please provide a suggested name. Click Send when done.</td></tr> 
      <tr><td colspan="2" class="ui-widget-content" valign="top">Comments: </td></tr> 
      <tr><td class="ui-widget-content" ><textarea cols="75" rows="5" id="txtBody" name="txtBody" class="ui-widget-content"></textarea></td><td class="ui-widget-content" ><input type="button" id="btnSubmit" value="Send" class="ui-widget-content" align="middle" onclick="SubmitForm();" /></td></tr> 
      <tr><td class="ui-widget-content" colspan="2" align="center"><div id="dvMessage"></div></td></tr> 
     </table> 

    </form>      

</body> 

</html> 

的代碼,這裏是action.cfm

<cfsilent> 
    <cfmail to="[email protected]" from="[email protected]" subject="Thank you for submitting the information"> 

     #form.txtBody# 

    </cfmail> 
    <cfset data = "email sent OK" /> 
</cfsilent><cfoutput>#data#</cfoutput>