JavaScript - Previewing A Textarea In Popup
Hi Guys,
It's probably something trivial i have forgotten to do lol, all i'm trying to do is preview some html code in a textare in a javascript popup what i have done so far is: 1) page1.php PHP Code: <input type="submit" onClick="return popUpPreview();" value="Preview" /> The textarea is in the form is like: PHP Code: <textarea name="txtProductDescription" id="txtProductDescription" rows="20" cols="60" /><?php echo isset($_POST['txtProductDescription'])?$_POST['txtProductDescription']:''; ?></textarea> When preview is clicked the javascript function kicks in: PHP Code: function popUpPreview() { // Display a new browser for the user var w = screen.availWidth / 2 - 450; var h = screen.availHeight / 2 - 320; var win = window.open('preview.php', 'payPopupMain', 'width=900,height=650,left='+w+',top='+h+',scrollbars=1'); } preview.php PHP Code: <html> <head> <link rel="stylesheet" type="text/css" href="css/fcs.css" /> <script type="text/javascript" src="js/fcs.js"></script> <title>Preview</title> </head> <body> <script type="text/javascript">document.write(document.formAddProduct.txtProductDescription.value)</script> </body> </html> So far this prints nothing, i have probably made it more complicated than it needs to be lol any help would be appreciated thanks guys Graham Similar TutorialsI am using the following code to pop up a help balloon when the mouse hovers over an input element: Code: function eltMouseOver() { // if there is already a help division displayed, hide it if (helpDiv) { helpDiv.style.display = 'none'; helpDiv = null; } // in some cases the mouseover event is against the table cell // containing the input element. Locate the first element node // under the cell to display help for if (this.nodeName == 'TD') { // mouseover defined for the cell containing the element for (var i = 0; i < this.childNodes.length; i++) { // loop through children of this var cNode = this.childNodes[i]; if (cNode.nodeType == 1) { // element helpElt = cNode; break; } // element } // loop through children of this } // mouseover defined for the cell containing the element else helpElt = this; helpDelayTimer = setTimeout(popupHelp, 2000); } // eltMouseOver function popupHelp() { displayHelp(helpElt); } // popupHelp function displayHelp(elt) { var helpDivName = ""; try { // the help division name may be supplied by an explicit private // attribute "helpDiv" if (elt.helpDiv) helpDivName = elt.helpDiv; else if (elt.name && elt.name.length > 0) { // element has a name if (elt.name.substring(elt.name.length - 2) == "[]") { // multiple selection helpDivName = elt.name.substring(0, elt.name.length - 2); } // multiple selection else { // ordinary element helpDivName = elt.name; } // ordinary element } // element has a name else { // try id attribute helpDivName = elt.id; } // try id attribute } catch(e) { // exception thrown trying to get help division name var attrList = ""; for(attr in elt) attrList += attr + ", "; alert("keyDown: exception=" + e + ", elt=" + attrList); } // exception thrown trying to get help division name // to ensure unique id values, the supplied name is // prefixed with "Help". However some forms have not been // updated to use this convention helpDiv = document.getElementById("Help" + helpDivName); if (!helpDiv) { // first choice not found // strip off trailing decimal digits if any representing // a row number for (var l = helpDivName.length; l > 1; l--) { // find last non-numeric character if (helpDivName[l - 1] < '0' || helpDivName[l - 1] > '9') { // non-digit helpDivName = helpDivName.substr(0, l); helpDiv = document.getElementById("Help" + helpDivName); break; } // non-digit } // find last non-numeric character // if cannot find division with name prefixed with 'Help' // then try without if (!helpDiv) helpDiv = document.getElementById(helpDivName); } // first choice not found if (helpDiv && (helpDiv != elt)) { // have a help division to display // If presentation style requires capitalization, // report it in help var textTransform = ""; if (elt.currentStyle) { // browser supports IE API textTransform = elt.currentStyle.textTransform; } // browser supports IE API else if (window.getComputedStyle) { // browser supports W3C API var style = window.getComputedStyle(elt, null); textTransform = style.textTransform; } // browser supports W3C API if (textTransform == "capitalize") { if (!helpDiv.capitalized) { // add text to help helpDiv.appendChild(document.createTextNode( "Text entered in this field is automatically capitalized." )); helpDiv.capitalized = true; } } // if the field has automatic abbreviation expansion // describe it addHelpAbbrs(helpDiv, elt.abbrTbl); // display the help balloon in an appropriate place on the page var cell = elt.parentNode; var row = cell.parentNode; var tbody = row.parentNode; var table = tbody.parentNode; //alert("helpDiv=" + tagToString(helpDiv)); helpDiv.style.left = Math.max(Math.min(getOffsetLeft(elt) - 50, table.offsetWidth - Math.floor(window.innerWidth/2)), 2) + 'px'; helpDiv.style.top = (getOffsetTop(elt) + 20) + 'px'; helpDiv.style.display = 'block'; // so key strokes in balloon will close window helpDiv.onkeydown = keyDown; } // have a help division to display else alert("Cannot find <div id='Help" + helpDivName + "'>"); } // displayHelp I activate support for this on every element in the page by means of the following code in the onload handler: Code: for(var i = 0; i < document.forms.length; i++) { var form = document.forms[i]; for(var j = 0; j < form.elements.length; j++) { var element = form.elements[j]; // pop up help balloon if the mouse hovers over a field // for more than 2 seconds if (element.parentNode.nodeName == 'TD') { // set mouseover on containing cell element.parentNode.onmouseover = eltMouseOver; element.parentNode.onmouseout = eltMouseOut; } // set mouseover on containing cell else { // set mouseover on input element itself element.onmouseover = eltMouseOver; element.onmouseout = eltMouseOut; } // set mouseover on input element itself } // loop through elements in form } // iterate through all forms For an example see this page. This works for every input element on the page except the <textarea>. If I move the mouse over the text area you can see the mouse blink after 2 seconds, but the help balloon does not appear unless you first give the <textarea> the focus by clicking the mouse in the area. I have verified by adding alerts that the mouseover and popup functions are called the same way on the <textarea> as on the other input elements. This is on Firefox 3.6.23 on Ubuntu 10.04. Is this just a quirk of Firefox? I have a textarea with two buttons on it on the main page. When the user types into the textbox and hits the first button, a new window appears with the html language the user typed into the box. the other button closes the window. I cannot get the user's input to show up in the new window... Here is my code so far Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Test</title> </head> <body> <form name = "form1"> <br> Type your HTML code below: <br> <textarea name = "userInput" cols = "70" rows = "30"></textarea> <br> <input type = "button" value = "Preview" name = "preview" onclick = "write2new()"> <input type = "button" value = "Close Preview" name = "closePreview" onclick = "w.close()"> </form> <script language="JavaScript" type="text/javascript"> <!-- function write2new() { var t = document.form1.userInput.value; var w = open(""); w.document.write(t); w.document.close(); } //--> </script> </body> </html> Hi, I'm kinda hoping this is possible but haven't found any reference to it... I have a parent page that opens a popup on click that launches a sidebar navigation on the right of the screen and resizes the parent page. What I am wanting to do is create a second popup (approx 250px high) that opens below the navigation (which is only around 600px high) but I have noticed that even when you have no status bar in the popup windows, they can still end up overlapping because of additional tools or plugins that the viewer has in their browser. Is there any way to get the popups to butt up against each other instead of overlapping? More like a relative popup? Any assistance would be appreciated. :-) 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) Hey everyone....I just started learning how to use Javascript and I have a problem.... I have an exercise in which I have to validate a form and write the info of all the fields in a textarea by pressing the submit button.....and I just can't do it. Code: <html> <head> <script language="javascript" type="text/javascript"> var radio_selection=""; function ValMode(){ Empty(myForm.name); Empty(myForm.addr); Empty(myForm.city); Empty(myForm.mail); radioButtons(); Empty2(myForm.multi); return false; } function Empty(x){ if ((x.value.length==0)||(x.value==null)){ alert("Empty field");} } function Empty2(x){ if ((x.value==null)){ alert("Select an option"); } } function radioButtons() { if (radio_selection=="") alert("\nYou must check one of the radio buttons."); } </script> </head> <body> <big><b>Example Form</b></big><br><br> <b>The form</b><br> <form name="myForm" onsubmit= "return ValMode();" > Name <input type="text" name="name" size=30><br> Address <input type="text" name="addr" size=30><br> City <input type="text" name="city" size=30><br> E-mail <input type="text" name="mail" size=30><br> Room Type<br> <input type="radio" name="personnumb" onClick="radio_selection='One person'">For One person<br> <input type="radio" name="personnumb" onClick="radio_selection='For Two'">For Two<br> <input type="radio" name="personnumb" onClick="radio_selection='For three'">For three<br> <input type="radio" name="personnumb" onClick="radio_selection='Family suite'">Family suite<br> How did you learn about us?<select name="mutli"> <option selected value="">--Select-- <option>From friend <option>By chance <option>Search engine <option>Advertisement </select><br> I'd like additional service as: <br> <input type="checkbox" name="veg">Vegetarian<br> <input type="checkbox" name="hand">Handicap<br> <input type="checkbox" name="allerg">Allergic to various substances<br> <input type="checkbox" name="pet">Pet owner<br> <input type="submit" value="submit form"><br> <input type="reset" value="reset"><br> <textarea cols=30 rows=10 id="textarea" name="textarea" >When you hit 'Submit' the user input will be written to htis textarea.</textarea> </form> </body> </html> Here is my code.I left out my sorry efforts of influencing the textarea. Any suggestions? hi i am new to javascript. i want to make a form where a textarea, some buttons like bold,italic,link etc will be availablw. when user selecet some text from textarea and click bold button then one openig and closing tag will be added like this [sb]abc[/sb] how can i do this using javascript. any idea? pls. help I'm adding text into a text area using document.createTextNode Code: document.getElementById('controlQueueDump').appendChild(document.createTextNode(args+';')); But whenever the user edits the text box, it will never update anything again. I can add as much as I want, but when a user edits it (for example removes the contents), BAM, it is no longer updated. it's a textarea so it should be appending the child to the value attribute. Thanks a lot. on html i named my textarea as features, is the code below correct cause is does not validate. if (document.forms.myform.features.value == "") is it possible to make a textarea resize with text? so if e.g the text overflows, the text-area is automatically resized so that there's no scrolling? It needs to resize automatically as the user is typing (more or less), he/she shouldn;t click on any buttons to resize it
I can write all kinds of stuff, but one thing is failing me, and is extremely frustrating. document.getElementById('fakeid').value; which is my least preferred option, won't even work on this text area. Either will: Code: var objElem = document.getElementById(strId); var objElem = objElem.getElementsByTagName('textarea'); var strComment = objElem[0].value; It will work fine in IE but will not in Firefox. I cannot understand why as I've done this many times before. The code it is using is: Code: <div id="commentAdd"><h3 id="commentHeader"><a href="javascript:;" onclick="func_toggle_visibility("commentAddContent");return false;">Add a comment</a></h3> <div class="contentnopadding" id="commentAddContent" style="display:block;"> <form id="formCommentAdd"> <div class="comleft"> <table> <tr><td><span class="subhead">Add Comment:</span></td><td><textarea id="fakeid" rows="3" cols="35"></textarea></td></tr> </table> </div> <div class="content"> <input id="commentAddSubmit" type="button" value="Submit Comment" onclick="commentInitAjax(this.id,'comment','1',false);"> </div> </form></div></div><br><br> <div class="contentnopadding"></div> hitting submit triggers that function (which i haven't pasted all of it, just the necessary parts). I have an alert right after where i assign the value, but it does not work in FF. Please help, it's giving me grief (if it helps, the HTML is written by javascript, but i can't see how it would have any effect). Hey all, I have a script that limit characters and lines entered by users in a textarea.. i want instead of throwing that alert message to jump to the next line and the user can continue writing, here is the script: Code: <script type="text/javascript"> var alert_title='Input Restriction'; function limitTextarea(el,maxLines,maxChar){ if(!el.x) { el.x=uniqueInt(); el.onblur=function(){clearInterval(window['int'+el.x])} } window['int'+el.x]=setInterval(function(){ var lines=el.value.replace(/\r/g,'').split('\n'), i=lines.length, lines_removed, char_removed; if(maxLines&&i>maxLines){ alert('You can not enter\nmore than '+maxLines+' lines'); lines=lines.slice(0,maxLines); lines_removed=1 } if(maxChar){ i=lines.length; while(i-->0)if(lines[i].length>maxChar){ lines[i]=lines[i].slice(0,maxChar); char_removed=1 } if(char_removed) alert('You can not enter more\nthan '+maxChar+' characters per line') } if(char_removed||lines_removed) el.value=lines.join('\n') },50); } function uniqueInt(){ var num,maxNum=100000; if(!uniqueInt.a||maxNum<=uniqueInt.a.length)uniqueInt.a=[]; do num=Math.ceil(Math.random()*maxNum); while(uniqueInt.a.hasMember(num)) uniqueInt.a[uniqueInt.a.length]=num; return num } Array.prototype.hasMember=function(testItem){ var i=this.length; while(i-->0)if(testItem==this[i])return 1; return 0 }; </script> The HTML Code: <textarea onFocus="limitTextarea(this,5,40)" wrap="soft"></textarea> please help! 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 " + 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'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:-) 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> Hi, Nothing will display in my textarea after pressing an input number which have to seen on the display. The code is from a simple calculator <form action="#" method="get" onsubmit="return false"> <p> <textarea disabled="disabled"></textarea> </p> <div id="calculatorButtons"> <p> <button onclick="calculatorNumber(1)">1</button> <button onclick="calculatorNumber(2)">2</button> <button onclick="calculatorNumber(3)">3</button> <button onclick="calculatorOp('+')">+</button> </p> <p> <button onclick="calculatorNumber(4)">4</button> <button onclick="calculatorNumber(5)">5</button> <button onclick="calculatorNumber(6)">6</button> <button onclick="calculatorOp('-')">-</button> </p> <p> <button onclick="calculatorNumber(7)">7</button> <button onclick="calculatorNumber(8)">8</button> <button onclick="calculatorNumber(9)">9</button> <button onclick="calculatorOp('*')">*</button> </p> <p> <button onclick="calculatorNumber(0)">0</button> <button onclick="calculatorOp(',')">,</button> <button onclick="calculatorClear()">Clear</button> <button onclick="calculatorCalculate()">Calc</button> </p> </div> </form> function calculatorNumber(i) { document.form.getElementById('textarea').innerHTML = i; } What is the right way to refer to the textarea? 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 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"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" /> PDF Quotation</td><td> </td><td> </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 <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 |