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

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

WCityMike — Thu, 12 Jul 2007 09:39:30 -0800

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!

By: boo_radley

boo_radley — Thu, 12 Jul 2007 09:52:33 -0800

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?

By: WCityMike

WCityMike — Thu, 12 Jul 2007 09:59:12 -0800

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 ...

By: WCityMike

WCityMike — Thu, 12 Jul 2007 10:01:11 -0800

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?

By: boo_radley

boo_radley — Thu, 12 Jul 2007 10:31:43 -0800

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

By: WCityMike

WCityMike — Thu, 12 Jul 2007 10:33:10 -0800

Hmmm. That may be it! Let me go scurry off and go a-tweakin' now. :)

By: WCityMike

WCityMike — Thu, 12 Jul 2007 10:43:26 -0800

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?

By: WCityMike

WCityMike — Thu, 12 Jul 2007 10:49:24 -0800

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;">

By: Artful Codger

Artful Codger — Thu, 12 Jul 2007 11:01:43 -0800

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

By: mkultra

mkultra — Thu, 12 Jul 2007 11:04:58 -0800

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.

By: mkultra

mkultra — Thu, 12 Jul 2007 11:06:33 -0800

er, that's onChange=, not onSelect=

By: WCityMike

WCityMike — Thu, 12 Jul 2007 11:07:27 -0800

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?

By: WCityMike

WCityMike — Thu, 12 Jul 2007 11:13:00 -0800

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. :)

By: boo_radley

boo_radley — Thu, 12 Jul 2007 12:05:32 -0800

Maybe you could drop me an email with your page. I'd be happy to take a look at it.

By: WCityMike

WCityMike — Thu, 12 Jul 2007 12:53:41 -0800

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.

By: mkultra

mkultra — Thu, 12 Jul 2007 13:16:00 -0800

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 :)