A little mailbox help

[Oo-Savage-oO]

I have a mailbox, now I want to make it that when a user is sending a mail and he forgets to enter a subject a alert comes and tells him to enter it. How can I make it that the alert comes without loading the page again, something type of like the default login has.

here is my compose mail

function mail_compose()
{
global $ir,$c,$userid,$h;
echo <<< EOF
<script type="text/javascript">
function insert(el,ins) {
if (el.setSelectionRange){
el.value = el.value.substring(0,el.selectionStart) + ins + el.value.substring(el.selectionStart,el.selectionEnd) +

el.value.substring(el.selectionEnd,el.value.length);
}
else if (document.selection && document.selection.createRange) {
el.focus();
var range = document.selection.createRange();
range.text = ins + range.text;
}
}
</script>
<form action='mailbox.php?action=send' method='post'>
<table width=75% border=2> <tr>
<td>ID to send to:</td> <td><input type='text' name='userid' value='{$_GET['ID']}'/></td></tr><tr>
<td>Subject:</td> <td><input type='text' name='subject'/></td></tr><tr>
<td>Message:</td>
<td>
<center>
<input type="button" class="bbcode_hover" onClick="insert(this.form.message,'[b][/b]'); return false;" value="" />
<input type="button" class="bbcode_hover1" onClick="insert(this.form.message,'[i][/i]'); return false;" value="" />
<input type="button" class="bbcode_hover2" onClick="insert(this.form.message,'[u][/u]'); return false;" value="" />
<input type="button" class="bbcode_hover3" onClick="insert(this.form.message,'[url][/url]'); return false;" value="" />
<input type="button" class="bbcode_hover4" onClick="insert(this.form.message,'[s][/s]'); return false;" value="" />
<input type="button" class="bbcode_hover5" onClick="insert(this.form.message,'[img][/img]'); return false;" value="" />
<input type="button" class="bbcode_hover6" onClick="insert(this.form.message,'[center][/center]'); return false;" value="" />
<input type="button" class="bbcode_hover7" onClick="insert(this.form.message,'[color=#xxxxxx][/color]'); return false;"
value="" />


<textarea name='message' rows='10' cols='70' style='color: black; background-color: white'></textarea>

<input type="image" src="smilies/smiley1.gif" alt="Smile" title="smile" onclick="insert(this.form.message,':)'); return false;" />
<input type="image" src="smilies/smiley2.gif" alt="Wink" title="Wink" onclick="insert(this.form.message,';)'); return false;" />
<input type="image" src="smilies/smiley3.gif" alt="Suprised" title="Suprised" onclick="insert(this.form.message,':o'); return false;" />
<input type="image" src="smilies/smiley4.gif" alt="Cheesy Grin" title="Cheesy Grin" onclick="insert(this.form.message,':D'); return false;" />
<input type="image" src="smilies/smiley5.gif" alt="Confused" title="Confused" onclick="insert(this.form.message,':s'); return false;" />
<input type="image" src="smilies/smiley6.gif" alt="Sad" title="Sad" onclick="insert(this.form.message,':('); return false;" />
<input type="image" src="smilies/smiley7.gif" alt="Angry" title="Angry" onclick="insert(this.form.message,':red'); return false;" />
<input type="image" src="smilies/smiley8.gif" alt="Clown" title="Clown" onclick="insert(this.form.message,':clown'); return false;" />
<input type="image" src="smilies/smiley9.gif" alt="Embarrassed" title="Embarrassed" onclick="insert(this.form.message,':bashful'); return false;" />
<input type="image" src="smilies/smiley10.gif" alt="Star" title="Star" onclick="insert(this.form.message,':x'); return false;" />
<input type="image" src="smilies/smiley11.gif" alt="Sick" title="Sick" onclick="insert(this.form.message,':green'); return false;" />
<input type="image" src="smilies/smiley12.gif" alt="Bored" title="Bored" onclick="insert(this.form.message,':|'); return false;" />
<input type="image" src="smilies/smiley13.gif" alt="Begging" title="Begging" onclick="insert(this.form.message,';('); return false;" />
<input type="image" src="smilies/smiley14.gif" alt="Smug" title="Smug" onclick="insert(this.form.message,':]'); return false;" />
<input type="image" src="smilies/smiley15.gif" alt="Horny" title="Horny" onclick="insert(this.form.message,':horny'); return false;" />
<input type="image" src="smilies/smiley16.gif" alt="Cool" title="Cool" onclick="insert(this.form.message,':cool'); return false;" />
</center>
</td></tr><tr>
</td></tr><td colspan=2><input type='submit' value='Send' class='btn'></td></tr></table></form>
EOF;

if($_GET['ID'])
{
print "
<table width=75% border=2><tr><td colspan=2>[b]Your last 5 mails to/from this person:[/b]</td></tr>";
$q=mysql_query("SELECT m.*,u1.username as sender from mail m left join users u1 on m.mail_from=u1.userid WHERE

(m.mail_from=$userid AND m.mail_to={$_GET['ID']}) OR (m.mail_to=$userid AND m.mail_from={$_GET['ID']}) ORDER BY m.mail_time

DESC LIMIT 5",$c);
while($r=mysql_fetch_array($q))
{
$sent=date('F j, Y, g:i:s a',$r['mail_time']);
print "<tr><td>$sent</td> <td>[b]{$r['sender']} wrote:[/b] {$r['mail_text']}</td></tr>";
}

OUT;
$h->endpage();
}
}