|
JavaScript - Javascript Textarea
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 Similar TutorialsI'm not 100% sure if this can be done (I haven't been particularly successful in my Google searches). I'm using Javascript and forms to create conditional information randomizers for data. An example might be "What should you have to eat?" The person can generate a random result or select restrictions (selecting an allergy to X would eliminate X-related results). I prefer to work with black backgrounds. Even if I end up changing a default site layout to non-black (for audience purposes), I'd want a personalized CSS for myself. I'm running into some difficulty determining how to make my textarea black. Is there a way to apply CSS to textarea boxes (including those related to javascript?) Ideally, I'd like to be able to automatically style every textarea but if that is not possible in relation to javascript, I'd settle for changing the code for individual boxes. I was unsure where to place this topic so feel free to move it if it's better suited for CSS. Thanks *** I figured I didn't need to bump my post needlessly, but Thanks to "devnull69" as the provided solution worked. For some reason, I was confused about how to type that operation in css properly. That's probably one of the problems that arises when one combines staying up late with learning multiple programming languages at the same time. All is well now. I found and am using the following script to add checkbox values to a textarea. Code: <script type="text/javascript">
function add_sub(el){
if (el.checked)
el.form.elements['type'].value+=el.value;
else{
var re=new RegExp('(.*)'+el.value+'(.*)$');
el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
}
}
</script>
</head>
<body>
<form name="form1" method=post>
<textarea name="type" rows="5" cols="35" onclick="this.focus();this.select();">
</textarea><br>
<input type="checkbox" name="bob" id="bob" value="<p>" onclick="add_sub(this);"><label for="bob"><p></label><br>
<input type="checkbox" name="bob1" id="bob1" value="<span>" onclick="add_sub(this);"><label for="bob1"><span></label><br>
<input type="checkbox" name="bob2" id="bob2" value="<div>" onclick="add_sub(this);"><label for="bob2"><div></label>
That is working. However, I wanted to put carriage returns after each checkbox value added, so I added the + "\r\n" as follows: Code: <script type="text/javascript">
function add_sub(el){
if (el.checked)
el.form.elements['type'].value+=el.value + "\r\n";
else{
var re=new RegExp('(.*)'+el.value+'(.*)$');
el.form.elements['type'].value=el.form.elements['type'].value.replace(re,'$1$2');
}
}
</script>
That is working when adding the value, but removing the value when the checkbox is unchecked is not working. I know the regular expression, etc. needs to be updated to account for the carriage returns, but I have tried everything I can think of and cannot get it to work. Help correcting the code is appreciated. Hello, I'm trying to create a textarea using Javascript, the function creates a textarea in IE, but it does not create that element in Firefox and chrome. JavaScript Code:- Code: function addRow()
{
alert("function start");
var table = document.getElementById('tableId');
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var textNode = document.createTextNode(rowCount + 1);
cell1.appendChild(textNode);
var cell2 = row.insertCell(1);
var textArea = zxcFormField('TEXTAREA','option1');
textArea.setAttribute("cols","20");
textArea.style.height = "42px";
textArea.style.width = "496px";
cell2.appendChild(textArea);
alert("function end");
}
function zxcFormField(tag,nme,type){
alert("2 function start");
var el;
try {
alert("In Try");
el=document.createElement('<'+tag+(type?' type='+type:'')+' name='+nme+' >');
}
catch (e){
alert("In Catch");
el=document.createElement(tag);
if (type) el.type=type;
el.name=nme;
}
return el;
}
When I call this function it goes in the catch block in Firefox and Chrome, the textarea is displayed and it disappears with a flash. I've banged my head against wall trying to figure this out. Thanks, Abhishek I am looking for a javascript that when a image is clicked on it clears a textarea
Hi I'm looking for ways to limit the textarea input, I dont want people to enter hundreds of lines cause, i only want them to enter max. 10 lines. I've looked at several javascripts (cause the problem only can be solved by javascript), and came up with this script: http://javascript.internet.com/forms...-textarea.html . It works great and even has a counter how many characters are left to type in. However when I copy paste something, the 'counter' doesnt adjust right away...it does when I try to type in something extra though. Is it possible to make the counter adjust automaticly whenever there is pasted ? I guess you guys have to test to see what I mean. Thanks in advance !! I am trying to create a sample form using javascript. The form has a series of option and a submit button followed by a textarea. When the user clicks the submit button the textarea should be filled with the selected information from the form. I cannot get the textarea to fill with text. I believe the problem lies in the fact that when I submit the form the page refreshes, but I am not sure if that's the case. With this version of the code I actually can't get passed the Room Type. It always says No Room Type selected. Here is my code: 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>Form Sample</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript">
<!--
function checkForm(myForm)
{
regexp = /^\d\d\/\d\d\/\d{4}$/;
numReg = /^\d*$/;
str = "";
for (i = 0; i < 5; i++)
{
if (!myForm.roomType[i].checked)
{
alert("No Room Type Selected!\nPlease Select Room Type!");
return;
}
str += "Room Type: ";
str += myForm.roomType[i].value + "\n"
}
str += "Activities: \n";
for (i = 0; i < 4; i++)
{
if (!myForm.activity[i].checked)
{
alert("No Activities Selected!\n Please Select Activities!");
return;
}
str += "\t" + myForm.activity[i].value + "\n";
}
if (myForm.hotels.selectedIndex+1 < 1)
{
alert("No Hotel Selected!\n Please Select a Hotel!");
return;
}
else
{
str += "Hotel: ";
for (var i = 0; i < myForm.hotels.length; i++)
{
if (myForm.hotels[i].selected)
{
str += myForm.hotels[i].value + "\n";
}
}
}
if ( myForm.confname.value == "" || myForm.confname.value == null)
{
alert("No Conference Name Entered! Please Enter a Conference Name!");
return;
}
else
{
str += "Conference Name: " + myForm.confname.value + "\n";
}
if (!regexp.test(myForm.date.value))
{
alert("Invalid Date");
return;
}
else
{
str += "Date: " + myForm.date.value + "\n";
}
if (!numReg.test(myForm.zip.value))
{
alert("Invalid Zip Code");
return;
}
else
{
str += "Zip Code: " + myForm.zip,value + "\n";
}
myForm.info.value = str;
}
</script>
</head>
<body>
<h1>Host your Conference!</h1>
<form name="conference" method="post" onsubmit="checkForm(this); return false;" action="#">
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Select Room Type Type:<br />
</div>
<div style="color:#FFCC00; font-weight:bold;">
<input type="radio" name="roomType" value="Large Meeting Room" />Large Meeting Room<br />
<input type="radio" name="roomType" value="Small Meeting Room" />Small Meeting Room<br />
<input type="radio" name="roomType" value="Video Conference Room" />Video Conference Room<br />
<input type="radio" name="roomType" value="Theater Lecture Hall" />Theatre Lecture Hall<br />
<input type="radio" name="roomType" value="Convention Center" />Convention Center<br />
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Select Activities:<br />
</div>
<div style="color:#FFCC00; font-weight:bold;">
<input type="checkbox" name="activity" value="Swimming" />Swimming<br />
<input type="checkbox" name="activity" value="lecture" />Lecture<br />
<input type="checkbox" name="activity" value="Golf" />Golf (Gentlemen Only Ladies Forbidden)<br />
<input type="checkbox" name="activity" value="Tour of the Facilities" />Tour of the Facilities<br />
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Select Hotel:<br />
</div>
<div style="color:#FFCC00; font-weight:bold;">
<select name="hotels" size="4">
<option name="marriott" value="Marriot">Marriott</option>
<option name="doubleTree" value="Double Tree">Double Tree</option>
<option name="comfortSuites" value="Comfort Suites">Comfort Suites</option>
<option name="sheraton" value="Sheraton">Sheraton</option>
</select>
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Confence Name:
<input type="text" name="confname" size="60" />
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Zip Code:
<input type="text" name="zip" size="12" value="Enter Zip Code"/>
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Date:
<input type="text" name="date" size="10" value="mm/dd/yyyy" />
</div>
<br />
<div>
<input name="confSubmit" type="submit" style="background:#CCCCCC !important; color:#333333 !important;"
value="It's Conference Time!" />
<input name="confReset" type="reset" style="background:#CCCCCC !important; color:#333333 !important;"
value="Reset Form" onclick="javascript:return checkForm(this.form);" />
</div>
<br />
<div style="font-size:20px; font-weight:bold; color:#FF0000;">
Print This:
<textarea type="text" name="info" size="1200" style="vertical-align:text-top; height:175px; width:325px;">
</textarea>
</div>
</form>
</body>
</html>
And here is a link to the page: Form Sample I've done a bit of searching and I can't find the answer to my question. I'm working on a website for my business. I have some basic knowledge of coding but I'm mostly a code cobbler. I find various pieces and put it together and hope it works so take it easy on me. I have some code to display products on my site. It works fine. We just have a lot of products and for me to add each one by hand was getting ridiculous. I finally had the bright idea to use Javascript to generate the code for me and then copy it back into my actual HTML page. Last night I wrote the code below. It works perfectly except I have to constantly "View Source" in order to get the code. I was hoping to cut down on a step or two and have the code go into a TextArea. From there I can just select it and copy it into the HTML file. It should make things a little quicker and most importantly easier. Maybe after that I'll try to figure out how to write function to select everything in the TextArea and copy it to my clipboard. That would make things even faster. Any help? 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=iso-8859-1" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
function calc (form) {
var images = form.images.value;
var imagesArray = images.split("\n");
var linebreak = "<br />";
var i=0;
var j=0;
var a=0;
while(i < imagesArray.length)
{
if(j==0)
{
document.write (" <!-- -------------------------------------------- -->\n");
document.write (" <div id=\"cols3-top\"></div>\n");
document.write (" <div id=\"cols3\" class=\"box\">\n");
}
a++;
if(j/2!=1)
{
if(a==imagesArray.length)
{
document.write ("\n <!-- ---------------- -->\n\n");
document.write (" <div class=\"col last\">\n");
document.write (" <h3>Header</h3>\n");
document.write (" <p class=\"nom t-center\">\n");
document.write (" <a href=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" class=\"nivoZoom center\"><img src=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" alt=\"" + imagesArray[i] +"\" height=\"200px\" /></a></p>");
document.write (" <!-- /col-text -->\n");
document.write (" <div class=\"col-itemnum\">PDU: " + imagesArray[i] + "</div>\n");
document.write (" </div>\n");
document.write (" <!-- /col -->\n");
document.write (" <hr class=\"noscreen\" />\n");
document.write (" </div>\n");
document.write (" <div id=\"cols3-bottom\"></div>\n");
document.write (" <!-- /Columns End Here -->\n\n\n");
break;
}
else
{
document.write ("\n <!-- ---------------- -->\n");
document.write (" <div class=\"col\">\n");
document.write (" <h3>Header</h3>\n");
document.write (" <p class=\"nom t-center\">\n");
document.write (" <a href=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" class=\"nivoZoom center\"><img src=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" alt=\"" + imagesArray[i] +"\" height=\"200px\" /></a></p>");
document.write (" <!-- /col-text -->\n");
document.write (" <div class=\"col-itemnum\">PDU: " + imagesArray[i] + "</div>\n");
document.write (" </div>\n");
document.write (" <!-- /col -->\n");
document.write (" <hr class=\"noscreen\" />\n");
i++;
j++;
}
}
else
{
document.write ("\n <!-- ---------------- -->\n\n");
document.write (" <div class=\"col last\">\n");
document.write (" <h3>Header</h3>\n");
document.write (" <p class=\"nom t-center\">\n");
document.write (" <a href=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" class=\"nivoZoom center\"><img src=\"../../product_imgs/resins/pdu/54xxxgs/" + imagesArray[i] + ".jpg\" alt=\"" + imagesArray[i] +"\" height=\"200px\" /></a></p>");
document.write (" <!-- /col-text -->\n");
document.write (" <div class=\"col-itemnum\">PDU: " + imagesArray[i] + "</div>\n");
document.write (" </div>\n");
document.write (" <!-- /col -->\n");
document.write (" <hr class=\"noscreen\" />\n");
document.write (" </div>\n");
document.write (" <div id=\"cols3-bottom\"></div>\n");
document.write (" <!-- /Columns End Here -->\n\n\n");
i++;
j=0;
}
}
document.close();
}
</script>
</head>
<body>
<div style="width:960px; margin:0 auto;">
<form name="myform" method="get" action="">
<textarea label="Image Names:"name="images" cols="30" rows="15" onclick="this.value=''" ></textarea>
<p>
<label>
<input type="button" name="calculate" value="Calculate" onClick="calc(this.form)"/>
</label>
</p>
</form>
</div>
</body>
</html>
I am looking for a javascript code for this idea under this message ---------------------------------------------------------------------------------------------------------------------------------------------------- I want to create a kind of shopping website so when you click on a image or text it will add some text to a textarea,, it will include the name of item and price of an item 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) 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 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> 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:-) 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'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. 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 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. |
|||||||