{"id":63943,"date":"2007-09-26T02:17:00","date_gmt":"2007-09-26T02:17:00","guid":{"rendered":"https:\/\/blogs.technet.microsoft.com\/heyscriptingguy\/2007\/09\/26\/how-can-i-allow-users-to-type-text-into-an-hta-table\/"},"modified":"2007-09-26T02:17:00","modified_gmt":"2007-09-26T02:17:00","slug":"how-can-i-allow-users-to-type-text-into-an-hta-table","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/scripting\/how-can-i-allow-users-to-type-text-into-an-hta-table\/","title":{"rendered":"How Can I Allow Users to Type Text Into an HTA Table?"},"content":{"rendered":"

\"Hey, \n

Hey, Scripting Guy! I\u2019m using an HTA as a data entry online form. The easiest way for me to format the HTA is to use a table; however, I can\u2019t figure out how to let people type text into some of the cells in that table. How can I do that?

— EN<\/P>\"Spacer\"\"Hey,\"Script<\/A> \n

Hey, EN. You know, Saturday night the Scripting Guy who writes this column was watching the football game between the University of Washington and UCLA \u2013 What\u2019s that? Who won<\/I> that game? Well, um, we don\u2019t remember right off hand \u2026.<\/P>\n

Besides, that\u2019s not important. What\u2019s important is that every other commercial during the broadcast (and, if you\u2019ve ever watched college football on TV, you know that there are plenty of commercials) was for a new service where you can \u201ctext-message beautiful girls any time of the day or night.\u201d (As one of beautiful girls exclaimed, \u201cWow, I can receive your message even in this noisy nightclub!\u201d) To be honest, it wasn\u2019t totally clear to the Scripting Guy who writes this column whether this was one service running different commercials or rival services competing head-to-head. However, he was struck by the tagline to one of these ads, a tagline which went something like this:<\/P>\n

\u201cText-message girls for fun. Or for more than fun.\u201d<\/B><\/P>\n

In case you\u2019re wondering, the Scripting Guy who writes this column didn\u2019t text-message any beautiful girls, even though they could receive his messages in a noisy nightclub. (Noise apparently being more of a hindrance to text-messaging than the Scripting Guy who writes this column knew.) Admittedly, that was due in part to the fact that he has no idea how to send a text-message. However, he also had concerns about what would happen if things didn\u2019t go well. Could he file a compliant with the text messaging company:<\/P>\n

\u201cYou said it would be fun to text-message beautiful girls.\u201d<\/P>\n

\u201cNo, we said it would be more<\/I> than fun. Obviously more than fun isn\u2019t fun. If it was, we\u2019d just say that you could send text messages for fun and be done with it.\u201d<\/P>\n

That was way too complicated for the Scrpting Guy who writes this column, so he just watched the Husky-UCLA game. <\/P>\n

Which, come to think of it, wasn\u2019t all that much fun, either.<\/P>\n\n<\/THEAD>\n\n\n
\n

Note<\/B>. Does the Scripting Guy who writes this column have any regrets about not text-messaging beautiful girls Saturday night? To be perfectly honest, he does: he feels a little sorry for those poor girls, girls who are probably still sitting in that noisy nightclub, hoping to hear from him. Hopefully, they\u2019ll get over it.<\/P>\n

Ed<\/B>itor\u2019s Note:<\/B> In case you\u2019re wondering, all those girls not only got over it, but they\u2019re grateful. Restraining orders can be a bit of a hassle.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n

<\/DIV>\n

But hey, who needs beautiful girls or text-messaging anyway? After all, if we want to have some real<\/I> fun, we\u2019ll throw together some code that enables you to type text into a table cell in an HTA:<\/P>

<SCRIPT LANGUAGE=”VBScript”>\n    Sub ShowName\n        Msgbox NameBox.InnerText\n    End Sub\n<\/SCRIPT><\/p>\n
<table width=”100%” border>\n  <tr>\n    <td width=”50%” valign=”top”>Name<\/td>\n    <td width=”50%” valign=”top”><div id=”NameBox” contenteditable><\/div><\/td>\n  <\/tr>\n<\/table><\/p>\n
<p><\/p>\n
<input class=”button” type=”button” value=”Show Name” onClick=”ShowName”>\n<\/PRE>\n
Our HTA consists of three elements:<\/P>\n\n\n\n\n\n
\u2022<\/TD>\n\n
A function named ShowName which, when clicked, pops up a message showing the value that was typed into the table cell.<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
A table featuring two cells: a cell labeled Name, which is just that (a label), and an editable cell where the user can type his or her name.<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
A button which, when clicked, calls the function ShowName.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
In other words, we have an HTA that looks like this:<\/P>\"HTA\" \n

In order to explain how this code works we\u2019re going to do something a little different: we\u2019re going to start at the end of the script and then work our way back towards the beginning. And yes, we know: quite often our explanations seem<\/I> like they were written backwards. But this time we\u2019re doing that on purpose.<\/P>\n
We were right, weren\u2019t we: this is way<\/I> more fun than hanging out with beautiful girls, isn\u2019t it?<\/P>\n
The last (but hardly the least) of our HTA elements is a standard HTML button, one that \u2013 as noted \u2013 calls the function ShowName each time it gets clicked. The HTML tagging for our button is no more complicated than this:<\/P>
<input class=”button” type=”button” value=”Show Name” onClick=”ShowName”>\n<\/PRE>\n
In addition to the button, our HTA also includes a simple two-cell table, a table we create using this bit of tagging:<\/P>
<table width=”100%” border>\n  <tr>\n    <td width=”50%” valign=”top”>Name<\/td>\n    <td width=”50%” valign=”top”><div id=”NameBox” contenteditable><\/div><\/td>\n  <\/tr>\n<\/table>\n<\/PRE>\n
If you\u2019ve ever created a table using HTML then those tags should look pretty familiar to you. (If you haven\u2019t<\/I> created a table using HTML then you should take a look at our HTA Developer\u2019s Center<\/B><\/A>.) Of course, if you\u2019ve ever created a table using HTML you also know that tables are read-only: you can\u2019t type text directly into a table cell. And guess what? You\u2019re absolutely right: you can\u2019t<\/I> type text directly into a table cell. <\/P>\n
But that doesn\u2019t matter to us, because we aren\u2019t going to type text directly into the table cell; instead, we\u2019re going to cheat a little. Take a look at the code that configures the first cell in the table:<\/P>
<td width=”50%” valign=”top”>Name<\/td>\n<\/PRE>\n
Nothing too fancy there: it\u2019s a cell that spans half the table width (width=\u201d50%\u201d<\/B>) and has text aligned with the top of the cell (valign=\u201dtop\u201d<\/B>). In addition, the cell includes the word Name<\/I> already typed in for you.<\/P>\n
Now, compare that with the code that configures the second cell in the table:<\/P>
<td width=”50%” valign=”top”><div id=”NameBox” contenteditable><\/div><\/td>\n<\/PRE>\n
See the difference? Instead of including some pre-defined text (like Name<\/I>), we instead use a <DIV><\/B> tag for the cell contents:<\/P>
<div id=”NameBox” contenteditable><\/div>\n<\/PRE>\n
What\u2019s a <DIV> tag? Well, a <DIV> is simply a named portion of an HTML page or HTA; by defining a <DIV> and giving it an id<\/B> (in this case, the id NameBox<\/I>) we can refer to and manipulate this portion of our page programmatically. But notice that we also included a second parameter when defining our <DIV>:<\/P>
contenteditable\n<\/PRE>\n
That\u2019s the secret right there: the contenteditable property, when present, makes the <DIV> editable; in other words, that one little parameter enables the user to type data into that portion of the HTA. And because the <DIV> is located within a table cell that means that users can type information into that table cell. (Although, technically, they\u2019re typing into the <DIV> and not into the cell itself. But, hey, we\u2019re supposed to be having fun here; let\u2019s not quibble over technicalities.)<\/P>\n
See how easy that was? Would you like to have a second field in your HTA, one for typing in the user\u2019s phone number? No problem. In the following code snippet we\u2019ve added a second table row (the <TR><\/B> tag) and we\u2019ve:<\/P>\n\n\n\n\n
\u2022<\/TD>\n\n
included a <DIV> in cell 2 of that row, a <DIV> we named PhoneBox.<\/P><\/TD><\/TR>\n
\u2022<\/TD>\n\n
added the contenteditable parameter in order to make this <DIV> editable.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
Here\u2019s our revised HTML:<\/P>
<table width=”100%” border>\n  <tr>\n    <td width=”50%” valign=”top”>Name<\/td>\n    <td width=”50%” valign=”top”><div id=”NameBox” contenteditable><\/div><\/td>\n  <\/tr>\n    <td width=”50%” valign=”top”>Phone Number<\/td>\n    <td width=”50%” valign=”top”><div id=”PhoneBox” contenteditable><\/div><\/td>\n  <\/tr>\n<\/table>\n<\/PRE>\n
You can keep adding additional table rows and editable cells until the cows come home.<\/P>\n\n<\/THEAD>\n\n\n
\n
Note<\/B>. So what happens when the cows do<\/I> come home? Then you\u2019ll have to stop adding additional table rows and editable cells.<\/P><\/TD><\/TR><\/TBODY><\/TABLE>\n
<\/DIV>\n
So does this really work? Of course it does. Here\u2019s our original HTA; note the name in the table cell, a name that doesn\u2019t appear anywhere in our code (which must mean that we were able to type it in ourselves):<\/P>\"HTA\" \n

You know, you\u2019re right: that\u2019s not just fun, that\u2019s more<\/I> than fun.<\/P>\n
Ah yes, we had a feeling someone was going to ask that: how do<\/I> you retrieve the value that was typed into the table? As it turns out, that\u2019s what the subroutine ShowName is for:<\/P>
Sub ShowName\n    Msgbox NameBox.InnerText\nEnd Sub\n<\/PRE>\n
Again, nothing very fancy here: we\u2019re simply using the Msgbox<\/B> function to echo back the value of NameBox\u2019s InnerText<\/B> property. (InnerText returns just the text typed into a container, stripping out any HTML formatting codes that might also appear within that container.) Assuming we typed Ken Myer<\/I> into the table cell (and we did) that\u2019s going to result in a message box that looks like this:<\/P>\"HTA\" \n

To tell you the truth, that might be a little too much fun, at least for the Scripting Guys.<\/P>\n
That should get you started, EN. And don\u2019t worry, the Scripting Guys will continue to watch a lot of TV, the better to keep you up-to-date in all the latest TV commercials. For example, the other night the Scripting Guy who writes this column saw an ad with this<\/I> tagline:<\/P>\n
\u201cThe only thing you can expect is the unexpected.\u201d<\/B><\/P>\n
Of course, technically the only thing that you can\u2019t<\/I> expect is the unexpected: if you could expect it, well, then it wouldn\u2019t be unexpected, would it? But we suppose the tagline \u201cThe only thing you can expect is the expected\u201d doesn\u2019t carry quite the same punch.<\/P><\/p>\n","protected":false},"excerpt":{"rendered":"
Hey, Scripting Guy! I\u2019m using an HTA as a data entry online form. The easiest way for me to format the HTA is to use a table; however, I can\u2019t figure out how to let people type text into some of the cells in that table. How can I do that?— EN Hey, EN. You […]<\/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-63943","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\u2019m using an HTA as a data entry online form. The easiest way for me to format the HTA is to use a table; however, I can\u2019t figure out how to let people type text into some of the cells in that table. How can I do that?— EN Hey, EN. You […]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/63943","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=63943"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/posts\/63943\/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=63943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/categories?post=63943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/scripting\/wp-json\/wp\/v2\/tags?post=63943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}