Hey, Scripting Guy! How Can I Create a Self-Updating Text Box in an HTA?
Hey, Scripting Guy! I have an HTA with three text boxes. In box 1 you enter a first name; in box 2 you enter a last name. I’d like box 3 to automatically update itself based on what you type in the other text boxes. For example, if you type Ken in box 1 then box 3 shows Ken. If you then type Myer in box 2 box 3 shows Ken Myer. How do I do that?
— MH
Hey, MH. You know, the one question we Scripting Guys get asked the most is this: Can you tell us a little bit about the early history of Barcelona? And, sadly, for the longest time our answer was always the same: sorry, but no, we can’t tell you much of anything about the early history of Barcelona. That has bothered us for years, and so – after careful consideration – we decided to blow most of our budget, travel to Spain (ostensibly for TechEd IT Forum) and find out a little bit about the history of Barcelona.
What’s that? Couldn’t we have just read about that in a book or looked it up on the Internet? Hmmm …. You know, we never thought of that. Wonder if it’s too late to get our money back?
At any rate, for those of you who have been wondering, Barcelona was founded by the Romans in the third century BC. (Some say it was founded by Hercules himself.) However, the city didn’t truly gain prominence until towards the end of the 9th century AD, when Wilfred the Hairy seized control over several neighboring lands and established the kingdom of Catalonia.
|
Note. Why the name “Wilfred the Hairy”? Well, according to one legend, this was because Wilfred had hair in places that most people don’t have hair. Which places? The legend doesn’t say and, to tell you the truth, we didn’t ask. |
Anyway, after Wilfred the Hairy was killed in battle hardly anything of interest happened in Barcelona. Well, at least not until the Scripting Guys showed up and wrote a script that could auto-update a text box in an HTML Application (HTA):
<html>
<head>
<title>Self-Updating Text Box</title>
</head>
<SCRIPT Language=”VBScript”>
Sub SetFullName
CombinedName.Value = FirstName.Value & ” ” & LastName.Value
End Sub
</SCRIPT>
<body>
<input type=”text” name=”FirstName” size=”25″ onChange=”SetFullName”>
<input type=”text” name=”LastName” size=”25″ onChange=”SetFullName”>
<input type=”text” name=”CombinedName” size=”51″ readOnly=True>
</body>
Let’s see if we can figure out exactly how this thing works. As is the case with most HTAs, we basically have two sections here: the <BODY> section (the place where we put all the controls), and the <SCRIPT> section (which, as you might expect, is the place where we put all our scripts). For demonstration purposes, our <BODY> section is remarkably compact; it consists entirely of three text boxes, one named FirstName, one named LastName, and one named CombinedName (sounds like some sort of scripting fairy tale, doesn’t it):
<input type=”text” name=”FirstName” size=”25″ onChange=”SetFullName”> <input type=”text” name=”LastName” size=”25″ onChange=”SetFullName”> <input type=”text” name=”CombinedName” size=”51″ readOnly=True>
As you can see, the HTML tags for the first two text boxes (FirstName and LastName) are very similar. We have the <input> tag, which includes the type=”text” parameter, the parameter that distinguishes the text box from other input controls (like a button, checkbox, or radio button). We have the name parameter (followed by the unique name given to this text box), and the size parameter (which simply sets the width of the box to, in this case, 25 characters).
We also have one other parameter to deal with: onChange=”SetFullName”. This is the parameter that enables our auto-updating text boxes to function properly. Any time the value in either of the first two text boxes is changed, the onChange event is fired. (Technically the event is fired after the change has been made and the text box has lost the focus.) What’s going to happen any time the onChange event is fired, at least for the first two text boxes in our HTA? You got it: we’re going to run the subroutine SetFullName.
You might have noticed that our third text box – CombinedName – doesn’t have an onChange event. Why? Well, for one reason, no one is ever going to type anything in this text box; this is the box that gets automatically updated based on what we type in the other two boxes. In fact, to make sure that no one types anything into this text box we add the parameter readOnly=True. Try to guess whether or not this turns the text box into a read-only text box.
Well, you’re right: it does.
Lucky guess.
So much for the <BODY> section. As for the <SCRIPT> section, this features a single subroutine (SetFullName), a subroutine which, in turn, features a single line of code:
CombinedName.Value = Trim(FirstName.Value & ” ” & LastName.Value)
All we’re doing here is assigning something to the Value property of our third text box (CombinedName). And what exactly are we assigning to the Value property? We’re assigning the Value of the first text box (FirstName) plus a blank space plus the value of the second text box (LastName). Oh, and then we’re using the Trim function to remove any excess blank spaces at the beginning or the end of this value.
What does that give us? Well, suppose you type Ken in the first text box. When that box loses the focus (e.g., when you press tab or click outside the box), the onChange event fires and text box 3 will be set to this:
Ken
Why Ken? Because that’s the value of box 1 plus a blank space plus the value of text box 2 (which is currently nothing). But then shouldn’t this be Ken_, with the underscore representing a blank space? Well it would be, except that we used the Trim function to trim off any leading or trailing blank spaces.
Now suppose we type Myer in box 2. Try to guess what box 3 will equal now.
Wow; you guys are either really lucky guessers, or you’ve already caught on to how this works. Either way, yes, box 3 will now be equal to this:
Ken Myer
If we go back and change box 1 to Kenneth then box 3 will automatically reset itself to this:
Kenneth Myer
Etc., etc., etc.
Incidentally, Wilfred the Hairy was the first Catalonia leader to pass his crown down to his son. This hereditary passing down of titles is an interesting one, to say the least. For example, does that mean that the Scripting Guy who writes this column will eventually pass that title – and this column – down to the Scripting Son?
No, probably not. After all, the Scripting Guy who writes this column likes his son.
Light
Dark
0 comments