[San-Diego-pm] Perl Meeting on Monday, May 9th

[Joel Fentin]

Tkil wrote:
> A few questions and answers that came up at tonights meeting:

> 3. How can you access HTML form controls by control name from
>    JavaScript, when that name is itself stored in a separate variable?
>    (This is similar to the problem of "variable that names a variable"
>    in perl, also known as symbolic refs; frowned upon, but in a
>    language such as JavaScript that (SFAIK) lacks proper
>    references...)
> 
> JavaScript treats all objects (including forms) as dictionaries; while
> you can put a literal name after a dot to index into such a
> dictionary, you can also use square brackets with a string value.
> That is, these two lines have the same effect:
> 
>   var control = document.my_form.my_widget;
>   var control = document.my_form["my_widget"];
> 
> For a simple example, see
> 
>   http://scrye.com/~tkil/pm/js-by-name.html
> 
> I use this function to toggle the state of the named control within
> form "f1".
> 
>   function toggle( name )
>   {
>       var control = document.f1[name];
>       control.checked = ! control.checked;
>   }
> 
> You might have noticed that you can even parameterize away the form
> name; since I needed a more general toggle for my second example
> there, I made "toggle2" which relies on the fact that all four of
> these (executable) lines have the same effect:
> 
>   // same as above
>   var control = document.my_form.my_widget;
>   var control = document.my_form["my_widget"];
> 
>   // parameterize away the form name, too, if you like.
>   var control = document["my_form"].my_widget;
>   var control = document["my_form"]["my_widget"];
> 
> Here's "toggle2":
> 
>   function toggle2( form, name )
>   {
>       var control = document[form][name];
>       control.checked = ! control.checked;
>   }
> 
> You can use any sort of string construction to build the name; an
> obvious use is working with matrices or other highly repetitive
> structures.  As an example, I built up a 3x3 matrix with checkboxes
> named m(x)(y):
> 
>   m00 m10 m20
>   m01 m11 m21
>   m02 m12 m22
> 
> Then I added buttons that flip a row (by calling "flip( 'row', 0 )"
> for row 0, or "flip( 'col', 0 )" for flipping column 0):
> 
>   <tr>
>     <td><input type="checkbox" name="m00" /></td>
>     <td><input type="checkbox" name="m10" /></td>
>     <td><input type="checkbox" name="m20" /></td>
>     <td><input type="button" value="flip row"
>                onClick="javascript:flip('row','0')" /></td>
>   </tr>
> 
> Last, we need to implement the function "flip" that builds up each
> control name and toggles it within form "f2":
> 
>   function flip( dir, which )
>   {
>       var i, name;
>       for ( i = 0; i < 3; ++i )
>       {
>           if ( dir == "row" )
>           {
>               name = "m" + i + which;
>           }
>           else
>           {
>               name = "m" + which + i;
>           }
>           toggle2( "f2", name );
>       }
>   }
> 
> Finally, you can also iterate through all the elements in an object /
> dictionary with the "for ( i in ... )" syntax.  This seems to be a
> nice reference on this sort of javascript fun:
> 
>   http://www.comptechdoc.org/independent/web/cgi/javamanual/javaloops.html
> 
> (And I'm by no means a DHTML expert; if others want to comment or
> correct this example, please feel free.  The examples were tested
> under IE6 (XP Pro SP2), FireFox 1.0.3 (Linux), and Safari 1.3 (OSX
> 10.3); only issue was the rendering of the "flip col" button on
> Safari, but I was abusing it anyway...).

Unlike Tony, I actually slept last night. Real programmers don't sleep. 
I'm just not made of the right stuff. But I'm grateful.

I did a few experiments before sleeping. The following relate to a 
select control. The first two lines tell if a specific element has been 
selected. The second two are to give the quantity of elements. Also 
indicated are the results I got with two browsers.

function N()
{
var X = 'Name';
alert(document.form1[X][0].selected);//works for firefox but not IE
alert(document.form1.Name[0].selected);//works
alert(document.form1.Name.length); //works
alert(document.form1[X].length); //works
}

-- 
Joel Fentin       tel: 760-749-8863    FAX: 760-749-8864
Email me:         http://fentin.com/me/ContactMe.html
Biz Website:      http://fentin.com
Personal Website: http://fentin.com/me