Tricks Involving Concatenation and Pull-Down Menus for HTML Forms?

July 12, 2007 9:39 AM

If you are a HTML or Javascript kung-fu master, I need a sensei to advise me as to a few exotic tricks I desire to implement involving HTML form fields.

Is there Javascript or HTML trickery that will automatically concatenate contents of a field in an HTML form, and/or update that field if the choices are changed? Also, is there a way for a choice from an HTML pull-down menu to assign values to two variables, instead of just one?

I have a personal HTML form I use. It's essentially a rewrite of the Quick Add bookmarklet for Remember the Milk. However, with this personalized version, I choose from individual menus a locale (say, @work), a tag for the goal this task goes towards (say 'Household', meaning 'to keep my household running'), and a task list I want it to post to (in this case, a list also named 'Household'). This way, I don't forget to include a value, nor do I have to remember what my choices are. I don't think I could use the site without this revised form -- I've also whipped up little custom jobs for two kinds of specialized tasks I do (putting certain events on the task list, and adding a book to my reading list).

I have two ideas I'd like to implement in order to improve its efficiency, but they're beyond my HTML ken.

First, as things stand now, I have to manually concatenate the goal and locale tags. I tab to a "Concatenate" button and hit it, and it concatenates the locale and goal choices I've made in those menus into the "tags" field. The HTML I use for this is:

[input type="button" tabindex="5" value="Concatenate" onClick=" document.all.tags.value = document.all.locale.value + ' ' + document.all.goal.value;"]

What I'm wondering is, is there a way I can have the system concatenate the 'locale' and 'goal' values into the 'tags' tag field automatically, without a need for the "onClick" event? And would this way reflect any changes made to those values?

Second, as you might tell from the above example, in many cases, the list a task is going to, and the goal tag for a task, happen to be the same. I'd love to eliminate a menu from this step by having a choice from the HTML pull-down menu define BOTH a choice for the 'goal' value (say, the string 'g-Household') and the 'list' value it should go to (takes the form of a list ID, so it might be '04123123,' which, let's say, corresponds to the Household task list). Can this be done? As it stands, the choice of individual "[option]s" just fill in one variable.

Thanks, guys!

posted by WCityMike to computers & internet (15 comments total)

You say you've got two fields that need to be concatenated. I assume these are text fields for my example.


you can move your onClick code to one or both of your text fields:

<input type="text" id="locale" name="locale" onkeypress="document.all.tags.value = document.all.locale.value + ' ' + document.all.goal.value;">

<input type="text" id="locale" name="goal" onkeypress="document.all.tags.value = document.all.locale.value + ' ' + document.all.goal.value;">


for your second question: would it be feasible to simple remove one of the menus?
posted by boo_radley at 9:52 AM on July 12, 2007

Boo_radley, thanks, I shall give that a try.

Re: the pulldown menus, the goal definitely is to remove one of the menus, but I need to have one menu choice define two variables. Since I'm sending these variables to Remember the Milk, I don't have any ability to change the values needed for the task.

Essentially, I'd like the pull-down menu to be smart enough to say:

* Household (if chosen, populate goal value with "household" and list ID value with "8675309")
* Car (if chosen, populate goal value with "car" and list ID value with "24601")
* and so on ...
posted by WCityMike at 9:59 AM on July 12, 2007

Actually, I"m sorry, boo_radley, the locale and goal fields are actually select fields:

[select name="locale" id="locale" size=6 tabindex="2"]

Would the 'onkeypress' still work there? I'm usually either tabbing to the field and using arrow keys, or mouse-clicking. If not, is there an alternate means?
posted by WCityMike at 10:01 AM on July 12, 2007

yep, it should still work ok in a select field; it's got all the events you need. Also, your select's options can have values as well as text:

<select>
<option value='8675309'>household&lt/option>
<option value='24601'>car&lt/option>
<select>

That way you can do

var idx = document.getElementById("locale").selectedIndex
var text = document.getElementById("locale").options[idx]
var code = document.getElementById("locale").value

posted by boo_radley at 10:31 AM on July 12, 2007

Hmmm. That may be it! Let me go scurry off and go a-tweakin' now. :)
posted by WCityMike at 10:33 AM on July 12, 2007

With regard to the first question (tackling the questions one at a time), it appears not to be working with selects looking like this:

<select name="g" id="g" size=8 tabindex="3" onkeypress="document.all.tx.value = document.all.locale.value + ' ' + document.all.g.value;">

Anything I'm doing wrong?
posted by WCityMike at 10:43 AM on July 12, 2007

Actually, if I duplicate the same statement with an onClick, that seems to take care of it:

<select name="g" id="g" size=8 tabindex="3" onkeypress="document.all.tx.value = document.all.locale.value + ' ' + document.all.g.value;" onClick="document.all.tx.value = document.all.locale.value + ' ' + document.all.g.value;">
posted by WCityMike at 10:49 AM on July 12, 2007

In your select tag,
- I don't think onkeypress is the best event to use. Use onChange or the click or the focus - whatever's the desired interaction.

- the select itself doesn't have a value, it has a selected index, then you have to access the value of the selected option.

Like so:

<select name="g" id="g" size=8 tabindex="3" onChange="document.forms[0].tx.value = document.forms[0].locale.value + ' ' + document.forms[0].g. options[document.forms[0].g.selectedIndex].value;">


I'm not a big fan of document.all ..., to access form fields in javascript I mainly use document.forms[form index# or form name].fieldname.

Anyway, my favourite js reference site is the Javascript FAQ at irt.org
posted by Artful Codger at 11:01 AM on July 12, 2007

With SELECT elements, you need to use the "onChange" property. Accessing the value of the selected element is a bit trickier:

document.getElementById('[ELEMENT_NAME]').options[document.getElementById('[ELEMENT_NAME]').selectedIndex].value

So, you'll have:

onSelect="document.getElementById('tx').value=document.getElementById('locale').options[document.getElementById('locale').selectedIndex].value + document.getElementById('g').options[document.getElementById('g').selectedIndex].value;"

Note that "getElementById" is the preferred (DOM-compliant?) method of accessing elements, not "document.all.[ELEMENT_NAME]". You will need to specify the ID attribute of your drop-down menus as well as the NAME.
posted by mkultra at 11:04 AM on July 12, 2007 [1 favorite has favorites]

er, that's onChange=, not onSelect=
posted by mkultra at 11:06 AM on July 12, 2007

Hey, boo_radley, if you're still there, I've run into a snag with the second of the two -- the tag problem. Two problems.

First, I can't seem to get the concatenation to work in concert with Javascript setting the g value from the list. Where do I put those var statements? I tried them both as a header and in the actual onkeypress and onClick events, and neither seemed to work; both seemed to destroy the ability to concatenate.

The second problem is this: is there a way to actually assign a second value that isn't the text of the entry? Reason I ask is this:

<option value="730842"> 
<option value="1223729">@NONE
<option value="1446561">g-Project1
<option value="1223636">g-Project2
<option value="1274826">g-Project3
<option value="1223704">g-Project4
<option value="1223664">g-Project5
<option value="1256310">-SubProject1
<option value="1274827">g-Project6
<option value="1223704">g-Project7
<option value="1274823">-SubProject1
<option value="1275170">-SubProject2
<option value="1274822">-SubProject3
<option value="1243750">-SubProject4

That's what my list looks like (well, privatized). Now, the value is the list ID. And the text is close to being a tag. However, occasionally it's friendlier, and the subprojects screw things up, because I need them to be tagged with their project's tag

<option value="730842">  (no tag)
<option value="1223729">@NONE (no tag)
<option value="1446561">g-Project1 (tag as g-project1)
<option value="1223636">g-Project2 (tag as g-project2)
<option value="1274826">g-Project3 (tag as g-project3)
<option value="1223704">g-Project4 (tag as g-project4)
<option value="1223664">g-Project5 (tag as g-project5)
<option value="1256310">-SubProject1 (tag as g-project5)
<option value="1274827">g-Project6 (tag as g-project6)
<option value="1223704">g-Project7 (tag as g-project7)
<option value="1274823">-SubProject1 (tag as g-project7)
<option value="1275170">-SubProject2 (tag as g-project7)
<option value="1274822">-SubProject3 (tag as g-project7)
<option value="1243750">-SubProject4 (tag as g-project7)

Is that feasible, or impossible?
posted by WCityMike at 11:07 AM on July 12, 2007

That "Is that feasible, or impossible?" line sounds a little demanding. Didn't mean in that tone — just wondering if I'm asking for the moon. :)
posted by WCityMike at 11:13 AM on July 12, 2007

Maybe you could drop me an email with your page. I'd be happy to take a look at it.
posted by boo_radley at 12:05 PM on July 12, 2007

By the way, didn't mean to ignore the rest of you -- I had the "#comment" bookmarked so it just jumped to the bottom of the page, so I missed your comments. I actually implemented the onChange thing.

Boo, I'm sending you an e-mail with the URL.
posted by WCityMike at 12:53 PM on July 12, 2007

Where do I put those var statements?

You would put them in a function that you call on your onChange(). If you put them in just by themselves, they're only ever run once, so those variables become fixed.

Also, this:


var text = document.getElementById("locale").options[idx]
var code = document.getElementById("locale").value


should be:

var text = document.getElementById("locale").options[idx].text;
var code = document.getElementById("locale").options[idx].value;


Trust me, though- that one line of code I posted does everything you need :)
posted by mkultra at 1:16 PM on July 12, 2007