Adding a “Mail Sending…” notification when sending form data using ajax requests

[terungwa]

In my mail sending script powering my contact form, the mail sending action can take some time, during this time the user doesn't know what happens. So, I wanted to add a "Mail Sending..." notification.  While my application is working fine. When I added the notification module, the notification is not appearing.

 

I shall appreciate a way out on how to resolve this. Find below the AJAX script and html form code.

<script>
  $(document).ready(function(){
    $('#submit').click(function(){
	$.post("send.php", $("#mycontactform").serialize(),  function(response) {  
	  $('#success').html(response);
        });
     return false;
    });
 });
</script> 

And this is the contact form html code:

<form action="" method="post" id="mycontactform" >
	<label for="name">Name:</label><br />
	<input type="text" name="name" id="name" /><br />
	<label for="email">Email:</label><br />
	<input type="text" name="email" id="email" /><br />
	<label for="message">Message:</label><br />
	<textarea name="message" id="message"></textarea><br />
	<input type="button" value="send" id="submit" />
	<div id="success" style="color:red;"></div>
</form>

I read up on the .ajaxStart( handler() ) event on https://api.jquery.com/ajaxStart/,  but implementing this solution which i thought may solve the problem is not working:

$(document).ready(function(){
	$('#submit').click(function(){
		$.post("send.php", $("#mycontactform").serialize(),  function(response) {   
		 $('#success').html(response);
		});
		return false;
	});
      $( document ).ajaxStart(function() {
     $( "#success" ).show('Mail Sending, Please Wait');
      });
});

Kindly assist.

 

Thanks,

[jazzman1]

You would create two hidden divs.When the button was clicked set the visibility of the first div to "visible", when the content received from the server to client (browser) hide the first div and display the second. 

Note: Instead a text message you can hire some graphic designer or just search on the web for animated elements like .gif with similar content. 

Try,

<script>
  $(document).ready(function(){
    $('#submit').click(function(){
     $("#sending").css("visibility", "visible");
     $.post("chat.php", $("#mycontactform").serialize(),  function(response) {
                 $("#sending").css("visibility", "hidden");
		 $('#success').html(response);
                 $("#receiving").css("visibility", "visible").delay(3200).fadeOut(1000);
		});
     return false;
    });
 });
</script> 
<form action="freaks.php" method="post" id="mycontactform" >
	<label for="name">Name:</label><br />
	<input type="text" name="name" id="name" /><br />
	<label for="email">Email:</label><br />
	<input type="text" name="email" id="email" /><br />
	<label for="message">Message:</label><br />
	<textarea name="message" id="message"></textarea><br />
	<input type="button" value="send" id="submit" />
</form>
<div style="visibility: hidden" id="sending">Sending email........</div>
<div style="visibility: hidden" id="receiving">Your email has been sent........</div>
<div id="success" style="color:red;"></div>

[terungwa]

Thank you jazzman1 for the reply, here are my observations when i implemented your proposed solution;

• The sending and receiving events get fired at the same time when my form validation is taking place.
• The #success div thus displays error messages ( that prevent the mail from being sent) even though the ajax request has fired both the sending and receiving events.
• i have set up a sandbox at this url http://portal.virtualweb.com.ng/.

I would appreciate it if you can check it out and let me know what i am doing wrong.

 

Thanks.

[dalecosp]

No sandbox at said URL....

[terungwa]

Hi dalescosp, their is a blue contact button to the left side of your screen. when you click on that, it slides out the contact form.

http://portal.virtualweb.com.ng/.

 

Thanks for your reply.

Edited April 15, 2014 by terungwa

[dalecosp]

Ah, I see now.

First thing that happens here in Chrome is that "chat.php" is 404.....

[terungwa]

@dalecosp, I have fixed that. Please check again.

[terungwa]

YOu will notice the error when you click on the 'send mail' button without entering any data. My form validation is handled by php and not javascript.

 

This is the form processing script below;

$phone=$_POST['phone'];
$email=$_POST['email'];
$clean_email=filter_var($email, FILTER_VALIDATE_EMAIL);
$name = filter_var($_POST['user_name'], FILTER_SANITIZE_STRING);
$message = $_POST['message'];
$max_message_length=200;
$min_message_length=20;
$loadtime = $_POST['loadtime'];
// stop script if mail is sent within 5 secs of page load. 
if($totaltime < 5)
	{
	   echo("Mail throttling forbidden. Please wait for 5 secs.");
	   exit();
	}
// process the form if name is filled 
   if(empty($name))
	{
		echo 'What is your name?';
		exit();
	}
// process the form only if the email is valid 
    if (empty($clean_email))
	{
		echo 'Please provide an valid email.';
		exit();
	}
	if(empty($message))
	{
		echo 'Please type your message.';
		exit();
	}
	//message should not be longer than 200 characters.
	if (strlen($message) > $max_message_length)
	{
		echo 'Message is too long (>200 xters).';
		exit();
	}
	//message should not be longer than 200 characters.
	if (strlen($message) < $min_message_length)
	{
		echo 'Message is too short (<20 xters).';
		exit();
	}
	if ($clean_email) {
        $to =   'test@yahoo.com';
	$subject = 'the subject';
	$message = 'FROM: '.$name.' Email: '.$email.'Message: '.$message;
	$headers = 'From: youremail@domain.com' . "\r\n";
        $sent = mail($to, $subject, $message, $headers); //This method sends the mail.	
			if ($sent){ 
				echo 'Your message has been sent.';
			}	
		} 

[dalecosp]

Dunno if I notice an "error" or not.  I understand what's happening behind the scenes, I think, based on what the form is saying.  

My only comment would be that I'd probably use one DIV for "feedback" purposes and replace the innerHTML with the server response or string "Sending..." based on the responses I was getting back from send.php....

[terungwa]

Ok Thanks, i shall try that out and see how it runs.