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):<\/P>
<html>\n<head>\n <title>Self-Updating Text Box<\/title>\n<\/head><\/p>\n<SCRIPT Language=”VBScript”>\n Sub SetFullName\n CombinedName.Value = FirstName.Value & ” ” & LastName.Value\n End Sub\n<\/SCRIPT><\/p>\n
<body>\n <input type=”text” name=”FirstName” size=”25″ onChange=”SetFullName”>\n <input type=”text” name=”LastName” size=”25″ onChange=”SetFullName”>\n <input type=”text” name=”CombinedName” size=”51″ readOnly=True>\n<\/body>\n<\/PRE>\n
Let\u2019s 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\u2019t it):<\/P>
<input type=”text” name=”FirstName” size=”25″ onChange=”SetFullName”>\n<input type=”text” name=”LastName” size=”25″ onChange=”SetFullName”>\n<input type=”text” name=”CombinedName” size=”51″ readOnly=True>\n<\/PRE>\nAs you can see, the HTML tags for the first two text boxes (FirstName and LastName) are very similar. We have the <input><\/B> tag, which includes the type=”text”<\/B> parameter, the parameter that distinguishes the text box from other input controls (like a button, checkbox, or radio button). We have the name<\/B> parameter (followed by the unique name given to this text box), and the size<\/B> parameter (which simply sets the width of the box to, in this case, 25 characters).<\/P>\n
We also have one other parameter to deal with: onChange=”SetFullName”<\/B>. 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<\/I> the text box has lost the focus.) What\u2019s 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\u2019re going to run the subroutine SetFullName.<\/P>\n
You might have noticed that our third text box \u2013 CombinedName \u2013 doesn\u2019t 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<\/I> that no one types anything into this text box we add the parameter readOnly=True<\/B>. Try to guess whether or not this turns the text box into a read-only text box.<\/P>\n
Well, you\u2019re right: it does. <\/P>\n
Lucky guess.<\/P>\n
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:<\/P>
CombinedName.Value = Trim(FirstName.Value & ” ” & LastName.Value)\n<\/PRE>\nAll we\u2019re doing here is assigning something to the Value<\/B> property of our third text box (CombinedName). And what exactly are we assigning to the Value property? We\u2019re 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\u2019re using the Trim<\/B> function to remove any excess blank spaces at the beginning or the end of this value.<\/P>\n
What does that give us? Well, suppose you type Ken<\/I> 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:<\/P>Ken\n<\/PRE>\nWhy Ken<\/I>? Because that\u2019s the value of box 1 plus a blank space plus the value of text box 2 (which is currently nothing). But then shouldn\u2019t this be Ken_<\/I>, with the underscore representing a blank space? Well it would<\/I> be, except that we used the Trim function to trim off any leading or trailing blank spaces.<\/P>\n
Now suppose we type Myer<\/I> in box 2. Try to guess what box 3 will equal now<\/I>.<\/P>\n
Wow; you guys are either really<\/I> lucky guessers, or you\u2019ve already caught on to how this works. Either way, yes, box 3 will now be equal to this:<\/P>Ken Myer\n<\/PRE>\nIf we go back and change box 1 to Kenneth<\/I> then box 3 will automatically reset itself to this:<\/P>Kenneth Myer\n<\/PRE>\nEtc., etc., etc.<\/P>\n
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 \u2013 and this column \u2013 down to the Scripting Son?<\/P>\n
No, probably not. After all, the Scripting Guy who writes this column likes his<\/I> son.<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"
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\u2019d 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 […]<\/p>\n","protected":false},"author":595,"featured_media":87096,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[3,4,5,30],"class_list":["post-63573","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-scripting","tag-scripting-guy","tag-scripting-techniques","tag-vbscript","tag-web-pages-and-htas"],"acf":[],"blog_post_summary":"
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\u2019d 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 […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/63573","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/users\/595"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/comments?post=63573"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/63573\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media\/87096"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/media?parent=63573"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=63573"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=63573"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"Hey,](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/29\/2019\/02\/q-for-powertip.jpg\" "\\"Hey,")
<\/H2>\n![\"Spacer\"](\"https:\/\/devblogs.microsoft.com\/scripting\/wp-content\/uploads\/sites\/29\/2019\/05\/spacer.gif\")
![\"Hey,](\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/29\/2019\/02\/a-for-powertip.jpg\" "\\"Hey,")
![\"Script](\"http:\/\/img.microsoft.com\/library\/media\/1033\/technet\/images\/scriptcenter\/ad.jpg\" "\\"Script")
<\/A> \n