Ajax message on coldfusion page with email not firing
A bit new to JQuery and Ajax, but I have a simple post form that I am trying to post using JQUERY to reload the page.
Here's a sample page: 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 TO=somedued@place.com
FROM=anotherplace@some.com
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>
I use this method because this page will ideally open in a modal window, which I don't want the parent page to disappear on submission. Also just for testing purposes, I hardcoded email to and from addresses.
The problem is that I am calling a normal request via the commented line:
frmSubmit.submit();
The form sends an email and I receive it. However, I am trying to use the above method and when I click Submit, nothing happens visually (this is normal), but the email is not sent.
I can't get this to skip the code
$("#frmSubmit").submit(sendForm);
Another suggestion I was told was to use PreventDefault, but I tried that in several places in the code and it didn't work.
Any idea as to why the email isn't coming out? Much help was appreciated. This is a real simple page that should work as far as I know, but my experience with JQuery and AJAX is a little limited as to why it doesn't work.
thank
source to share
Create 2 pages, form.cfm for the form and action.cfm for the action (send an email when calling ajax from the form page).
Here is the code for your 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>
and here is the code for action.cfm
<cfsilent>
<cfmail to="somedued@place.com" from="anotherplace@some.com" subject="Thank you for submitting the information">
#form.txtBody#
</cfmail>
<cfset data = "email sent OK" />
</cfsilent><cfoutput>#data#</cfoutput>
source to share