JavaScript - Submit Textarea
Similar TutorialsI have a form, which has a textarea. Though I'm wanting it to be able to submit with the enter key. Can anyone help me? Everything I've tried either refreshes, or does a linebreak. Heres the code to the whole page, seeing as the form takes up most of it. Code: <? require("scripts/function.s"); $username = $x; $password = $y; require("scripts/verify.s"); ?> <html> <head> <link rel=stylesheet type=text/css href=style.css> <script type="text/javascript" src="http://www.katarra.net/googiespell/AJS.js"></script> <script type="text/javascript" src="http://www.katarra.net/googiespell/googiespell.js"></script> <script type="text/javascript" src="http://www.katarra.net/googiespell/cookiesupport.js"></script> <script language=Javascript> function clearForm(f){ f.action.value = f.nonaction.value; f.nonaction.value = ""; return true; } </script> <script language="javascript" type="text/javascript"> setTimeout( function() { var mytext = document.getElementById("rptext"); mytext.focus(); mytext.select(); } , 1); </script> <style type="text/css"> <!-- a { text-decoration:none; } .style3 {font-size: larger} --> </style> </head> <body> <body onLoad = "focusIt()"> <script language="javascript" type="text/javascript"> //window.alert("hello"); function focusIt() { var mytext = document.getElementById("rptext"); mytext.focus(); } </script> <form action=main.php#thebottom method=post target=TOP name=theForm onSubmit="clearForm(theForm)"> <table width="204" border="0" align="left" cellpadding="10"> <tr> <td width="18" valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=look+at+$x\" target=\"TOP\" style=\"text-decoration:none\">APPEARANCE</a>" ?></div></td> <td width="18" valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=stats\" target=\"TOP\">STATS</a>" ?></div></td> <td width="18" valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=quests\" target=\"TOP\">QUESTS</a>" ?></div></td> <td width="18" valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=who\" target=\"TOP\">WHO</a>" ?></div></td> <td width="20" valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=description\" target=\"TOP\">DESCRIPTION</a>" ?></div></td> </tr> <tr> <td valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=settings\" target=\"TOP\">SETTINGS</a>" ?></div></td> <td valign="middle"><div align="center"><? echo "<a href=\"wiki\" target=\"_blank\">HELP</a>" ?></div></td> <td valign="middle"><div align="center"><? echo "<a href=\"main.php?username=$x&password=$y&action=listmail\" target=\"TOP\">MAIL</a>";?></div></td> <td colspan="2" valign="middle"><div align="center"><span class="style3"><? echo "<b><a href=\"main.php?username=$x&password=$y&action=quit\" target=\"TOP\"><u>LOG OUT</u></a></b>" ?></span></div> <div align="center"></div></td> </tr> </table> <table width="627" border="0" align="right" cellpadding="0"> <tr> <td width="132"><div align="right"><?$admin = get("admin");if($admin == "Y" || $admin == "Y+" || $admin === "special") echo "<a href=\"admin.php\" target=\"TOP\">ADMIN PANEL</a>";?> </div></td> <td width="317" rowspan="3"><div align="center"> <textarea name="nonaction" cols="50" rows="3" wrap="virtual" id="rptext" class="textarea"></textarea> </div></td> <td width="151"><div align="right"></div></td> </tr> <tr> <td><div align="right"> <?$admin = get("admin");if($admin == "Y+") echo "<input type=checkbox name=nolog>";?> </div></td> <td> <input type=submit value=SUBMIT> </a></td> </tr> <tr> <td><div align="right"> <? //<form action=main.php#thebottom method=post><input type=hidden name=username value=$x><input type=hidden name=password value=$y><input type=submit border=0 style=border:0;background-color:#006;color:#FF0;font-family:Tahoma; name=command value=Clear></form> //<a href=\"main.php?username=$x&password=$y&action=clear\" target=\"TOP\">Clear</a> ?> <? echo "<input type=button onclick=\"theForm.action.value='clear';theForm.submit();\" border=0 style=border:0;background-color:#000;color:#FF0;font-weight:bold; value=CLEAR>" ?></div></td> <td><div align="right"> <input type=hidden name=action value=""> <input type=hidden name=username value=<?=$x?>> <input type=hidden name=password value=<?=$y?>> </div></td> <br> </table> </FORM> <div align="center"> <p> </p> <p><a href="https://www.ixwebhosting.com/templates/ix/v2/affiliate/clickthru.cgi?id=jrdelaney" target="_blank"><img src="https://www.ixwebhosting.com/templates/ix/v2/images/banners/88x31-businessplus.gif" border=0 align="absmiddle"></a></p> </div> <script type="text/javascript"> var googie1 = new GoogieSpell("googiespell/", "http://www.katarra.net/sendReq.php?lang="); googie1.decorateTextarea("rptext"); </script> </body> </html> Hi! I am trying to use a very simpe wysiwyg-editor. It works fine, except i don't know how to proces the data from the iframe. I simply cant make use of the text written. Code: <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript"> function Init() { document.getElementById("rte").contentWindow.document.designMode = "On"; } function doBold() { document.getElementById("rte").contentWindow.document.execCommand('bold', false, null); } function doItalic() { document.getElementById("rte").contentWindow.document.execCommand('italic', false, null); } function doURL() { var mylink = prompt("Enter a URL:", "http://"); if ((mylink != null) && (mylink != "")) { document.getElementById('rte').contentWindow.document.execCommand("CreateLink",false,mylink); } } function doImage() { myimg = prompt('Enter Image URL:', 'http://'); document.getElementById('rte').contentWindow.document.execCommand('InsertImage', false, myimg); } </script> </head> <body onLoad="Init();"> <input type="submit" name="btnBold" value="bold" on id="btnBold" onClick="doBold();"> <input type="submit" name="btnItalic" id="btnItalic" value="italic" onClick="doItalic();"> <input type="submit" name="btnURL" id="btnURL" value="URL" onClick="doURL();"> <input type="submit" name="btnImg" id="btnImg" value="Image" onClick="doImage();"> <br> <form action="process.php" method="post"> <iframe name="rte" id="rte"><textarea name="areal"></textarea> </iframe> <br> <input type="submit" value="Submit"></form> </body> </html> Most editors seem use this iframe-thing, without telling how to send the information by a form. Hi, I have a form that when you click submit gives a warning box asking if to continue code below Now when I type in the text field and press enter it doesn't submit nor does it pop up the warning box, how would I do this Code for submit button Code: <script LANGUAGE="JavaScript"> <!-- function submitMyForm() { var agree=confirm("ARE YOU SURE ?"); if (agree) return true ; else return false ; } // --> </script> Code: <form action="admin-delete.php" method="post" name="cp_delete" id="cp_delete"> <input type="text" name="cp_delete_bg" id="cp_delete_bg"> <input type="submit" name="submit" value="submit" onclick="return submitMyForm()"/> </form> 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! I have created some online software which uses form data to submit to another page. The problem is that I have other submit buttons in the same form which submit to different pages (depending on which button is pressed). The first submit button works fine but all the others only work once. Code: <input class="cssbutton" type='submit' value='Button1' onclick="wbform.action='page1.php'; target='mainFrame'; return true;"> <input class="cssbutton" type='submit' value='Button2' onclick="wbform.action='page2.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button3' onclick="wbform.action='page3.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button4' onclick="wbform.action='page4.php'; target='topFrame'; return true;"> <input class="cssbutton" type='submit' value='Button5' onclick="wbform.action='page5.php'; target='_blank'; return true;"> <input class="cssbutton" type='submit' value='Button6' onclick="wbform.action='page6.php'; target='_blank'; return true;"> Any ideas my friends? Hi all Is using the real form submit button a problem in any way? Can it actaully send a form when a person uses 'enter' in a text field. When I use this submit, it triggers my validation which is great. Code: <input type="submit" value="OnSubmit validate" /> However this way doesn't seem to trigger my validation although It may solve the above form send problem (if that realy exists). How do I get it to act the same as real submit so it will trigger validation like onsubmit above? Code: <input type="button" value="Send Feedback" onclick="this.form.submit()" /> LT does any of that make sense? all ideas helpful and appreciated I've got the following 2 fields in my form: <input type="file" name="filename" id="filename" value="filename"> <input type="submit" name="submit" value="Upload Image" /> Now I want to hide both of them as soon as the submit button is pressed. Problem is that I'm a javascript noob and I can't find it with google :S Can someone help me? I am trying to auto submit a login form remotely using .submit() . It's submitting, but for some reason if I use submit() the login isn't processing. However, if I turn off the auto submit and use an actual submit button it logs in just fine. Now, in the form tag there is a call onsubmit for some validation, does .submit() trigger that form onsubmit="" function? Is there something that happens differently when a user clicks a button verses the .submit(). Thanks! Paul Hi all, I'm designing something to addon to an existing product. I'm struggling with some javascript problems. I want to submit a hidden field when you click on an image button, rather than it being an actual submit button. It's going to submit the value "1" to a PHP page, but I don't want it to actually have to GO to the PHP page, just submit it within the webpage. Is this possible? Thanks 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) 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 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. 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? I found a script that is perfect for my need but it is written for forms textareas and I can seem to get it to work textareas that are not wrapped in form. Code: Code: <script>function insertAtCursor(sTag,eTag) { var obj = document.form.message; var strPos; var ie_strPos; var oSel; obj.focus(); strPos += sTag.length + eTag.length; ie_strPos += sTag.length + eTag.length; if (document.selection && document.selection.createRange) { // Internet Explorer oSel = document.selection.createRange(); if (oSel.parentElement() == obj) { oSel.text = sTag + oSel.text + eTag; ie_strPos += oSel.text.length; } oSel.moveStart ('character', ie_strPos); oSel.moveEnd ('character', 0); oSel.select (); } else if (typeof(obj) != "undefined") { // Firefox var longueur = parseInt(obj.value.length); var selStart = obj.selectionStart; var selEnd = obj.selectionEnd; obj.value = obj.value.substring(0,selStart) + sTag + obj.value.substring(selStart,selEnd) + eTag + obj.value.substring(selEnd,longueur); strPos += txtarea.value.substring(selStart,selEnd).length; obj.selectionStart = strPos; obj.selectionEnd = strPos; obj.focus (); } else obj.value += sTag + eTag; obj.focus(); } </script> <button onclick="insertAtCursor('[blah]','[/blah]')">Test</button> <form method="post" name="form" action=""> <textarea name="message" cols="50" rows="10"></textarea> </form> My textarea: Code: <textarea id="new_topic_text" class="new-topic-subject-text elastic" style="overflow: hidden;"></textarea> 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
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, 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? 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'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:-) |