Is Javascript and AJAX enough to create a Personal Message and Comment-Reply system?

I need to create a Personal Message and Comment-Reply system.

I am currently studying Javascript and AJAX.

This is what I need to do to the systems given:

Personal Message

  • Related to Facebook’s Personal Message system.
  • A simple conversation system where User A reply/sent a message and submit the form.
  • Page will not refresh in every form is submitted (from what I learned this can be done using Javascript and AJAX only).
  • The div wrapper where the whole conversation contained will be refreshed every 8 seconds (for example).

Comment-Reply

  • Related to Youtube’s comment-reply system.
  • Page will not refresh when a comment and/or reply form is submitted.
  • The div wrapper that contains the whole comment and reply will be refreshed in every 8 seconds (for example).

Is this possible? I searched for “submit form without refreshing using ajax only” but everything (5 or more) I searched for are using JQuery.

If this is possible, what is the logic of how I can do it? Should I make a Javascript function to refresh the div wrapper and get the data every 8 seconds first? Or Submit the form without refreshing the whole page (Personal Message and Comment-Reply system) first then refresh the div wrapper and get the data every 8 seconds?

it’s possible but you’ll need some php code as well. If you want, I can provide you some code. It’s a contact form, but it uses javascript, php and ajax to validate and send the form info without refreshing the page. It may be a good start for ya.

I am okay with some PHP as I am using it for some time now. I will gladly accept your offer, how can I see your code? Thanks.

This form has a little extra tweaks to help combat spam, but here’s the form that’s on contact.html:

<form method="post" action="" enctype="multipart/form-data" id="contact">
      	<div id="response"></div>
      	<div class="form-group">
        	<label for="name">Your Name:</label>
          <input type="text" name="name" id="name" class="form-control" placeholder="Jesse James">
        </div>
        <div class="form-group">
        	<label for="email">Email:</label>
          <input type="email" name="email" id="email" class="form-control" placeholder="howCan@weReachYou.com">
        </div>
        <div class="form-group">
        	<label for="phone">Phone:</label>
          <input type="tel" name="phone" id="phone" class="form-control" placeholder="734-968-4509">
        </div>
        <div class="form-group">
        	<label for="message">Message</label>
        	<textarea class="form-control" id="message" name="message" rows="6" placeholder="How can we help...?"></textarea>
        </div>
      	<button type="submit" name="submit" id="submit" class="btn btn-default">Send It</button>
        <input type="hidden" name="honeypot" id="honeypot" value="http://">            
        <input type="hidden" name="humancheck" id="humanCheck" class="clear" value="">
      </form>
<script src="js/jquery.min.js"></script>
<script src="js/ajax_submit.js"></script>

ajax_submit.js is a little hacked up as i try all types of forms using this same platform, but here it is:

$(document).ready(function() {
//here i'm adding in the <...action="/php/feedback.php"...> to the form
	$('#contact input:submit').click(function() {
		$('#contact form').attr('action', 'http://' + document.domain + '/php/feedback.php');
		$('#contact form').submit();
	});

	$('form #response').hide();
	$('form #nameResponse').hide();
	$('form #phoneResponse').hide();
	$('form #emailResponse').hide();
	$('form #messageResponse').hide();
	$('#submit').click(function(e) {

		// prevent forms default action until
		// error check has been performed
		e.preventDefault();

		// grab form field values
		var valid = '';
		var nameResponse = '';
		var phoneReponse = '';
		var emailResponse = '';
		var messageResponse = '';
		var required = ' is required.';
		var name = $('form #name').val();
		var phone = $('form #phone').val();
		var email = $('form #email').val();
		var message = $('form #message').val();
		var honeypot = $('form #honeypot').val();
		var humanCheck = $('form #humanCheck').val();

		// perform error checking
		if (name = '' || name.length <= 2) {

			nameResponse = '<p>Your name' + required +'</p>';	

		}
		
		if (phone ) {
			
		}
		
		if (!email.match(/^([a-z0-9._-]+@[a-z0-9._-]+\.[a-z]{2,4}$)/i)) {

			emailResponse += '<p>Your email' + required +'</p>';												  

		}

		if (message = '' || message.length <= 5) {

			messageResponse += '<p>A message' + required + '</p>';	

		}	

		if (honeypot != 'http://') {

			valid += '<p>Spambots are not allowed.</p>';	

		}

		if (humanCheck != '') {

			valid += '<p>A human user' + required + '</p>';	

		}

	// let the user know if there are erros with the form

		if (valid != '') {
			

			$('form #response').removeClass().addClass('error')
				.html('<div class="alert alert-danger">'+
					'<strong>Please correct the errors below.</strong>' + '</div>'
							).fadeIn('fast');
							
			if (nameResponse != '') {
					$('form #nameResponse').removeClass().addClass('error')
						.html('<div class="alert alert-danger">'+
							nameResponse + '</div>'
								).fadeIn('fast');
			}
			
			if (phoneResponse != '') {
					$('form #nameResponse').removeClass().addClass('error')
						.html('<div class="alert alert-danger">'+
							phoneResponse + '</div>'
								).fadeIn('fast');
			}
			
			if (emailResponse != '') {
					$('form #nameResponse').removeClass().addClass('error')
						.html('<div class="alert alert-danger">'+
							emailResponse + '</div>'
								).fadeIn('fast');
			}
			
			if (messageResponse != '') {
					$('form #nameResponse').removeClass().addClass('error')
						.html('<div class="alert alert-danger">'+
							messageResponse + '</div>'
								).fadeIn('fast');
			}

		}
		// let the user know something is happening behind the scenes
		// serialize the form data and send to our ajax function
		else {

			$('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('fast');										

			var formData = $('form').serialize();
	
			submitForm(formData);			

		}

	});
	
});

function submitForm(formData) {
	$.ajax({
		
		type:			'POST',
		url:			'php/feedback.php',
		data:			formData,
		dataType:	'json',
		cache:		false,
		timeout:	7000,
		success:	
		function(data) {
			//we are getting data.error (from ajax, which is formData) and data.msg from our feedback.php
			$('form #response').removeClass().addClass((data.error === true) ? 'error':'success')
										.html(data.msg).fadeIn('fast');
			if ($('form #response').hasClass('success')) {
				setTimeout ("$('form #response').fadeOut('fast')",5000);
			
			$('form') [0].reset();
			}
		},
		error: 
		function (XMLHttpRequest, textStatus, errorThrown) {
			$('form #response').removeClass().addClass('error')
						.html('<div class="alert alert-danger">' +
							'<p>There was an <strong>' + errorThrown + 
									'</strong> error due to a <strong>' + textStatus +
										'</strong> condition.</p>' +
											'</div>').fadeIn('fast');
		}
		
		
		
	});
};

And finally the php, again sorry it’s hacked up but i think you’ll get the idea (note that if using this code in its current form, make sure to put the php file in a folder called ‘php’ or change the ajax_submit.js to the path to your php file):

<?php 
sleep(.5);
//Sanitize incoming data and store in variable
$name = trim(stripslashes(htmlspecialchars($_POST['name'])));	  		
$email = trim(stripslashes(htmlspecialchars($_POST['email'])));
$phone = trim(stripslashes(htmlspecialchars($_POST['phone'])));
$phoneLink = preg_replace('/\D+/', '', $phone);
$message = trim(stripslashes(htmlspecialchars($_POST['message'])));	    
$humancheck = $_POST['humancheck'];
$honeypot = $_POST['honeypot'];

if ($honeypot == 'http://' && empty($humancheck)) {	
		
		//Validate data and return success or error message
		$error_message = '';	
		$reg_exp = "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/";
		
		if (!preg_match($reg_exp, $email)) {
				    
					$error_message .= "<p>A valid email address is required.</p>";			   
		}
		if (empty($name)) {
				   
				    $error_message .= "<p>Please provide your name.</p>";			   
		}			
		if (empty($message)) {
					
					$error_message .= "<p>A message is required.</p>";
		}		
		if (!empty($error_message)) {
					$return['error'] = true;
					$return['msg'] = '<div class="alert alert-danger">'."<h3>Oops! The request was successful but your form is not filled out correctly.</h3>".$error_message;					
					echo json_encode($return);
					exit();
		} 
		
		else {
			//mail variables
			
			$to =			'your@emailAddress.com';
			$from = $_POST['email'];
			$headers =	'From: '.$from."\r\n";
			$headers .=	'MIME-Version: 1.0' . "\r\n";
			$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
			$subject = 	"Contact Form Submission\n";
			

			$body =			'<p>Name:   '.$name."</p>";
			$body	.=		'<p>Email:  '."<a href=\"mailto:".$email.'"'.">".$email."</a>"."</p>";
			if(isset ($phone) && $phone != '') {
				$body .=	'<p>Phone: '.'<a href="tel:+1'.$phoneLink.'"'.$phone.'>'.$phone."</a>";
			}
			
			$body .=		'<p>Message:   '.$message."</p>";
			
			//send email and return a message to user
			if(mail($to, $subject, $body, $headers)) {	
				$return['error'] = false;
				$return['msg'] = 
					'<div class="alert alert-success">'.
						"<h3>Thanks for your feedback " .$name ."</h3>".
						"<p>We'll reply to you at ".$email." as soon as we can.</p>";
						 
						echo json_encode($return);
			}
			else {
				
				$return['error'] = true;
				$return['msg'] = "<h3>Oops! There was a problem sending the email. Please try again.</h3>";	
				echo json_encode($return);
			}

		}
				
} 
else {
	
	$return['error'] = true;
	$return['msg'] = "<h3>Oops! There was a problem with your submission. Please try again.</h3>";	
	echo json_encode($return);
}
	
?> 


hope you can follow the same logic to get your comment system going!

If you don’t feel like building your own from the ground up, take a look at https://disqus.com/

happy coding :slight_smile:

2 Likes

Thanks for this mainstwebguy1, I will study about your code, currently, I am studying the Javascript and AJAX so it make awhile to update this question, thank you very much!

I saw a jQuery, so it’s impossible without jQuery?

jquery is javascript. It’s now become a fundamental part of html5 development. IMHO, I think you’ll pick it up pretty quickly, especially if you’ve worked with javascript as the syntax is very similar.

In the world of computer/internet development… NOTHING is impossible :slight_smile:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.