EdMacFly
asked on
jQuery Contact Form using CDOSYS - email sent message
I'm building a basic contact form on my website using jQuery. When a user clicks a contact us button, the main page dims before a hidden div with the contact form on it fades into view. The user can hit esc or click away from the form to return back to the main site. To send an email, the contact form calls an asp script which uses CDOSYS and can be seen in the attached code snippet. At present, I have not built any validation. My main issue at the moment is that I would like the code, upon the successful sending of an email, to display an onscreen message confirming the message had been sent and then fade out the contact form and fade back in the main website. How can I get the ASP code and jQuery to work together in this way? TIA, Ed
<%
Set myMail=CreateObject("CDO.Message")
myMail.Subject="Website Enquiry"
myMail.From="test@email.com"
myMail.To="test@email.com"
myMail.TextBody="This is a test message by the IT goblin. Please ignore as he will delte it in a bit :)"
myMail.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/sendusing")=2
'Name or IP of remote SMTP server
myMail.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/smtpserver")="mail.onesmarthost.co.uk"
'Server port
myMail.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/smtpserverport")=25
myMail.Configuration.Fields.Update
myMail.Send
set myMail=nothing
Response.Write("your email has been sent!")
%>
ASKER
Thanks for the response. The jQuery is purely used to display the hidden contact form. What I think I want to be able to do is to get the response.write part of the asp to call a jQuery function to repeat the fade out code. I have attached the relevant section of the html code to this post and will add the jQuery below - (the jQuery is borrowed code :)).
<a href="#" id="contactUs2">test@website.com</a>
ASKER
Borrowed jQuery.
/***************************/
//@Author: Adrian "yEnS" Mato Gondelle
//@website: www.yensdesign.com
//@email: yensamg@gmail.com
//@license: Feel free to use it, but keep this credits please!
/***************************/
//SETTING UP OUR POPUP
//0 means disabled; 1 means enabled;
var popupStatus = 0;
//loading popup with jQuery magic!
function loadPopup() {
//loads popup only if it is disabled
if (popupStatus == 0) {
jQuery("#background-popup").css({
"opacity": "0.7"
});
jQuery("#background-popup").fadeIn("slow");
jQuery("#contact-form-frame").fadeIn("slow");
popupStatus = 1;
}
}
//disabling popup with jQuery magic!
function disablePopup() {
//disables popup only if it is enabled
if (popupStatus == 1) {
jQuery("#background-popup").fadeOut("slow");
jQuery("#contact-form-frame").fadeOut("slow");
popupStatus = 0;
}
}
//CONTROLLING EVENTS IN jQuery
jQuery(document).ready(function() {
//LOADING POPUP
//Click the button event!
jQuery("#contactUs1").click(function() {
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
jQuery("#popupContactClose").click(function() {
disablePopup();
});
//Click out event!
jQuery("#background-popup").click(function() {
disablePopup();
});
//Press Escape event!
jQuery(document).keypress(function(e) {
if (e.keyCode == 27 && popupStatus == 1) {
disablePopup();
}
});
//LOADING POPUP
//Click the button event!
jQuery("#contactUs2").click(function() {
//load popup
loadPopup();
});
//CLOSING POPUP
//Click the x event!
jQuery("#popupContactClose").click(function() {
disablePopup();
});
//Click out event!
jQuery("#background-popup").click(function() {
disablePopup();
});
//Press Escape event!
jQuery(document).keypress(function(e) {
if (e.keyCode == 27 && popupStatus == 1) {
disablePopup();
}
});
});
Hi dear. the above code will be used at last.
As per my understanding, your code is capable of sending mails.
What is want is after sending the mail, you want to alert the user.
If the above assumption is correct? Please tell me how you are calling this server page(asp) to send mail?
As per my understanding, your code is capable of sending mails.
What is want is after sending the mail, you want to alert the user.
If the above assumption is correct? Please tell me how you are calling this server page(asp) to send mail?
ASKER
My apologies! The code below is the "hidden form" on my main page that holds the contact form and is where the ASP code is called.
<!--Hidden contact form-->
<div id="background-popup"></div>
<div id="contact-form-frame">
<div id="contact-form-swoosh"></div>
<div id="contact-form-wf"></div>
<div id="contact-form-content">
<form method="post" action="http://www.website.com/asp/contact.asp">
<img src="images/contact_us.png" alt="Contact Us"/>
<br />
<br />
<table>
<tr>
<td class="left"><label for="Name">Name: </label></td>
<td><input type="text" name="Name" /></td>
</tr>
<tr>
<td class="left"><label for="Email">Email: </label></td>
<td><input type="text" name="Email" /></td>
</tr>
</table>
<br />
<table>
<tr>
<td class="left"><label for="Message">Message:</label></td>
</tr>
<tr>
<td><textarea name="Message" class="message" rows="8" cols="120"></textarea></td>
</tr>
</table>
<br />
<input type="reset" name="Reset" value="Reset" />
<input name="send" type="submit" value="Submit" />
</form>
</div>
</div>
Well okay, thats fine.
Are you redirecting to the page:
http://www.website.com/asp/contact.asp
You are not using AJAX ?
Are you redirecting to the page:
http://www.website.com/asp/contact.asp
You are not using AJAX ?
ASKER
Correct :)
I want to keep it fairly simple so all I really want to do is upon successful sending of an email using the asp script, the jQuery "disablePopup" function is called.
I want to keep it fairly simple so all I really want to do is upon successful sending of an email using the asp script, the jQuery "disablePopup" function is called.
ASKER
Unless there is a better way to do it...
Okay.... Please give me the code that calls the ASP page......................
It might be AJAX/POP-UP/Redirection or anything.
It might be AJAX/POP-UP/Redirection or anything.
i mean where do you call disablePopup?
ASKER
It's in my jQuery file which I posted above.
Okay, i understand your requirement now.
ASP page is as same as HTML page.
You can simply add the jquery files in your ASP.
Please find as below:
ASP page is as same as HTML page.
You can simply add the jquery files in your ASP.
Please find as below:
<!doctype html>
<html lang="en">
<head>
<title>jQuery UI Dialog - Basic modal</title>
<link type="text/css" href="../../themes/base/ui.all.css" rel="stylesheet" />
<script type="text/javascript" src="../../jquery-1.3.2.js"></script>
<script type="text/javascript" src="../../ui/ui.core.js"></script>
<script type="text/javascript" src="../../ui/ui.draggable.js"></script>
<script type="text/javascript" src="../../ui/ui.resizable.js"></script>
<script type="text/javascript" src="../../ui/ui.dialog.js"></script>
<script type="text/javascript" src="../../external/bgiframe/jquery.bgiframe.js"></script>
<link type="text/css" href="../demos.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
bgiframe: true,
height: 140,
modal: true
});
$("#dialog").dialog("option", "buttons", {"Ok": function(){
$(this).dialog("close");
//you can do this to redirect to anyother page
//window.location = "xyz.asp"; // or HTML
}});
});
</script>
</head>
<%
Set myMail=CreateObject("CDO.Message")
myMail.Subject="Website Enquiry"
myMail.From="test@email.com"
myMail.To="test@email.com"
myMail.TextBody="This is a test message by the IT goblin. Please ignore as he will delte it in a bit :)"
myMail.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/sendusing")=2
'Name or IP of remote SMTP server
myMail.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/smtpserver")="mail.onesmarthost.co.uk"
'Server port
myMail.Configuration.Fields.Item _
("http://schemas.microsoft.com/cdo/configuration/smtpserverport")=25
myMail.Configuration.Fields.Update
myMail.Send
set myMail=nothing
'Response.Write("your email has been sent!")
%>
<body>
<div id="dialog" title="Contact">
<br>
<p>Your email has been sent!</p>
</div>
</body>
</html>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Fantastic work! I will give this a go and see how it works out. Thanks for taking the time to do this for me.
ASKER
This code works really well and I can get it to return back to the homepage after a successful email send. However, is there anyway that the ASP can be run without leaving the main contact page?
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Brilliant help from a very generous and knowledgeable expert.
ASKER
Just to add to this, have discovered a really useful jQuery plugin that makes using AJAX dead easy:
http://malsup.com/jquery/form/
http://malsup.com/jquery/form/
Yes, you are correct. It is very simple.
You have got a lot of events also.. (like, before send, after send, before reply, after success, etc,.)
Look at this also:
http://api.jquery.com/jQuery.ajax/
Since you have told "I want to keep it fairly simple", I havent sent you anything in AJAX.
Warm Regards.
You have got a lot of events also.. (like, before send, after send, before reply, after success, etc,.)
Look at this also:
http://api.jquery.com/jQuery.ajax/
Since you have told "I want to keep it fairly simple", I havent sent you anything in AJAX.
Warm Regards.
AJAX?
If so, you will get the response text.
It will contain "your email has been sent". Search using .indexOf and do the operations you like.