JavaScript - Bbcode Textarea Insert

Hi;

I'd like to ask you a question;

why my mouse cursor does not sit in the position of the leftmost and topmost of a bbcode form. Thanks.

my form as following;

bbcode form


PHP Code:
<form action="story_verify1.php" method="post" name="editform" onsubmit="return checkForm(this)">
<table id="editform">
<tr>
        <td id="story">My story</td>
</tr>


<tr>

        <td>
                <input type="button" class="button" value="bold" name="bold" onclick="javascript:tag('b', '[b]', 'bold*', '[/b]', 'bold', 'bold');" onmouseover="helpline('bold')" />
                <input type="button" class="button" value="italic" name="italic" onclick="javascript:tag('i', '[i]', 'italic*', '[/i]', 'italic', 'italic');" onmouseover="helpline('italic')" />
                <input type="button" class="button" value="underline" name="underline" onclick="javascript:tag('u', '[u]', 'underline*', '[/u]', 'underline', 'underline');" onmouseover="helpline('underline')" />
                <input type="button" class="button" value="quote" name="quote" onclick="javascript:tag('q', '[quote]', 'quote*', '[/quote]', 'quote', 'quote');" onmouseover="helpline('quote')" />
                <input type="button" class="button" value="code" name="code" onclick="javascript:tag('c', '[code]', 'code*', '[/code]', 'code', 'code');" onmouseover="helpline('code')" />
                <input type="button" class="button" value="url" name="url" onclick="javascript:tag('url', '[url]', 'url*', '[/url]', 'url', 'url');" onmouseover="helpline('url')" />
                <input type="button" class="button" value="img" name="img" onclick="javascript:tag('img', '[img]', 'img*', '[/img]', 'img', 'img');" onmouseover="helpline('img')" />
                <br />
                Font size: <select name="fontsize" onchange="font('[size=' + this.form.fontsize.options[this.form.fontsize.selectedIndex].value + ']', '[/size]'); this.selectedIndex=2;" onmouseover="helpline('fontsize')" class="form_elements_dropdown">

                                <option value="50%" >Tiny</option>
                                <option value="75%" >Small</option>
                                <option value="100%" selected="selected" >Normal</option>
                                <option value="150%" >Large</option>
                                <option  value="200%" >Huge</option>
                        </select>


                Font color: <select name="fontcolor" onchange="font('[color=' + this.form.fontcolor.options[this.form.fontcolor.selectedIndex].value + ']', '[/color]'); this.selectedIndex=0;" onmouseover="helpline('fontcolor')" class="form_elements_dropdown"  >
                                <option value="black" style="color:black">Black</option>
                                <option value="silver" style="color:silver">Silver</option>
                                <option value="gray" style="color:gray">Gray</option>
                                <option value="maroon" style="color:maroon">Maroon</option>
                                <option value="red" style="color:red">Red</option>                                                                                <option value="purple" style="color:purple">Purple</option>
                                <option value="fuchsia" style="color:fuchsia">Fuchsia</option>
                                <option value="navy" style="color:navy">Navy</option>
                                <option value="blue" style="color:blue">Blue</option>
                                <option value="aqua" style="color:aqua">Aqua</option>
                                <option value="teal" style="color:teal">Teal</option>
                                <option value="lime" style="color:lime">Lime</option>
                                <option value="green" style="color:green">Green</option>
                                <option value="olive" style="color:olive">Olive</option>
                                <option value="yellow" style="color:yellow">Yellow</option>
                                <option value="white" style="color:white">White</option>                                                </select>

                                <br />

                <input type="text" name="helpbox" size="75" class="helpbox" readonly="readonly"/>
                </td>
</tr>
<tr>
                <td>
                Post:***<br />
                <textarea rows="10" cols="50" name="Content" class="form_elements_text" id="thread">
                    <?php echo trim(stripslashes($_SESSION['story_content'])); ?>

                </textarea>
                </td>
</tr>


<tr>
                <td colspan="2" class="security_check">
                <?php $_SESSION['fvalue']=rand(0,9); echo $_SESSION['fvalue'];  ?>  +
                <?php $_SESSION['svalue']=rand(0,9); echo $_SESSION['svalue'];   ?> = <input type="text" name="result" /> **

               </td>
</tr>

<tr>

                <td colspan="2" id="post">
                <input type="submit" name="Post" value="Post" class="button" />
                <input type="submit" name="preview" value="Preview" class="button"/>
                <input type="reset" value="Reset" class="button" onclick="javascript:confirm_reset();"/>
                </td>
</tr>
</table>
</form>




bbcode.js

PHP Code:
//Variables for controlling opening and closing tags (function tag)

var b = 2;
var i = 2;
var u = 2;
var q = 2;
var mail = 2;
var url = 2;
var img = 2;

//Function for creating non-font tags

function tag(v, tagadd, newbut, tagclose, oldbut, name)
{


var r = document.selection.createRange().text;

rr = tagadd + r + tagclose;

if(r)
{
 document.selection.createRange().text = rr;
}
else
{
 if (eval(v)%2 == 0)
{
 eval("window.document.editform."+name+".value = newbut;");
 var content = window.document.editform.content.value;
 window.document.editform.content.value =  content + tagadd;
 window.document.editform.content.focus();
}
else
{
 eval("window.document.editform."+name+".value = oldbut;");
 var content = window.document.editform.content.value;
 window.document.editform.content.value = content + tagclose;
 window.document.editform.content.focus();
}

eval(v+"++;");
}
}

//Function for adding font color and size tags

function font(bbopen, bbclose) {
        var r = document.selection.createRange().text;
        rr = bbopen + r + bbclose;

        if(r)
        {
          document.selection.createRange().text = rr;
        }else{
          var post = document.editform.post;
          post.value += bbopen +r+ bbclose;
          post.focus();
        }
        return;
}


function smilie (tag) {
       var myField; 
        tag = ' ' + tag + ' '; 
        if (document.getElementById('thread') && document.getElementById('thread').type == 'textarea') { 
                  myField = document.getElementById('thread'); 
        } else { 
                return false; 
        } 
        if (document.selection) { 
                 myField.focus();  
                sel = document.selection.createRange(); 
                sel.text = tag; 
                myField.focus(); 
        } 
        else if (myField.selectionStart || myField.selectionStart == '0') { 
                var startPos = myField.selectionStart; 
                var endPos = myField.selectionEnd; 
                var cursorPos = endPos; 
                myField.value = myField.value.substring(0, startPos) + tag + myField.value.substring(endPos, myField.value.length); 
                cursorPos += tag.length; 
                myField.focus(); 
                myField.selectionStart = cursorPos; 
                myField.selectionEnd = cursorPos; 
        } 
        else { 
                myField.value += tag; 
                myField.focus(); 
        } 



}




//Helpbox messages
bold_help = "Bold text: [b]text[/b]";
italic_help = "Italic text: [i]text[/i]";
underline_help = "Underline text: [u]text[/u]";
quote_help = "Quote text: [quote]text[/quote] or [quote=name]text[/quote]";
code_help = "Code display: [code]code[/code]";
img_help = "Insert image: [img]http://image_url[/img]";
url_help = "Insert URL: [url]http://url[/url] or [url=http://url]URL text[/url]";
fontcolor_help = "Font color: [color=red]text[/color]  Tip: you can also use color=#FF0000";
fontsize_help = "Font size: [size=50%]small text[/size]";

//Function for displaying help information

// Shows the help messages in the helpline window
function helpline(help) {
        var helpbox = document.editform.helpbox;
        helpbox.value = eval(help + "_help");
}

//Function to confirm reset

function confirm_reset () {
        if(confirm("If you continue you will loose everything you have entered so far. \n \n" +
                "Click OK to proceed and start again.  \n \n Alternatively click cancel to continue " +
                "working on your post.")) {
                        return true;
                                }
                else {
                        return false;
                                }
}

//Check the form submission for errors

function checkForm() {
        var subject = document.editform.subject;
        var post = document.editform.post;

        //Check to make sure post lengths are sensible

        if (subject.value.length < 2 && post.value.length < 2) {
                alert("This is a short post!" + " \n \n " +
                                "We require that each post (and subject) \n" +
                                "be at least 2 characters long. \n \n" +
                                "Go back and try again.");
                return false;
        }
        else { if (subject.value.length < 2) {
                        alert("We require that the subject  \n" +
                                "be at least 2 characters long. \n \n" +
                                "Go back and try again.");
                                return false;
                                }
                        else { if (post.value.length < 2) {
                        alert("We require that each post  \n" +
                                "be at least 2 characters long. \n \n" +
                                "Go back and try again.");
                                return false;
                                }
                                else {
                                        return true;
                                }
                        }
        }
} 

Hi all,

I'd like to use the bbcode editor at http://php-login-script.com/bbdemo.php. Currently that script doesn't set the focus on the textarea after tag insertion. I've tried to to make it by inserting textarea.focus() at the end of their function, like
Code:

function doAddTags(tag1,tag2,obj)
{
textarea = document.getElementById(obj);
	// Code for IE
		if (document.selection) 
			{
				textarea.focus();
				var sel = document.selection.createRange();
				//alert(sel.text);
				sel.text = tag1 + sel.text + tag2;
			}
   else 
    {  // Code for Mozilla Firefox
		var len = textarea.value.length;
	    var start = textarea.selectionStart;
		var end = textarea.selectionEnd;
		
		
		var scrollTop = textarea.scrollTop;
		var scrollLeft = textarea.scrollLeft;

		
        var sel = textarea.value.substring(start, end);
	    //alert(sel);
		var rep = tag1 + sel + tag2;
        textarea.value =  textarea.value.substring(0,start) + rep + textarea.value.substring(end,len);
		
		textarea.scrollTop = scrollTop;
		textarea.scrollLeft = scrollLeft;
		
		
	}
	textarea.focus();
}

But, in IE that sets the cursor the end of the last inserted tag and in FF the cursor moves at the end of the whole text in textarea.

How can i set it ine between the tags(say ), after insert?

Thanks.

Hi i have a problem, i've been trying to fix this for the whole day

pls see my code below

Code:

for ($o = 0; $o <= $totalclass; $o++) 
{ 
	for($i = 1; $i <= 45; $i++)
	{
		if ($_SESSION['classification'][$o] == $i) 
		{
			$sql2="SELECT ClassDesc FROM tblclass WHERE ClassID = '$i'";
			$result2=mysql_query($sql2);
			
			// If successfully queried
			if($result2)
			{
				while ($row2 = mysql_fetch_assoc($result2)) 
				{
					$ClassDesc2 = $row2['ClassDesc'];
				}
			}
			//echo $ClassDesc2;
		?>
			<tr>
			<td bgcolor="FAFAF6" class="small" valign="top">Class <? echo $i; ?></td>
			<input type="hidden" name="<? echo "classid[]"; ?>" value="<? echo $i; ?>">
			<td bgcolor="FAFAF6">
			<textarea name="<? echo "specification[]"; ?>" COLS="50" ROWS="6" class="small" wrap="virtual" tabindex="<? echo $i; ?>"><? echo $ClassDesc2;?></textarea>
			<input type="button" value="Reset" onclick="window.reset();" name="reset">
			</td>
			</tr>
		<?			 
		}
	}
}

i've trying to create a button or image to reset one textarea (from whole array) and so far i've been unsuccessful.

i've seen this on other website and i know it is possible to do this, pls help!

Hi all,

I'm loading external xml and displaying specific tagged elements in a textarea.
It works fine in IE because I can turn the variable object into text with a simple object.text property, but in Firefox (using the serializeToString method), the object appears in my textarea tags and all.

The code looks something like this (this is just a dummy script - imagine the xml is already loaded into the object xmlDoc ):
Code:

function writePage(){
     document.write('<textarea name="inputText">'+myText+'</textarea>');
}

function xmlIsLoaded(){
     if(window.ActiveXObject){  //tests for IE
          myText = xmlDoc.getElementsByTagName("desiredTag")[0].text;
     } else { //tests for FF
          myText = (new XMLSerializer()).serializeToString(xmlDoc.getElementsByTagName("desiredTag")[0]);
     }
     writePage();
}

What am I missing here? I've tried toString, textContent, innerText, childNodes - just about everything I can think of to get just the text w/o the tags from the xml for the FF version.

Any thoughts?

~gyz

Hello there . Here is my simple code
Quote:
<html>

<head>
<script>
function addText(){
document.getElementById("textarea").value+=document.getElementById("text").value+'\n';
document.getElementById("text").value="";
document.getElementById("text").onblur=document.getElementById("text").value=" Your Message...";

}
</script>



<style>

#textarea{background-color:#F3F3F3;


}

</style>

</head>
<body>

<form>
<TEXTAREA id="textarea" COLS="80" ROWS="20" ></TEXTAREA><br/><br/>
<input type="text" id="text" name="text" value=" Your Message..." onclick="this.value=''" size="96">
<input type="button" value="Send" name="submit" onclick="addText()"> </form>

</body>
</html>


My problem is I dont know what to do iorder to make my send button to push the text entered in the text field from bottom to the top (not from the top to the bottom)

I'm making this expanabel textarea which works fine, but... If I set a predefined numbers of rows, when start typing it jumps back (schrinks) into 2 rows... How do I avoid this?

Code:

<script>
function checkRows(textArea){

if (navigator.appName.indexOf("Microsoft Internet Explorer") == 0)
{
textArea.style.overflow = 'visible';
return;
}

while (
textArea.rows > 4 && 
textArea.scrollHeight < textArea.offsetHeight
){
textArea.rows--;
}

while (textArea.scrollHeight > textArea.offsetHeight)
{
textArea.rows++;
}


return;
}
</script>

<textarea style="overflow:hidden;" onkeyup="checkRows(this)" rows="4">Some Test Text</textarea>

Thanks in advance:-)

so I am creating a silly word ;irate word interpreter page, and I need some logic behind how to add text to a textarea each time I click on a button. Each time the user clicks on the button, the value is inserted into the text area. You should be able to click on multiple buttons to add to the last text that appears. Then I have a delete translation button when I want to clear the textarea field. A good example would be if the user clicks on the button with the value "sir", than "matey" will appear in the textarea. Now, if the user clicks on the button with the value "your", then "yer" will come up after matey. It's like creating a sentence on your own, and then deleting it when your done.

Code:

<body>	
	<div id="page">	
	
	<div>
	<img style="float:left" src="slue.gif" width="205" height="190" alt="">
	
	<div>
	<h1>Pirate Translator</h1>
	
	<p>Simply click on the buttons to translate words and/or phrases from English to pirate talk</p>
	</div>	

	</div><br />
	<hr />

	<form name="pirate">

	
	    <div>
		<fieldset>
		<legend><b>Greetings:</b></legend>
		<input type="button" id="greeting" value="hello" />
		<input type="button" id="greeting" value="pardon me" />
		<input type="button" id="greeting" value="excuse me" />
		<input type="button" id="greeting" value="" />
		<input type="button" id="greeting" value="" />
		<input type="button" id="greeting" value="" />
		</fieldset>
	    </div>

	    <div>
	        <fieldset>
		<legend><b>People:</b></legend>
		<input type="button" id="people" value="sir" />
		<input type="button" id="people" value="madam" />
		<input type="button" id="people" value="miss" />
		<input type="button" id="people" value="stranger" />
		<input type="button" id="people" value="officer" />
		<input type="button" id="people" value="" />
		<input type="button" id="people" value="" />
	    	</fieldset>
	    </div>

	    <div>
		<fieldset>
		<legend><b>Questions:</b></legend>
		<input type="button" id="question" value="where is" />
		<input type="button" id="question" value="can you help me" />
		<input type="button" id="question" value="is that" />
		<input type="button" id="question" value="how far is it to" />
		<input type="button" id="question" value="" />
		<input type="button" id="question" value="" />
		<input type="button" id="question" value="" />
		<input type="button" id="question" value="" />
		</fieldset>
	    </div>

	     <div>
	        <fieldset>
		<legend><b>Articles:</b></legend>
		<input type="button" id="article" value="the" />
		<input type="button" id="article" value="my" />
		<input type="button" id="article" value="your" />
		<input type="button" id="article" value="" />
		<input type="button" id="article" value="" />
		<input type="button" id="article" value="" />
		<input type="button" id="article" value="" />
	    	</fieldset>
	    </div>

	     <div>
	        <fieldset>
		<legend><b>Adjectives:</b></legend>
		<input type="button" id="adject" value="old" />
		<input type="button" id="adject" value="attractiv" />
		<input type="button" id="adject" value="happy" />
		<input type="button" id="adject" value="" />
		<input type="button" id="adject" value="" />
		<input type="button" id="adject" value="" />
		<input type="button" id="adject" value="" />
	    	</fieldset>
	    </div>

	     <div>
	        <fieldset>
		<legend><b>Places:</b></legend>
		<input type="button" id="places" value="restroom" />
		<input type="button" id="places" value="restaurant" />
		<input type="button" id="places" value="mall" />
		<input type="button" id="places" value="hotel" />
		<input type="button" id="places" value="pub" />
		<input type="button" id="places" value="" />
		<input type="button" id="places" value="" />
	    	</fieldset>
	    </div>

	     <div>
	        <fieldset>
		<legend><b>Desires:</b></legend>
		<input type="button" id="desire" value="I would like to" />
		<input type="button" id="desire" value="I desire" />
		<input type="button" id="desire" value="I wish I knew how to" />
		<input type="button" id="desire" value="my mother told me to" />
		<input type="button" id="desire" value="my campanion tells me to" />
		<input type="button" id="desire" value="" />
		<input type="button" id="desire" value="" />
	    	</fieldset>
	    </div>

	     <div>
	        <fieldset>
		<legend><b>Actions:</b></legend>
		<input type="button" id="action" value="find" />
		<input type="button" id="action" value="take a nap" />
		<input type="button" id="action" value="kill" />
		<input type="button" id="action" value="hurt you" />
		<input type="button" id="action" value="beat you up" />
		<input type="button" id="action" value="go to the bathroom" />
		<input type="button" id="action" value="" />
	    	</fieldset>
	    </div>

		<div>
		<p id="output"><textarea id="task_list" rows="5" cols="130"></textarea></p>
		<p id="output"><input type="button" id="" value="Delete Traslations" /></p>
		</div>

	</div>
		
		
	</form>
<script src="js/translate.js"></script>
</body>
</html>

Hi all.

I have a textfield on my form problem. My boss wants it as a textfield to keep the field small on the page but still wants to be able to read all of the information that is in the field. What can I do with this?? Can we have change to textarea when he hovers to clicks in it. Any help would be appreciated.

hi
I am trying to create a textarea. There is a default text inside textarea. so when user clicks inside textarea then submit button appears and default text disappears and when user clicks somewhere else or outside textarea then it gets back to original state i.e, default text appears back and submit button disappears.

here is what i did sofar. in this code when i click inside textarea then submit button does appear but text does not erase and when i click outside then button remains in sight.

Code:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#submit {
   visibility: hidden;
}
</style>
</head>

<body>
<form>
   <label>Message:</label>
    <textarea name="message" id="message" rows="5" cols="30">write message here!</textarea><br />
    <input type="button" name="submit" id="submit" value="submit" />
</form>
</body>
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script>
var flag = false;
$(document).ready(function () {
   $('#message').click(function () {
      flag = true;
      $('#submit').css('visibility','visible');
      if(flag == true) {
         //alert(flag);
         var msg = $('#message').val();
         //alert(msg);
         msg = "";
         //alert(msg);
      }
   });
});
</script>
</html>

I am fairly new at Javascript, but there is something happening I do not understand. Please someone explain it to me and help with a solution.

In the function, I pull data from an URL and I have done this with several different data fields and populate the HTML input, option, and check boxes with no problem with the following method.

Code:

document.getElementById("othertxt").value=strValue;
document.getElementById("radsig").checked=true;
document.getElementById("eventtime").value=strValue;

But for some reason this method for textarea does not work and I know that there is a value in strValue because check it right before the line of code.

Code:

document.getElementById("othertxt").value=strValue;

Is textarea just treated differently? I have searched the internet and seen examples but for some reason I can not find the correct solution.

Is it possible to limit a textarea input with a max amount of letters?

So if the form said 1,000 character limit. Can it block it after the 1,000th one is reached?

I'm having trouble with the way my textarea is displaying text when it's submitted. It always comes out as one line of text instead of the way a user has entered it. Here's my code.

Code:

<textarea name="info" value="" rows="7" cols="55">
Enter Your Personal Information Here
</textarea><br /><br />

That is then called to a function which displays it in a new page.

Code:

<script>
function buildResume()
  {
   resInfo = document.myResume.info.value
   flyWindow = window.open()
   flyWindow.document.write("Personal Information&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + resInfo);
  }
</script>

If any knows how I could fix this it'd really help. I've tried using the pre element and wrap property with no luck.

I sell products on amazon. and ASINs are Amazon Identifiers for products. So If I want to check out my product pages I have to go to "www.amazon.co.uk/dp/ "I have to put an ASIN here" . If I can put everything together in the text box and hit go it should take me to the first page(first ASIN). Here is a sample ASIN B004Z2QORW

I have the code below but I somehow cant get it to work. Please help. I haven't assigned anything to the go button. I will put a list of ASINs in the text area and the iframe should concatenate the value from a row to the hardcoded URL and when I click next it should concatenate the value from the next row; when I click previous the value from the previous row.

Code:

<HTML>
<Head>
<H1 align="center">Detail Page Lookup using ASINs</H1>
</head>
<body>
<textarea rows="10" cols="20" value="">
ASINs here
</textarea>
<button id="go">Go</button>
<button id="prev" align="right">Previous</button>
<button id="next" align="right">Next</button>
<br/>
<iframe id="myframe" src="http://www.amazon.co.uk/dp/" height="100%" width="100%">
  <p>Your browser does not support iframes.</p>
</iframe>
<script>var domain='http://www.amazon.co.uk/dp/';

$('#prev, #next').on('click', function(e) {
    var Myval = $('textarea').val().split('\n'),
        now = $('#myframe').attr('src').replace(domain, '');
    if (Myval.indexOf(now)==-1) {
        var src=domain+Myval[0];
    }else{
        var p = Myval.indexOf(now)!==0 ? Myval.indexOf(now)-1 : Myval.length-1,
            n = Myval.indexOf(now)==(Myval.length-1) ? 0 : Myval.indexOf(now)+1,
            src = e.target.id=='next' ? domain+Myval[n] : domain+Myval[p];
    }
    $("#myframe").attr('src', src);
    console.log(src);
});
?
</script>
</body>
</HTML>

Hi guys,

My brain is not working. May be I need a coffee break.
I need your expertise.

Below is the code holding the textarea.
Look for the element with the id : themessage
Code:

<table width="100%" border="0">
<tr><td rowspan="4"><input type="button" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" value="<?php echo $from_email;?>"/><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr>
<tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" /></td></tr>
<tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr>
<tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr>
<tr><td rowspan="1" colspan="2">&nbsp;</td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" /> PDF Quotation</td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td>
</tr>
<tr>
<td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td>
<td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr>
<tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td>

<td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr>
<tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments&nbsp;&nbsp;<input id="upload_file" name="upload_file" type="file"/> </td></tr>

<tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3">
	<textarea id="themessage" name="themessage" rows="15" cols="80" style="width: 100%">
	</textarea>
</td></tr>
</table>

Now on a button click, I'm trying to pass some values which one of them happens to be what ever that is entered in the textarea.
For some reason, the stupid JS is not reading. But I think it is me that is stupid, not JS.

Below is the code i'm running to get the value.

Code:

var message = document.getElementById('themessage').value;
alert(message);

The alert simply returns blank.
There is an alert, but no value even where there is text in the text area.

Can someone please shed some light on this.
pretty please