Jump to content

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


terungwa

Recommended Posts

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,

Link to comment
Share on other sites

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>
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.';
			}	
		} 
Link to comment
Share on other sites

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.