A MySQL Driven Chat Script - The chat script explained (contd.)
(Page 4 of 6 )
The GetInput functionThis function is responsible for generating the bottom frame of our chat window, and allows the user to enter their message in a text box and send it. If you look at the screen shot shown above, you will also see that the bottom frame contains a “Say” button (to submit the message), a color drop-down list (this lets the visitor choose the color of their message), and several icon-icon buttons.
When we press enter in the text field, or click on the “Say” button, the JavaScript function “doSubmit” is called. This function will make sure that the visitor has actually entered a message. If they have, then the function will get the currently selected color from the drop-down list, and change the value of the text field so that it’s surrounded by <font> and </font> tags. The function will return true, and our form is submitted. If the text field is empty, the browser displays a message box kindly asking the user to enter a message and returns false, stopping the form from being submitted. The code for the “doSubmit” function is shown below:
function doSubmit()
{
if(document.chatform.chat.value == '') {
alert('Please enter some text!');
document.chatform.chat.focus();
return false;
}
document.chatform.chat.value = '<font color="'+document.chatform.col[document.chatform.col.selectedIndex].text+'">'+document.chatform.chat.value+'</font>';
document.chatform.submit();
document.chatform.chat.value = '';
document.chatform.chat.focus();
return true;
}When one of the icon-icon buttons is pressed, the form will call the sendFace JavaScript function, which will automatically send either “:)”, “:(”, or “:D” to the top frame of our chat window. When the top frame receives either of these, the ShowAddPosts function will automatically display an image corresponding to that icon-icon, instead of the “:)”. So, for example, if we entered “:)” in the text field or clicked on the “:)” button, the top frame would display the appropriate icon-icon image, like this:
The images for the icons-icons are included as part of the support material at the end of this article, and should be saved in the same directory as the chat.php script (which is also included as part of the support material).
The code for the entire GetInput function is shown below:
function GetInput() {
global $HTTP_SESSION_VARS;
global $chat;
global $nick;
?>
<form onSubmit="return doSubmit" name="chatform" method="post" action="chat.php" target="posts">
<input type="text" name="chat">
<input type="hidden" name="nick" value="<?php echo $nick; ?>">
<input type="button" onClick="doSubmit()" name="Submit" value="Say">
<select name="col">
<option>Black</option>
<option>Red</option>
<option>Green</option>
<option>Blue</option>
<option>Orange</option>
</select>
<input type="button" name="DoFace1" value=" :) " onClick="sendFace(1)">
<input type="button" name="DoFace2" value=" :( " onClick="sendFace(2)">
<input type="button" name="DoFace3" value=" :D " onClick="sendFace(3)">
<input type="hidden" name="action" value="posts">
</form>
<script language="JavaScript">
function sendFace(faceNum)
{
switch(faceNum)
{
case 1:
document.chatform.chat.value = ':)';
break;
case 2:
document.chatform.chat.value = ':(';
break;
case 3:
document.chatform.chat.value = ':D';
break;
}
document.chatform.submit();
document.chatform.chat.value = '';
}
function doSubmit()
{
if(document.chatform.chat.value == '') {
alert('Please enter some text!');
document.chatform.chat.focus();
return false;
}
document.chatform.chat.value = '<font color="'+document.chatform.col[document.chatform.col.selectedIndex].text+'">'+document.chatform.chat.value+'</font>';
document.chatform.submit();
document.chatform.chat.value = '';
document.chatform.chat.focus();
return true;
}
</script>
<?php
}Next: The chat script explained (contd.) >>
More MySQL Articles
More By Tim Pabst
/ 200 
