/    Sign up×
Community /Pin to ProfileBookmark

Poulate textarea from input text field

Copy linkTweet thisAlerts:
Jan 23.2012

how can i take the value the user enter in the input text field and dynamically writes them to the textarea

this work kinda by itself but if i put it in the “FORM” tag and have a “DOCTYPE” for the page. it will stop working

[code=html]<script Language=”Javascript”>
<!–
function typewriter(typein) {
var typeoutObj = document.getElementById(‘typeout’);
typeout.innerHTML = typein;
}
–>
</script>

<input type=”text” id=”typein” name=”typein” onkeyup=”typewriter(this.value);” />
<br/><br/>
<textarea id=”typeout” name=”typeout” disabled=”disabled”></textarea >
[/code]

to post a comment
JavaScript

8 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERJan 23.2012 — Instead of:

typeout.innerHTML = typein;

use:

typeout.value = typein;

If it still doesn't work, show what you are using for the <form> and <!DOCTYLE...>

It is always more difficult to solve a problem when you don't supply all needed information.

:rolleyes:
Copy linkTweet thisAlerts:
@tekboyauthorJan 23.2012 — i changed innerHTML to value, still same problem

here is the entire code

[code=html]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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 typewriter(typein) {
var typeoutObj = document.getElementById('typeout');
typeout.value = typein;
}
-->
</script>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<input type="text" id="typein" onkeyup="typewriter(this.value);" />
<br/><br/>
<textarea id="typeout" readonly="readonly"></textarea >
</form>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@MrSnowDropJan 23.2012 — Simply, you have to use the correct variable as declared:

[CODE]
<script type="text/javascript">[COLOR="dimgray"]<!--[/COLOR]
function typewriter(typein) {
var typeoutObj = document.getElementById('typeout');
[COLOR="DimGray"]// instead of typeout.innerHTML use the following:[/COLOR]
[B][COLOR="Red"]typeoutObj[/COLOR][/B].innerHTML = typein;
}
[COLOR="dimgray"]//-->[/COLOR]</script>
[/CODE]

Then, you can put your code inside a <FORM> without problems!
Copy linkTweet thisAlerts:
@JMRKERJan 23.2012 — Simply, you have to use the correct variable as declared:

[CODE]
<script type="text/javascript">[COLOR="dimgray"]<!--[/COLOR]
function typewriter(typein) {
var typeoutObj = document.getElementById('typeout');
[COLOR="DimGray"]// instead of typeout.innerHTML use the following:[/COLOR]
[B][COLOR="Red"]typeoutObj[/COLOR][/B].innerHTML = typein;
}
[COLOR="dimgray"]//-->[/COLOR]</script>
[/CODE]

Then, you can put your code inside a <FORM> without problems![/QUOTE]


But <textarea> still does NOT have an attribute of '.innerHTML'.

Use '.value' instead.
Copy linkTweet thisAlerts:
@MrSnowDropJan 24.2012 — But <textarea> still does NOT have an attribute of '.innerHTML'.

Use '.value' instead.[/QUOTE]

Sorry but i don't agree... the <textarea> HTML Tag needs to close itself with </textarea> and between the opening and closing Tag there's [I]innerHTML[/I], not [I]values[/I] (unlike the <option> Tag which has a "value")...

By changing the JS variable in the above script, it works correctly.

http://www.w3schools.com/tags/tag_textarea.asp

http://www.w3schools.com/tags/tag_option.asp
Copy linkTweet thisAlerts:
@JMRKERJan 24.2012 — Sorry but i don't agree... the <textarea> HTML Tag needs to close itself with </textarea> and between the opening and closing Tag there's [I]innerHTML[/I], not [I]values[/I] (unlike the <option> Tag which has a "value")...

By changing the JS variable in the above script, it works correctly.

http://www.w3schools.com/tags/tag_textarea.asp

http://www.w3schools.com/tags/tag_option.asp[/QUOTE]

Well, it may work now, but who knows what the future will bring?

None of the links you provided mention the use of .innerHTML. ?

The standards say there is no .innerHTML defined for the <textarea> tag

http://www.w3schools.com/jsref/dom_obj_textarea.asp

This references .value but not .innerHTML (and certainly not .innerTEXT)

And this link also confirms my original statement:

http://bytes.com/topic/javascript/answers/152623-innerhtml-vs-value-textarea-element

And others:

http://web.student.tuwien.ac.at/~e0226430/innerHtmlQuirk.html

http://www.mediacollege.com/internet/javascript/form/add-text.html

Personally, I would avoid using it in case something changes in the future

or if you intend on aiming for cross-browser compatibility.

But, you are welcome to use it until you need to change it

or the thing stops working for you!!! :eek:
Copy linkTweet thisAlerts:
@MrSnowDropJan 24.2012 — Well, it may work now, but who knows what the future will bring?

None of the links you provided mention the use of .innerHTML. ...[/QUOTE]

.innerHTML defines the HTML portion between an HTML opening and closing tag, for example:

[CODE]
<div>...HTML code...</div>
<textarea>...HTML code...</textarea>
[/CODE]

[B]w3schools says that the <option> tag has a "value"; <textarea> doesn't has a "value", but text inside its tags.[/B]
Copy linkTweet thisAlerts:
@JMRKERJan 24.2012 — .innerHTML defines the HTML portion between an HTML opening and closing tag, for example:

[CODE]
<div>...HTML code...</div>
<textarea>...HTML code...</textarea>
[/CODE]

[B]w3schools says that the <option> tag has a "value"; <textarea> doesn't has a "value", but text inside its tags.[/B][/QUOTE]

Obviously, "what we have here is a failure to communicate". ?

(Strother Martin in 'Cool Hand Luke).

  • 1. <textarea> does have an attribute of '.value'.

    The area between the <textarea></textarea> tags is the value of the tag.

    If you put HTML code between the tags, it is still the value of the tag. ?


  • 2. Nowhere I have seen in this thread does the OP want to know anything about the option tags of a selection box.


    Radio buttons and <input> tags also have a '.value' attribute, but the OP is not asking about that either. :eek:


    • But I digress. If it works for you doing it your way, OK, fine. I choose to follow the rules as I understand them and will continue doing things my way.


    Perhaps the browser is assigning the value of the '.innerHTML' to the <textarea> tag attribute '.value', and the results are the same,

    but that is not the way the w3schools site is describing (to me anyway) what is happening.

    Good Luck to you! ?
    ×

    Success!

    Help @tekboy spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.4,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,

    tipper: @Samric24,
    tipped: article
    amount: 1000 SATS,
    )...