How Can I Allow Users to Type Text Into an HTA Table?

ScriptingGuy1

Hey, Scripting Guy! Question

Hey, Scripting Guy! I’m 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’t figure out how to let people type text into some of the cells in that table. How can I do that?

— EN

SpacerHey, Scripting Guy! AnswerScript Center

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 – What’s that? Who won that game? Well, um, we don’t remember right off hand ….

Besides, that’s not important. What’s important is that every other commercial during the broadcast (and, if you’ve ever watched college football on TV, you know that there are plenty of commercials) was for a new service where you can “text-message beautiful girls any time of the day or night.” (As one of beautiful girls exclaimed, “Wow, I can receive your message even in this noisy nightclub!”) To be honest, it wasn’t 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:

“Text-message girls for fun. Or for more than fun.”

In case you’re wondering, the Scripting Guy who writes this column didn’t 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’t go well. Could he file a compliant with the text messaging company:

“You said it would be fun to text-message beautiful girls.”

“No, we said it would be more than fun. Obviously more than fun isn’t fun. If it was, we’d just say that you could send text messages for fun and be done with it.”

That was way too complicated for the Scrpting Guy who writes this column, so he just watched the Husky-UCLA game.

Which, come to think of it, wasn’t all that much fun, either.

Note. 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’ll get over it.

Editor’s Note: In case you’re wondering, all those girls not only got over it, but they’re grateful. Restraining orders can be a bit of a hassle.

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

<SCRIPT LANGUAGE=”VBScript”>
    Sub ShowName
        Msgbox NameBox.InnerText
    End Sub
</SCRIPT>

<table width=”100%” border> <tr> <td width=”50%” valign=”top”>Name</td> <td width=”50%” valign=”top”><div id=”NameBox” contenteditable></div></td> </tr> </table>

<p>

<input class=”button” type=”button” value=”Show Name” onClick=”ShowName”>

Our HTA consists of three elements:

A function named ShowName which, when clicked, pops up a message showing the value that was typed into the table cell.

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.

A button which, when clicked, calls the function ShowName.

In other words, we have an HTA that looks like this:

HTA


In order to explain how this code works we’re going to do something a little different: we’re 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 like they were written backwards. But this time we’re doing that on purpose.

We were right, weren’t we: this is way more fun than hanging out with beautiful girls, isn’t it?

The last (but hardly the least) of our HTA elements is a standard HTML button, one that – as noted – calls the function ShowName each time it gets clicked. The HTML tagging for our button is no more complicated than this:

<input class=”button” type=”button” value=”Show Name” onClick=”ShowName”>

In addition to the button, our HTA also includes a simple two-cell table, a table we create using this bit of tagging:

<table width=”100%” border>
  <tr>
    <td width=”50%” valign=”top”>Name</td>
    <td width=”50%” valign=”top”><div id=”NameBox” contenteditable></div></td>
  </tr>
</table>

If you’ve ever created a table using HTML then those tags should look pretty familiar to you. (If you haven’t created a table using HTML then you should take a look at our HTA Developer’s Center.) Of course, if you’ve ever created a table using HTML you also know that tables are read-only: you can’t type text directly into a table cell. And guess what? You’re absolutely right: you can’t type text directly into a table cell.

But that doesn’t matter to us, because we aren’t going to type text directly into the table cell; instead, we’re going to cheat a little. Take a look at the code that configures the first cell in the table:

<td width=”50%” valign=”top”>Name</td>

Nothing too fancy there: it’s a cell that spans half the table width (width=”50%”) and has text aligned with the top of the cell (valign=”top”). In addition, the cell includes the word Name already typed in for you.

Now, compare that with the code that configures the second cell in the table:

<td width=”50%” valign=”top”><div id=”NameBox” contenteditable></div></td>

See the difference? Instead of including some pre-defined text (like Name), we instead use a <DIV> tag for the cell contents:

<div id=”NameBox” contenteditable></div>

What’s 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 (in this case, the id NameBox) 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>:

contenteditable

That’s 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’re typing into the <DIV> and not into the cell itself. But, hey, we’re supposed to be having fun here; let’s not quibble over technicalities.)

See how easy that was? Would you like to have a second field in your HTA, one for typing in the user’s phone number? No problem. In the following code snippet we’ve added a second table row (the <TR> tag) and we’ve:

included a <DIV> in cell 2 of that row, a <DIV> we named PhoneBox.

added the contenteditable parameter in order to make this <DIV> editable.

Here’s our revised HTML:

<table width=”100%” border>
  <tr>
    <td width=”50%” valign=”top”>Name</td>
    <td width=”50%” valign=”top”><div id=”NameBox” contenteditable></div></td>
  </tr>
    <td width=”50%” valign=”top”>Phone Number</td>
    <td width=”50%” valign=”top”><div id=”PhoneBox” contenteditable></div></td>
  </tr>
</table>

You can keep adding additional table rows and editable cells until the cows come home.

Note. So what happens when the cows do come home? Then you’ll have to stop adding additional table rows and editable cells.

So does this really work? Of course it does. Here’s our original HTA; note the name in the table cell, a name that doesn’t appear anywhere in our code (which must mean that we were able to type it in ourselves):

HTA


You know, you’re right: that’s not just fun, that’s more than fun.

Ah yes, we had a feeling someone was going to ask that: how do you retrieve the value that was typed into the table? As it turns out, that’s what the subroutine ShowName is for:

Sub ShowName
    Msgbox NameBox.InnerText
End Sub

Again, nothing very fancy here: we’re simply using the Msgbox function to echo back the value of NameBox’s InnerText 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 into the table cell (and we did) that’s going to result in a message box that looks like this:

HTA


To tell you the truth, that might be a little too much fun, at least for the Scripting Guys.

That should get you started, EN. And don’t 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 tagline:

“The only thing you can expect is the unexpected.”

Of course, technically the only thing that you can’t expect is the unexpected: if you could expect it, well, then it wouldn’t be unexpected, would it? But we suppose the tagline “The only thing you can expect is the expected” doesn’t carry quite the same punch.

0 comments

Discussion is closed.

Feedback usabilla icon