Go Back   CodingForums.com > :: Client side development > JavaScript programming

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 10-08-2012, 09:10 PM   PM User | #1
connollyc4
New Coder

 
Join Date: Mar 2010
Location: New Jersey USA
Posts: 74
Thanks: 11
Thanked 4 Times in 4 Posts
connollyc4 is an unknown quantity at this point
LiveChat. How to replace a text box with a dropdown of user names?

Instead of typing any name in a text box, how can I implement this so a user needs to select their name from a drop down menu. (too many people have been creating fake names so I would like a list of names that one must be selected.

Also, Any idea how to make it so if a user enters the chat it says User: Frank Sanders has entered the chat?

Let me know if I need to move this to a PHP forum



For example:
Code:
<option value="Pick Your Name">Pick Your Name</option>
<option value="Frank Sanders">Frank Sanders</option>
<option value="Lary Brook">Lary Brook</option>
<option value="Simon Conway">Simon Conway</option>
My code is below.

index.php
Code:
<?
session_start();

if(isset($_GET['logout'])){	
	
	//exit message
	$fp = fopen("log.html", 'a');
	fwrite($fp, "<div class='msgln'><i>User ". $_SESSION['name'] ." has left the chat session.</i><br></div>");
	fclose($fp);
	
	session_destroy();
	header("Location: index.php"); //Redirect the user
}

function loginForm(){
	echo'
	<div id="loginform">
	<form action="index.php" method="post">
		<p>Please enter your name to continue:</p>
		<label for="name">Name:</label>
		<input type="text" name="name" id="name" />
		<input type="submit" name="enter" id="enter" value="Enter" />
	</form>
	</div>
	';
}

if(isset($_POST['enter'])){
	if($_POST['name'] != ""){
		$_SESSION['name'] = stripslashes(htmlspecialchars($_POST['name']));
	}
	else{
		echo '<span class="error">Please type in a name</span>';
	}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Live Chat</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>

<?php
if(!isset($_SESSION['name'])){
	loginForm();
}
else{
?>
<div id="wrapper">
	<div id="menu">
		<p class="welcome">Welcome, <b><?php echo $_SESSION['name']; ?></b></p>
		<p class="logout"><a id="exit" href="#">Exit Chat</a></p>
		<div style="clear:both"></div>
	</div>	
	<div id="chatbox"><?php
	if(file_exists("log.html") && filesize("log.html") > 0){
		$handle = fopen("log.html", "r");
		$contents = fread($handle, filesize("log.html"));
		fclose($handle);
		
		echo $contents;
	}
	?></div>
	
	<form name="message" action="">
		<input name="usermsg" type="text" id="usermsg" size="63" />
		<input name="submitmsg" type="submit"  id="submitmsg" value="Send" />
	</form>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
// jQuery Document
$(document).ready(function(){
	//If user submits the form
	$("#submitmsg").click(function(){	
		var clientmsg = $("#usermsg").val();
		$.post("post.php", {text: clientmsg});				
		$("#usermsg").attr("value", "");
		return false;
	});
	
	//Load the file containing the chat log
	function loadLog(){		
		var oldscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
		$.ajax({
			url: "log.html",
			cache: false,
			success: function(html){		
				$("#chatbox").html(html); //Insert chat log into the #chatbox div				
				var newscrollHeight = $("#chatbox").attr("scrollHeight") - 20;
				if(newscrollHeight > oldscrollHeight){
					$("#chatbox").animate({ scrollTop: newscrollHeight }, 'normal'); //Autoscroll to bottom of div
				}				
		  	},
		});
	}
	setInterval (loadLog, 2500);	//Reload file every 2.5 seconds
	
	//If user wants to end session
	$("#exit").click(function(){
		var exit = confirm("Are you sure you want to end the session?");
		if(exit==true){window.location = 'index.php?logout=true';}		
	});
});
</script>
<?php
}
?>
</body>
</html>
connollyc4 is offline   Reply With Quote
Old 10-09-2012, 10:01 AM   PM User | #2
hdewantara
Regular Coder

 
hdewantara's Avatar
 
Join Date: Aug 2009
Location: Jakarta, Indonesia.
Posts: 287
Thanks: 4
Thanked 39 Times in 39 Posts
hdewantara is an unknown quantity at this point
Interesting.

I see that the log.html itself is the content of #chatbox? So it can't be used to detect which user(name) are currently logged in.

Maybe you need another simple text/ xml file which stores these logged-in names; retrieve/update it at the same time you load log.html (each 2.5 seconds).

But I wonder whether that would put another burden on your server?
hdewantara is offline   Reply With Quote
Reply

Bookmarks

Tags
dropdown, javascrip, php

Jump To Top of Thread


Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off

Forum Jump


All times are GMT +1. The time now is 07:50 AM.


Advertisement
Log in to turn off these ads.