JavaScript - Displaying Text In Textarea Object

Hey guys,

I have a question about sending text to a textarea. What I want is, if I click on a button, a text has to be sent to my textarea, which I obtain from my mysql database. This last thing I can do myself, but I do not know how to send the text to my textarea.

I don't know nothing from AJAX yet, so I think it can be done with AJAX, but also with javascript I guess. Could someone point me in the right direction?

Thanks!

I searched about this problem over Internet and found the same result many times, I found this example on stack overflow but this example didn't work in my project; I am making a toolbar with buttons that insert HTML tags around the selected text in a <textarea>, this exemple didn't work because when the user click on a button the selected text won't be selected anymore because <textarea> loses focus and selected text will be unselected, I am targeting Firefox and compatible browsers so you don't need to give me the IE code; jQuery codes are accepted; so, have you any idea?

I have searched this forum for similar queries & have come up with this
http://jsfiddle.net/defencedog/P33FR/

I don't know why this ain't working

How can I get the selected text of a textarea with JavaScript?

example:
Code:

<form name="reportForm">
<textarea name="report"></textarea>
<br />
<input type="button" onClick="GetSelectedText();" />
</form>

Thanks

IC

I need to clear the default value from a textarea when a user clicks on the textarea and then replace it if the user clicks away from the textarea without modifying it. I have managed to accomplish this with the textfields in my forms but I am struggling to get the textarea element to mimic this behavior.

Here is the script I am using:

Code:

addEvent(window, 'load', init, false);

function init() {
    var formInputs = document.getElementsByTagName('input');
    for (var i = 0; i < formInputs.length; i++) {
        var theInput = formInputs[i];
        
        if (theInput.type == 'text' && theInput.className.match(/\binput\b/)) {  
            /* Add event handlers */          
            addEvent(theInput, 'focus', inputText, false);
            addEvent(theInput, 'blur', replaceDefaultText, false);
            
            /* Save the current value */
            if (theInput.value != '') {
                theInput.defaultText = theInput.value;
            }
        }
    }
}

function inputText(e) {
    var target = window.event ? window.event.srcElement : e ? e.target : null;
    if (!target) return;
    
    if (target.value == target.defaultText) {
        target.value = '';
    }
}

function replaceDefaultText(e) {
    var target = window.event ? window.event.srcElement : e ? e.target : null;
    if (!target) return;
    
    if (target.value == '' && target.defaultText) {
        target.value = target.defaultText;
    }
}

HTML:
[HTML]
<form action="#">
<fieldset>
<legend></legend>
<input type="text" value="Your Name" id="name" class="input" />
<label for="name">Name Required</label><br/>
<input type="text" value="Your Email" id="email" class="input"/>
<label for="email">E-mail Required</label><br/>
<input type="text" value="Your Website" id="website" class="input"/>
<label for="website">Website</label>
<textarea rows="15" cols="71">Your Message Goes Here.</textarea>
<input type="submit" value="Submit Comment" class="button" />
</fieldset>
</form>
[/HTML]

I am really just trying to get this form to behave the way all other forms on the internet work- where text clears when a user clicks on a form element and replaces itself if the user doesn't enter new text. I have it working on the text field but no the textarea. Help!

Hello there,

I am having trouble with a javascript snippet that adds text to a textarea when you click on the link.

Problem is that when you regularly type into the textarea, the links no longer add text.

Here is the links:
Code:

<a href="javascript:insertText('<b></b> ','textIns');" onClick="void(0)">Bold</a>

Here is the javascript
Code:

<script type="text/javascript">
function insertText(val,e) {
document.getElementById(e).innerHTML+=val;
}
</script>

Any ideas or suggestions?

Hi Guys,
I am new to this forum,based on the combobox value,I am creating a textboxes dynamically in jsp .Based on the count of textboxe's the textarea content comes with <value1> like this...
Here i tried like this,
<html>
<head>
<script>
function copy_data(val,id,textareaValue){
var enteredText = val;
alert("enteredText -----------"+enteredText);
var boxId= id;
alert("boxId-----------"+boxId);
var textValue= textareaValue;
alert("textValue-----------"+textValue);
var beforeBrac = textValue.substring(0,textValue.indexOf("<"));
alert("beforeBrac -----------"+beforeBrac );
var inbracket = textValue.substring(beforeBrac.length+1,textValue.indexOf(">"));
alert("inbracket -----------"+inbracket);
if(boxId = "1"){
inbracket = val;
}
alert("inbracket -----------"+inbracket);
var afterBrac = textValue.substring(textValue.indexOf(">"),textValue.length);
alert("afterBrac -----------"+afterBrac );

var fstr = beforeBrac +"<"+inbracket +afterBrac ;
if(boxId == "1"){
document.getElementById('txtArea').value = fstr;
alert("final str value is"+fstr);

}
}
</script>
</head>
<body>
<input type="text" name ="a" id="1" onkeyup="copy_data(this.value,this.id,document.getElementById('txtArea').value)"/>
<input type="text" name ="a" id="2" onkeyup="copy_data(this.value,this.id, document.getElementById('txtArea').value)"/>
<textarea rows="2" cols="20" id="txtArea">
At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced <XML>, SQL, ASP, and PHP.
</textarea>
</body>
</html>

three text boxes with some value [ value1 ] [value2] [value3 ]
this is the text area content:-
At W3Schools you <will> find all <the> Web-building tutorials <you> need, from basic HTML to advanced XML, SQL, ASP, and PHP.

the output should be :-
At W3Schools you <value1> find all <value2> Web-building tutorials <value3 > need, from basic HTML to advanced XML, SQL, ASP, and PHP...
But i can't get it exactly..When i enter or delete the value it should replaced in the proper <> correctly.. If i enter the value in 1st textbox it should replace the value 1st <>.same for others also...Any Idea's ?Plz suggest me ...

Sup yo, I need to add text in a <textarea>, but i can only append text at the end.
Is there any way to add text to where the cursor is currently at?

Code:

function addCharm(var1) {
	var newtext = var1;
	document.lolform.inputtext.value += newtext;
}

And below i has sum buttonz that uses that function.
So, again, how can I add text to where the I-beam is currently, instead of at the end?

Thanks in advance.

Hi,

I am having trouble searching for text in a textarea in all browsers. I display formatted text in a textarea with tinyMCE editor. Some of the text contains blanks ('______') which the user needs to find and fill in (usually with a number).

I have written a new button on the toolbar of the editor which will find and highlight the blank when clicked. The user will click the button, fill in the text, click the button, fill in the text, etc.

In IE the blanks are highlighted just fine. The only problem is: user clicks button and first blank is highlighted. User fills in the text then clicks the button again. Second blank should be highlighted but it skips right to the third blank. If you don't fill anything in, the next blank will be highlighted. If you highlight and then fill anything in, the next blank is skipped and the following blank is highlighted. Any thoughts?

But my worst problem is with Mozilla. I get an error. It does not act like setSelectionRange(pos, pos+len(str)) is a valid function call.

I receive the following error: "component returned failure code: 0x800004005 (NS_ERROR_FAILURE)[nsIDOMNSHTML TextareElement.setSelectionRange]"

Here is my function:
var win = window;
var n = 0;
var str = '______';
function FindBlanks() {
var txt, i, found;
win = tinyMCE.get('txtPolicy').getDoc();
if (str == "") return false;
if (window.execScript) {
txt = win.body.createTextRange();
//Find the nth match from the top of the page
for (i = 0; i <= n && (found = txt.findText(str)) != false; i++) {
txt.moveStart("character", 1);
txt.moveEnd("textedit");
}
// If found, mark it and scroll it into view
if (found) {
txt.moveStart("character", -1);
txt.findText(str);
txt.select();
txt.scrollIntoView();
// n = i--;
n++;
}
//Otherwise, start over at the top of the page and find first match
else {
if (n > 0) {
n = 0;
alert("End of document has been reached.");
}
//Not found anywhere, give message.
else
alert("No blanks found.");
}
} else {
//document.getElementById('txtPolicy').setFocus;
var ht = '______';
if (ht.length == 0)
{
alert('highlightText has zero lenth');
return false;
}
var str2 = document.getElementById('txtPolicy').value;
var startPos = str2.indexOf(ht);
if (startPos == -1)
{
alert('No blanks found');
return false;
}
document.getElementById('txtPolicy').focus();
document.getElementById('txtPolicy').setSelectionRange(startPos, startPos + ht.length);
return true;
if (n == 0)
alert ("No blanks found.");
}
return false;
}

Can anyone help me with this?
Thanks.

Hi again

For instance I want to display some announcements from an external text file on a predefined box, like lets say 140 wide and height scalable according to text. The texts would be some announcements from me, a few words. I want the text justified and with previous / next link, if possible. And when they navigate to another page, they will get a random message in that box.

There are news tickers on the net, but I just want something simple like this, no scrolling, fading, etc..

Has anyone a clue how I can accomplish that? Thanks.

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

Hello there!

I am completely new to these forums and to programming in general (however, I used to program some games, albeit not very good ones, on a version of BASIC that came with my Playstation 2 about 10 years ago hehe). I have a basic understanding of functions, loops, if/else/switch and an extremely basic understanding of objects/methods. I wanted to consolidate my knowledge by putting it to practical use so I have made a little text adventure game. At the moment it is horrendously non-user-friendly as it has just been me experimenting with functions, if/else statements etc.

Anyway, below is my code and I have two specific questions regarding it (but general answers telling me how I could do things more efficiently OR telling me what I should consider studying would be very appreciate also :)).

Firstly, I have a little inventory object up top and when the player picks up something in the game I change the inv item to "true" so they can use it later (it seemed logical!). I would really love to know how the user could type in "inv" and for their inventory to be shown back to them. i.e. How could I show only the "true" items of an object? I have tried coding this myself but I really am stumped for an answer.

Secondly, you can see in the "north21" function within the "north2" function that I used a series of if/else statements instead of a switch. I would have much prefered to use a switch and then for the case of "go north" have an if/else statement to check if vineclear is true or not (so that they can pass through to the non-existent north3 room). Is this possible? You can use if/else statements within an if/else statement but it seemed when I tried doing that in a switch it didn't like it.

I am running this script through an interpreter to play the "game". I understand that JS probably isn't the best for what I am trying to do, it was more just a "see what I can do" exercise more than anything.

Thanks in advance for your help and please be nice to me, forums scare me generally :D

testgame.txt

I have to attach the code in a txt file as for some reason it wasn't displaying properly when I copied and pasted it here. Apologies!





Reply With Quote




01-17-2015, 08:26 PM #2
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,310 Thanks 82 Thanked 4,754 Times in 4,716 Posts

Briefly: Code:

// based on this:
var inv = {
	sword: false,
	shield: false,
	vines: false
};

// try this:
function displayInventory( )
{
    var list = [ ];
    for ( var item in inv )
    {
        if ( inv[item] == true )
        {
            list.push( item );
        }
    }
    if ( list.length == 0 ) 
    {
        return "You have no items in your inventory";
    }
    return "You have these items in your inventory:<ul><li>"
           + list.join("</li><li>") + "</ul>";
}

My code is designed for display in an HTML page, not for use in clumsy console.log( ) coding. prompt() and alert() and confirm() and document.write() and console.log() should be used ONLY when debugging, not for any real work.

But if you must use console.log, then try this, to replace the code in italics: Code:

    return "You have these items in your inventory: " + list.join(",");

Here's a noodle-scratcher:

I have a jwplayer in my page, and I've placed a short text describing it underneath it. Works fine in FF and Chrome, but in IE the text vanishes after you click the "Allow blocked content" permissions to allow activex controls.

This is what it looks like:
Code:

<object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='450' height='277' 
id='single1' name='single1'><param name='movie' value='jwplayer/player.swf'><param name=
'allowfullscreen' value='false'><param name='allowscriptaccess' value='always'><param name=
'wmode' value='transparent'><param name='flashvars' value='file=myVideo.f4v&autostart=true'>
<embed  id='single2'  name='single2'  src='jwplayer/player.swf'  width='450'  height='277'
allowscriptaccess='always'  allowfullscreen='false'  flashvars='myVideo.f4v
&autostart=truevolume=50'/>
<br/>
Here is my description text.<br/>

If I place the text above the object, then it shows up fine. I'd rather not put it there, but I can if I can't figure the problem out.

Any thoughts? Why is IE destroying my text?

Thanks as always,
~gyz

Hi there, this is my first post.

I'm very new to javascript and have been programming a "beer counter" that simply counts +1 into a text object after every click. After I got this to work I copied the code in order to make a clear button / function. I've been having problems, even though the code seems to be identical. This is likely an obvious question, pardon my inexperience.


<html>
<head>
<title>Beer Counter</title></head>
<body><script language="Javascript">

var beers = 0
var output =""

function beer()
{
beers = beers + 1
output = document.getElementById('output')
output.value = beers
}

function clear()
{
beers = 0
output = document.getElementById('output')
output.value = beers
}

</script>

<input type='button' value='Crush' onclick='beer()'; /> Beer count:</input>
<input type='text' id='output' name='output'; /><br/>
<input type='button' value='Clear' onclick='clear()'; />
</body>
</html>

I've got this code, and nothing happens when I click the button! Please help.

<!DOCTYPE HTML>
<html>
<head>
<title> Author Identifier </title>

</head>
<body>
<form action="w3schools.com" id="theForm">
<textarea name="input1" id="input1" rows=8 cols=80>Enter a passage from an author of your choice.</textarea>
<br>
<textarea name="input2" id="input2" rows=8 cols=80>Enter another passage from an author of your choice.</textarea>
<br>
<textarea name="input3" id="input3" rows=8 cols=80>Enter a third passage from an author of your choice.</textarea>
<br>
<br>
<br>
<textarea name="input5" id="input5" rows=8 cols=80>Enter a passage from a second author of your choice.</textarea>
<br>
<textarea name="input6" id="input6" rows=8 cols=80>Enter another passage from the second author of your choice.</textarea>
<br>
<textarea name="input7" id="input7" rows=8 cols=80>Enter a third passage from the second author of your choice.</textarea>
<br>
<br>
<br>
<textarea name="input8" id="input8" rows=8 cols=80>Enter a passage from a third author of your choice.</textarea>
<br>
<textarea name="input9" id="input9" rows=8 cols=80>Enter another passage from the third author of your choice.</textarea>
<br>
<textarea name="input10" id="input10" rows=8 cols=80>Enter a third passage from the third author of your choice.</textarea>
<br>
<br>
<textarea name="Author1" id="Author1" rows=4 cols=40>Enter the first author's name.</textarea>
<br>
<textarea name="Author2" id="Author2" rows=4 cols=40>Enter the second author's name.</textarea>
<br>
<textarea name="Author3" id="Author3" rows=4 cols=40>Enter the third author's name.</textarea>
<br>
<br>
<textarea name="input4" id="input4" rows=8 cols=80>Enter the passage by the author to be determined.</textarea>
<br>
<input type="button" id="button" name="button" onClick="allThatStuff()" value="Determine the Author!">
<br>
<textarea name="Output" id="Output" rows=4 cols=40 readonly></textarea>
</form>
<script type="text/javascript">
var form = document.getElementById("theForm");
form.input4.onclick = function( )
{
var Author1 = form.Author1.value
var Author2 = form.Author2.value
var Author3 = form.Author3.value
var TextInput = form.Input1.value;
var TextInput0 = form.Input2.value;
var TextInput1 = form.Input3.value;
var TextInput2 = form.Input5.value;
var TextInput3 = form.Input6.value;
var TextInput4 = document.form.Input7.value;
var TextInput5 = form.Input8.value;
var TextInput6 = form.Input9.value;
var TextInput7 = form.Input10.value;
var TextInput8 = form.Input4.value;
var sentences = TextInput.split(".");
var sentences0 = TextInput0.split(".");
var sentences1 = TextInput1.split(".");
var sentences2 = TextInput2.split(".");
var sentences3 = TextInput3.split(".");
var sentences4 = TextInput4.split(".");
var sentences5 = TextInput5.split(".");
var sentences6 = TextInput6.split(".");
var sentences7 = TextInput7.split(".");
var sentences8 = TextInput8.split(".");
var SentencesPerText = sentences.length
var SentencesPerText0 = sentences0.length
var SentencesPerText1 = sentences1.length
var SentencesPerText2 = sentences2.length
var SentencesPerText3 = sentences3.length
var SentencesPerText4 = sentences4.length
var SentencesPerText5 = sentences5.length
var SentencesPerText6 = sentences6.length
var SentencesPerText7 = sentences7.length
var SentencesPerText8 = sentences7.length
var WordsTotal = 0;
var WordsTotal0 = 0;
var WordsTotal1 = 0;
var WordsTotal2 = 0;
var WordsTotal3 = 0;
var WordsTotal4 = 0;
var WordsTotal5 = 0;
var WordsTotal6 = 0;
var WordsTotal7 = 0;
var WordsTotal8 = 0;

for ( var i = 0; i < SentencesPerText; ++i )
{
var sentence = sentences[i];
var words = sentence.split(" ");
WordsTotal += words.length;
}
for ( var i = 0; i < SentencesPerText0; ++i )
{
var sentence0 = sentences0[i];
var words0 = sentence0.split(" ");
WordsTotal0 += words0.length;
}
for ( var i = 0; i < SentencesPerText1; ++i )
{
var sentence1 = sentences1[i];
var words1 = sentence1.split(" ");
WordsTotal1 += words1.length;
}
for ( var i = 0; i < SentencesPerText2; ++i )
{
var sentence2 = sentences2[i];
var words2 = sentence2.split(" ");
WordsTotal2 += words2.length;
}
for ( var i = 0; i < SentencesPerText3; ++i )
{
var sentence3 = sentences3[i];
var words3 = sentence3.split(" ");
WordsTotal3 += words3.length;
}
for ( var i = 0; i < SentencesPerText4; ++i )
{
var sentence4 = sentences4[i];
var words4 = sentence4.split(" ");
WordsTotal4 += words4.length;
}
for ( var i = 0; i < SentencesPerText5; ++i )
{
var sentence5 = sentences5[i];
var words5 = sentence5.split(" ");
WordsTotal5 += words5.length;
}
for ( var i = 0; i < SentencesPerText6; ++i )
{
var sentence6 = sentences6[i];
var words6 = sentence6.split(" ");
WordsTotal6 += words6.length;
}
for ( var i = 0; i < SentencesPerText7; ++i )
{
var sentence7 = sentences7[i];
var words7 = sentence7.split(" ");
WordsTotal7 += words7.length;
}
for ( var i = 0; i < SentencesPerText8; ++i )
{
var sentence8 = sentences8[i];
var words8 = sentence8.split(" ");
WordsTotal8 += words8.length;
}


var Author1Name = form.Author1.value
var Author2Name = form.Author2.value
var Author3Name = form.Author3.value
var WordsPerSentence = WordsTotal/SentencesPerText
var CharsTotal = TextInput.replace(/[\s\.]/g).length;
var WordsPerSentence0 = WordsTotal0/SentencesPerText0
var CharsTotal0 = TextInput0.replace(/[\s\.]/g).length;
var WordsPerSentence1 = WordsTotal1/SentencesPerText1
var CharsTotal1 = TextInput1.replace(/[\s\.]/g).length;
var WordsPerSentence2 = WordsTotal2/SentencesPerText2
var CharsTotal2 = TextInput2.replace(/[\s\.]/g).length;
var WordsPerSentence3 = WordsTotal3/SentencesPerText3
var CharsTotal3 = TextInput3.replace(/[\s\.]/g).length;
var WordsPerSentence4 = WordsTotal4/SentencesPerText4
var CharsTotal4 = TextInput4.replace(/[\s\.]/g).length;
var WordsPerSentence5 = WordsTotal5/SentencesPerText5
var CharsTotal5 = TextInput5.replace(/[\s\.]/g).length;
var WordsPerSentence6 = WordsTotal6/SentencesPerText6
var CharsTotal6 = TextInput6.replace(/[\s\.]/g).length;
var WordsPerSentence7 = WordsTotal7/SentencesPerText7
var CharsTotal7 = TextInput7.replace(/[\s\.]/g).length;
var WordsPerSentence8 = WordsTotal7/SentencesPerText7
var CharsTotal8 = TextInput7.replace(/[\s\.]/g).length;


var inputAverage11 = (CharsTotal + CharsTotal0 + CharsTotal1 + sentences.length + sentences0.length + sentences1.length + WordsTotal + WordsTotal0 + WordsTotal1 + WordsPerSentence + WordsPerSentence0 + WordsPerSentence1);
var inputAverage21 = (CharsTotal2 + CharsTotal3 + CharsTotal4 + sentences2.length + sentences3.length + sentences4.length + WordsTotal2 + WordsTotal3 + WordsTota4 + WordsPerSentence2 + WordsPerSentence3 + WordsPerSentence4);
var inputAverage31 = (CharsTotal5 + CharsTotal6 + CharsTotal7 + sentences5.length + sentences6.length + sentences7.length + WordsTotal5 + WordsTotal6 + WordsTotal7 + WordsPerSentence5 + WordsPerSentence6 + WordsPerSentence7);
var inputAverage1 = (inputAverage11 / 12);
var inputAverage2 = (inputAverage21 / 12);
var inputAverage3 = (inputAverage31 / 12);
var input4 = (CharsTotal8 + sentences8.length + WordsTotal8 + WordsPerSentence8);
var no = "no"
var yes = "yes"
for (i = 0; i < 15; ++i)
{if
input4 = (inputAverage1 + i)
{var Author1="yes"
var Author1Off = i
}
++i
}
var j = 0
while(j<15)
{if
input4 = (inputAverage1 - i)
{var Author1="yes"
var Author1Off = i
}
++j
}
var i = 0
while(i<15)
{if
input4 = (inputAverage2 + i)
{var Author2="yes"
var Author2Off = i
}
++i
}
var j = 0
while(j<15)
{if
input4 = (inputAverage2 - i)
{var Author2="yes"
var Author2Off = i
}
++j
}
var i = 0
while(i<15)
{if
input4 = (inputAverage3 + i)
{var Author3="yes"
var Author3Off = i
}
++i
}
var j = 0
while(j<15)
{if
input4 = (inputAverage3 - i)
{var Author3="yes"
var Author3Off = i
}
++j
}
if (Author1 = yes) {
if (Author2 = yes) {
if (Author3 = yes) {
if (Author1Off < Author2Off) {
if (Author1Off < Author3Off) {
form.Output.value = (Author1Name + " is the author!")
} else {
form.Output.value = (Author3Name + " is the author!")
}
} else if (Author2Off < Author3Off) {
form.Output.value = (Author2Name + " is the author!")
} else {
form.Output.value = (Author3Name + " is the author!")
}
} else if (Author1Off < Author2Off) {
form.Output.value = (Author1Name + " is the author!")
} else {
form.Output.value = (Author2Name + " is the author!")
}
} else if (Author3 = yes) {
if (Author1Off < Author3Off) {
form.Output.value = (Author1Name + " is the author!")
} else {
form.Output.value = (Author3Name + " is the author!")
}
} else {
form.Output.value = (Author1Name + " is the author!")
}
} else if (Author2 = yes) {
if (Author3 = yes) {
if (Author3Off < Author2Off) {
form.Output.value = (Author3Name + " is the author!")
} else {
form.Output.value = (Author2Name + " is the author!")
}
} else {
form.Output.value = (Author2Name + " is the author!")
}
} else if (Author3 = yes) {
form.Output.value = (Author3Name + " is the author!")
} else {
form.Output.value = "The author was unable to be determined."
}
}
</script>
</body>
</html>





Reply With Quote




01-16-2015, 02:53 PM #2
sunfighter View Profile View Forum Posts

Senior Coder Join Date Jan 2011 Location Missouri Posts 4,830 Thanks 25 Thanked 672 Times in 671 Posts

Please use code tags and put your code in them. It makes it easier on every one.

Your input button calls the function allThatStuff().
Code:

<input type="button" id="button" name="button" onClick="allThatStuff()" value="Determine the Author!">

But you do not have a function by that name. You only have a single function named Code:

 form.input4.onclick = function(){.....}

But even getting that straight wont work when you have things like:
Code:

if input4 = (inputAverage2 + i){
	var Author2="yes"
	var Author2Off = i
}

the if statement S/B Code:

if  ( input4  ==  (inputAverage2 + i) ) {....}