PDA

Click to See Complete Forum and Search --> : Trouble populating <textarea> via input

Paul Jr
12-18-2003, 09:53 PM
Well, I was looking at another thread here, and I wanted to try something out myself. I'm not actually going to use this anywhere; I'm attempting to learn JS bit by bit.

Here's what I got so far. What I want to happen is the user inputs their name, and once they click outside the text box, what they typed in will appear in the textarea, along with certain text I've specified. This should happen with every field, with every input being on a new line.

I don't get any errors, but nothing shows up.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<meta http-equiv="content-style-type" content="text/css" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-language" content="en-us" />
<meta name="rating" content="general" />
<script type="text/javascript">
//<![CDATA[
var thing = "document.getElementById('Thing')"
var name = "document.getElementById('Name')"
var age = "document.getElementById('Age')"
var gender = "document.getElementById('Gender')"
function add1() {
thing.value='Name: '+name.value+'\n'
}
function add2() {
thing.value='Name: '+name.value+'\n'+'Age: '+age.value+'\n'
}
function add3() {
thing.value='Name: '+name.value+'\n'+'Age: '+age.value+'\n'+'Gender: '+gender.value+'\n'
}
//]]>
</script>
</head>
<body>

<form name="myForm" method="post" action="">
Name: <input type="text" id="Name" onblur="add1();" /> <br />
Age: <input type="text" id="Age" onblur="add2();" /> <br />
Gender: <input type="text" id="Gender" onblur="add3();" /> <br />
<h2 style="margin-bottom:0;padding-bottom:0;">Info</h2>
<textarea rows="10" cols="40" id="Thing"> </textarea>
</form>

</body>
</html>

Also, if anyone might have any idea on how to better do this, I'm open for any/all suggestions.

Thanks a lot! :)
fredmv
12-18-2003, 10:28 PM
Your main problems are the result of making your variables strings (when they should be objects) in the beginning of your script. Those should not be in quotes since JavaScript will interpret it as a literal string. Another huge problem with that particular piece of code is that it runs before the rest of the HTML document even exists. This means, that even if you corrected that error, you still wouldn't have references to those objects since they don't even exist yet! A simple solution to this would be to call all of this code in an onload event handler. There may be more problems with your code, but that's one of the more fatal ones I've noticed. If I understand how you wanted this script to work, I just wrote my own version of it. Here it is:<!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" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="content-type" content="application/xhtml+xml; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
onload = function()
{
var f = document.forms[0].elements;
for(i=0; i<f.length; i++) f[i].onblur = function() { f[3].value = 'Name: ' + f[0].value + '\nAge: ' + f[1].value + '\nGender: ' + f[2].value; }
}
//]]>
</script>
</head>
<body>
<form action="#">
<div>
<ul>
<li><label for="name">Name:</label><br /><input type="text" id="name" /></li>
<li><label for="age">Age:</label><br /><input type="text" id="age" /></li>
<li><label for="gender">Gender:</label><br /><input type="text" id="gender" /></li>
<li><label for="output">Output:</label><br /><textarea rows="10" cols="50" readonly="readonly" id="output"></textarea></li>
</ul>
</div>
</form>
</body>
</html>I'm not sure if that is exactly what you want, but I'm fairly sure it is. Another suggestion would be to make "gender" use radio buttons since it is an exclusive (male/female) choice. You could also use a simple regular expression to filter out anything but numbers for the "age" field, and filter out anything but letters for the "name" field. However, this is just a simple example to show the general idea of it, those additions can be added later.
Paul Jr
12-18-2003, 10:47 PM
Hey! Yes, that's exactly what I wanted! Thanks a lot! Now I get to pick apart your code and see exactly how it works :p.

Also, at first I did make my variables objects, but that didn't seem to work, which may have been due to the fact that the script runs before the HTML document exists. But, since I didn't know that :o, I figured I should enclose the variables in quotes.

Heheh, like I said, I'm learning -- slowly and painfully ;), but I'm learning.
fredmv
12-18-2003, 11:00 PM
You're welcome. If you need help understanding how it works please feel free to ask. :D
Paul Jr
12-18-2003, 11:01 PM
Alright, I've been picking at your code, and I believe I have it down -- 'cept for one thing.

I can't seem to figure out how/why the "Name: ", "Age: ", and "Gender: " are displayed in the textarea all at once. IT doesn't matter which input you fill in, or if you fill in any at all, if you just click in one, then out, all three things appear in the textarea. Also, I can't figure out how/why that since if you enter info into one, or none, if the inputs, then do it again, why the "Name: ", "Age: ", and "Gender: " are not duplicated...

Heheh, sorry if this sounds a bit confusing. If you have problems decyphering what I like to call "Paul Speak" just give me a yell, and I'll see what I can do to simplify it for you. ;)
fredmv
12-18-2003, 11:18 PM
I'll explain what's going on. What it does is, basically, is go through every element in the form and assign an onblur event to it; when this event fires, it changes the value of the third element in the form (in this case, the textarea) and sets it's value to all of the current values for each form element. The reason it completely overwrites the textarea's current value and there are no duplicates is because it assigns — using the assignment (=) operator — a new value as opposed to appending — using the shorthand assignment operator (+=) — a value. When you append more text to it, it keeps it's current value and concatenates the current string you're passing to it along with it. When you assign a new value to it, you erase the current value and it is replaced with the new one, and that's why it functions like it does.
Paul Jr
12-18-2003, 11:38 PM
Ooo, thanks a lot! Now I get it.

Man, I don't know where you came from, but I'm sure glad you did! :D
fredmv
12-18-2003, 11:50 PM
You're welcome. Good to hear that you understand how it works now. As for your last comment, thanks. I signed up here in July and didn't start posting until around October. I like the people here and enjoy helping others... :D
Paul Jr
12-18-2003, 11:55 PM
As you can see, I signed up in Aug., and probably didn't do much posting at all for a while.

Heheh, I like the people here too, 'cause they're all helpful, nice people like you, who are willing to help out those in need, like me. :D