Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2010
    Location
    New Jersey USA
    Posts
    81
    Thanks
    13
    Thanked 4 Times in 4 Posts

    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>

  • #2
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    346
    Thanks
    9
    Thanked 51 Times in 50 Posts
    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?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •