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!")
%>

Open in new window

EdMacFlyAsked:
Who is Participating?
 
StealthyDevConnect With a Mentor Commented:
Note:

I have used JQuery-UI v1.7.2.
Can be downloaded at http://jqueryui.com/

I have placed the code to test at:
jquery-ui-1.7.2.custom\development-bundle\demos\dialog

Best regards.
0
 
StealthyDevCommented:
How are you calling this ASP page using JQuery?

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.
0
 
EdMacFlyAuthor Commented:
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>

Open in new window

0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
EdMacFlyAuthor Commented:
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();
        }
    });

});

Open in new window

0
 
StealthyDevCommented:
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?
0
 
EdMacFlyAuthor Commented:
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>

Open in new window

0
 
StealthyDevCommented:
Well okay, thats fine.

Are you redirecting to the page:
http://www.website.com/asp/contact.asp

You are not using AJAX ?
0
 
EdMacFlyAuthor Commented:
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.
0
 
EdMacFlyAuthor Commented:
Unless there is a better way to do it...
0
 
StealthyDevCommented:
Okay.... Please give me the code that calls the ASP page........................

It might be AJAX/POP-UP/Redirection or anything.
0
 
StealthyDevCommented:
i mean where do you call disablePopup?
0
 
EdMacFlyAuthor Commented:
It's in my jQuery file which I posted above.
0
 
StealthyDevCommented:
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:


<!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>

Open in new window

0
 
EdMacFlyAuthor Commented:
Fantastic work! I will give this a go and see how it works out. Thanks for taking the time to do this for me.
0
 
EdMacFlyAuthor Commented:
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?
0
 
StealthyDevConnect With a Mentor Commented:
Yes, AJAX should be used.

Or use a hidden iFrame or a FrameSet..

0
 
EdMacFlyAuthor Commented:
Brilliant help from a very generous and knowledgeable expert.
0
 
EdMacFlyAuthor Commented:
Just to add to this, have discovered a really useful jQuery plugin that makes using AJAX dead easy:

http://malsup.com/jquery/form/
0
 
StealthyDevCommented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.