输入发送空消息

Question

I'm making live chatter for my project, and I need this script to recognize this:

• If clientmsg is empty, it will call out an error and won't post the message.
• If clientmsg has more than 3 or 4 chars (letters) - it will post the message.

The code:

$("#submitmsg").click(function(){   
    var clientmsg = $("#usermsg").val();
    $.post("post3.php", {text: clientmsg});             
    $("#usermsg").attr("value", "");
    return false;
});

I can't find out how this works.

Here you can see the whole code for it.

index.php

<?php
/*****************************
    File: index.php
    Written by: exZerry development crew
******************************/
session_start();

if (isset($_SESSION['loggedin']) && $_SESSION['loggedin'] == true) {
    echo "";
} else {
    header ("Location: login.php");
}
require('includes/config.php');
echo $sOutput;

if(isset($_POST['enter'])){
    if($_POST['username'] != ""){
        $_SESSION['username'] = stripslashes(htmlspecialchars($_POST['username']));
    }
    else{
        echo '<span class="error">Please type in a name</span>';
    }
}
?>
<style type="text/css">

input { 
    font: 12px;
}
.loginbox {
    background-image: url(bar.png);
    width: 100%;
    height: 100%;
    margin-top: -38;
}
#loginform { 
    font:16px dinpro;
    color: #ffffff;
    margin-top: 100;
}
#hedthe {
    background-image: url(spacer.png);
    font-family: bank-gt, sans-serif;
    font-size: 34;
    width: 830;
    height: 34;
    font-weight: normal;
}
#thereis {
    magrin-top: -20;
}
#chatbox {
    text-align: justify;
    height: 70%;
    width: 100%;
    overflow: auto;
    opacity: 0.91;
}
#usermsg {
    width: 100%;
    font-family: Play, sans-serif;
    font-size: 14;
    font-weight: normal;
    color: #ffffff;
    border: 0px solid black;
    text-indent: 5px;
    height: 32;
    margin-top: 5px;
    border: 0px solid black;
    color: #ffffff;
    background-image: url(chatinp.png);
} 
input {
    opacity: 0.7; 
}
#submitmsg { 
    background-color: #48513e;
    width: 0;
    height: 0;
    font-size: 20;
    font-weight: normal;
    color: #ffffff;
    text-align: left;
    border: 0px solid black;
} 
.error { 
    color: #000000; 
} 
#menu {
    margin-right: 0; 
} 
.welcome {
    float:left; 
} 
.logout { 
    float:right; 
} 
.msgln { 
    margin-right: 0;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="modules/chatbox.js"></script>

<!-- Actual chat -->

<div id="chatbox">
<?php
    if(file_exists("tmp/log.html") && filesize("tmp/log.html") > 0){
    $handle = fopen("tmp/log.html", "r");
    $contents = fread($handle, filesize("tmp/log.html"));
    fclose($handle);

    echo $contents;
    }
?>
</div>

<form name="message" action="" id="sender" class="sender">
    <input name="usermsg" id="usermsg" class="required" type="text" placeholder="Your message here" maxlength="60"/>
    <input name="submitmsg" type="submit" id="submitmsg" width="0" height="0"/>
</form>

chatbox.js file

// jQuery Document
$(document).ready(function(){
    //If user submits the form
    $("#submitmsg").click(function(){   
        var clientmsg = $("#usermsg").val();
        $.post("post3.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: "tmp/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, 2000);    //Reload file every 3 seconds

});

post3.php file

<?
session_start();

if(isset($_SESSION['username'])){
    $text = $_POST['text'];

    $fp = fopen("tmp/log.html", 'a');
    fwrite($fp, "<div class='msgln'> <b>".$_SESSION['username']."</b>: ".stripslashes(htmlspecialchars($text))."<br></div>");
    fclose($fp);
}
?>

This is full js + php chatter.

Answer 1

Like this?

$("#submitmsg").click(function(){   
    var clientmsg = $.trim($("#usermsg").val());
    if(clientmsg.length >= 3){
        $.post("post3.php", {text: clientmsg});             
        $("#usermsg").val("");
    }else{
        alert('error');
    }
    return false;
});