Chatbox problemen...
als aller eerst, sorry voor mijn tweede ('spambericht')!
maar ik zit met nog een probleem, ik heb een chatbox die het goed doet,
alleen zit er een bug in. Als je enter in blijft drukken dan spam je je naam in de chat-box,
nu wil ik dat als je enter indrukt en je hebt niks in de input ingevult dat er dan niks geplaatst wordt in de chat-box.
Weet iemand hoe ik dit moet doen? Hier is de code:
Writechat.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<?php
session_start();
if (isset($_SESSION['username'])) {
$text = $_POST['text'];
$date = date('H:i:s');
$handle = fopen("messages.html", 'a+');
fwrite($handle, '<div class="message"><span class="name">' . $_SESSION['username'] . ': </span>' . stripslashes(htmlspecialchars($text)) . '<span class="right">'.$date .'</span></div>');
fclose($handle);
}
?>
session_start();
if (isset($_SESSION['username'])) {
$text = $_POST['text'];
$date = date('H:i:s');
$handle = fopen("messages.html", 'a+');
fwrite($handle, '<div class="message"><span class="name">' . $_SESSION['username'] . ': </span>' . stripslashes(htmlspecialchars($text)) . '<span class="right">'.$date .'</span></div>');
fclose($handle);
}
?>
index.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<?php
// <a href="index.php?user=logout" id="logout"><h2>Logout</h2></a></div>
include 'functions.php';
if (isset($_GET['user']))
$user = $_GET['user'];
else
$user = '';
sessionMaintain($user);
?>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>J-B Bloggers | Chatbox</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-1.7.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("body").on("submit", "form#chat-form", function (e){
e.preventDefault();
var message = $("#chatmessage").val();
$.post("writechat.php", {text: message});
$("#chatmessage").val('');
return false;
});
function loadContent (){
var oldHeight = $("#chatwindow").prop("scrollHeight")-20;
$.ajax({
url: "messages.html",
cache: false,
success: function(content){
$("#chatwindow").html(content); //Insert chat log into the #chatwindow
var newHeight = $("#chatwindow").prop("scrollHeight") - 20;
if(newHeight > oldHeight){
$("#chatwindow").animate({ scrollTop: newHeight }, 'slow'); //Autoscroll to bottom of div
}
}
});
}
setInterval(loadContent, 100);
});
</script>
<?php // mod edit CSS verwijderd ?>
</head>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<img src="./img/find_friends_logo.png" />
</div>
<div class="search_box">
<form action="search.php" method="GET" id="search">
<input type="text" name="q" size="60" placeholder="Zoeken ..." maxlength="38" />
</form>
</div>
<div id="menu">
<a href="index.php" />Home</a>
<a href="http://localhost/Over ons.php" />Over ons</a>
<a href="Forum.php" />Forum</a>
<a href="Vlogs.php" />Vlogs</a>
<a href="Contact.php" />Contact</a>
</div>
</div>
<div id="chatwrapper">
<?php
if (!isset($_SESSION['username'])) {
?>
<?php } else { ?>
<div id="chattitle">
<div class="welcome">
<h2>Welkom: <?php echo $_SESSION['username']; ?></h2>
</div>
<div class="exit">
<a href="http://localhost/member.php" id="logout"><h2>Terug</h2></a></div>
</div>
<div id="chatwindow">
</div>
<div id="chatform">
<form id="chat-form" action="#">
<input type="text" id="chatmessage" name ="message" style="width: 445px; height: 39px; margin: 0px; padding-left: 10px;" />
<input type="submit" id="send" value="Send" style="margin: 0px; height: 51px; border-radius: 0px; width: 105px; padding: 0px;"/>
</form>
</div>
<?php } ?>
</div>
// <a href="index.php?user=logout" id="logout"><h2>Logout</h2></a></div>
include 'functions.php';
if (isset($_GET['user']))
$user = $_GET['user'];
else
$user = '';
sessionMaintain($user);
?>
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>J-B Bloggers | Chatbox</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="jquery-1.7.2-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("body").on("submit", "form#chat-form", function (e){
e.preventDefault();
var message = $("#chatmessage").val();
$.post("writechat.php", {text: message});
$("#chatmessage").val('');
return false;
});
function loadContent (){
var oldHeight = $("#chatwindow").prop("scrollHeight")-20;
$.ajax({
url: "messages.html",
cache: false,
success: function(content){
$("#chatwindow").html(content); //Insert chat log into the #chatwindow
var newHeight = $("#chatwindow").prop("scrollHeight") - 20;
if(newHeight > oldHeight){
$("#chatwindow").animate({ scrollTop: newHeight }, 'slow'); //Autoscroll to bottom of div
}
}
});
}
setInterval(loadContent, 100);
});
</script>
<?php // mod edit CSS verwijderd ?>
</head>
<body>
<div class="headerMenu">
<div id="wrapper">
<div class="logo">
<img src="./img/find_friends_logo.png" />
</div>
<div class="search_box">
<form action="search.php" method="GET" id="search">
<input type="text" name="q" size="60" placeholder="Zoeken ..." maxlength="38" />
</form>
</div>
<div id="menu">
<a href="index.php" />Home</a>
<a href="http://localhost/Over ons.php" />Over ons</a>
<a href="Forum.php" />Forum</a>
<a href="Vlogs.php" />Vlogs</a>
<a href="Contact.php" />Contact</a>
</div>
</div>
<div id="chatwrapper">
<?php
if (!isset($_SESSION['username'])) {
?>
<?php } else { ?>
<div id="chattitle">
<div class="welcome">
<h2>Welkom: <?php echo $_SESSION['username']; ?></h2>
</div>
<div class="exit">
<a href="http://localhost/member.php" id="logout"><h2>Terug</h2></a></div>
</div>
<div id="chatwindow">
</div>
<div id="chatform">
<form id="chat-form" action="#">
<input type="text" id="chatmessage" name ="message" style="width: 445px; height: 39px; margin: 0px; padding-left: 10px;" />
<input type="submit" id="send" value="Send" style="margin: 0px; height: 51px; border-radius: 0px; width: 105px; padding: 0px;"/>
</form>
</div>
<?php } ?>
</div>
functions.php:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<?php
function sessionMaintain($user) {
session_start();
if ($user != '') {
if ($user == 'logout') {
$name = $_SESSION['user'];
$string = '<div>user:<span class="name">' . $_SESSION['user'] . '</span> is uitgelogd!</div>';
$filehandle = fopen('messages.html', 'a+');
fwrite($filehandle, $string);
session_destroy();
header('Location:index.php');
fclose($filehandle);
return;
}
if (!isset($_SESSION['user'])) {
$_SESSION['user'] = $user;
$filehandle = fopen('messages.html', 'a+');
$string = '<div><span class="name">' . $_SESSION['user'] . '</span> is ingelogd!</div>';
fwrite($filehandle, $string);
fclose($filehandle);
return;
}
}
}
?>
function sessionMaintain($user) {
session_start();
if ($user != '') {
if ($user == 'logout') {
$name = $_SESSION['user'];
$string = '<div>user:<span class="name">' . $_SESSION['user'] . '</span> is uitgelogd!</div>';
$filehandle = fopen('messages.html', 'a+');
fwrite($filehandle, $string);
session_destroy();
header('Location:index.php');
fclose($filehandle);
return;
}
if (!isset($_SESSION['user'])) {
$_SESSION['user'] = $user;
$filehandle = fopen('messages.html', 'a+');
$string = '<div><span class="name">' . $_SESSION['user'] . '</span> is ingelogd!</div>';
fwrite($filehandle, $string);
fclose($filehandle);
return;
}
}
}
?>
Alvast bedankt voor het antwoord,
Met Vriendelijke Groet: Bas van Assen
Graag in het vervolg bij code, [code] [/code] tags gebruiken. Tevens enkel relevante code plaatsen. CSS is bij deze vraag niet van toepassing en heb ik daarom weggehaald.[/modedit]
Gewijzigd op 28/09/2014 14:53:13 door Bas IJzelendoorn
Alvast bedankt voor het antwoord.
Met Vriendelijke Groet, Bas van Assen
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
$("body").on("submit", "form#chat-form", function (e){
e.preventDefault();
var message = $("#chatmessage").val();
if(message !== '') { //Check of message NIET leeg is
$.post("writechat.php", {text: message});
}
$("#chatmessage").val('');
return false;
});
e.preventDefault();
var message = $("#chatmessage").val();
if(message !== '') { //Check of message NIET leeg is
$.post("writechat.php", {text: message});
}
$("#chatmessage").val('');
return false;
});
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?php
// Als er een formulier wordt verzonden
if($_SERVER['REQUEST_METHOD'] == "POST"){
// controleren of het veld 'bericht' leeg is
if(empty($_POST['bericht'])){
// fout melding dat er geen bericht is ingevuld
echo 'U heeft geen bericht ingevuld!';
}
// als er een bericht is ingeuld dan het stuk waar het bericht wordt toegevoegd
else {
// hier komt het stukje code dat een bericht wordt toegevoegd
}
}
?>
// Als er een formulier wordt verzonden
if($_SERVER['REQUEST_METHOD'] == "POST"){
// controleren of het veld 'bericht' leeg is
if(empty($_POST['bericht'])){
// fout melding dat er geen bericht is ingevuld
echo 'U heeft geen bericht ingevuld!';
}
// als er een bericht is ingeuld dan het stuk waar het bericht wordt toegevoegd
else {
// hier komt het stukje code dat een bericht wordt toegevoegd
}
}
?>
je formulier zou er dan als volgt uitzien:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
<form id="chat-form" action="" method="post">
<input type="text" id="chatmessage" name ="message" style="width: 445px; height: 39px; margin: 0px; padding-left: 10px;" />
<input type="submit" id="send" value="Send" style="margin: 0px; height: 51px; border-radius: 0px; width: 105px; padding: 0px;"/>
</form>
Hierbij zie je dat de method 'post' is toegevoegd. Dit verwijst terug naar het stukje PHP code 'REQUEST_METHOD'.
<input type="text" id="chatmessage" name ="message" style="width: 445px; height: 39px; margin: 0px; padding-left: 10px;" />
<input type="submit" id="send" value="Send" style="margin: 0px; height: 51px; border-radius: 0px; width: 105px; padding: 0px;"/>
</form>
Hierbij zie je dat de method 'post' is toegevoegd. Dit verwijst terug naar het stukje PHP code 'REQUEST_METHOD'.