Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #12454 > unrolled thread

Referring to Controls by id

Back to article view | Back to comp.lang.javascript

Contents

  Referring to Controls by id Gene Wirchenko <genew@ocis.net> - 2012-03-06 14:03 -0800
    Re: Referring to Controls by id Jeff North <jnorthau@yahoo.com.au> - 2012-03-07 09:23 +1100
      Re: Referring to Controls by id Gene Wirchenko <genew@ocis.net> - 2012-03-06 15:02 -0800
        Re: Referring to Controls by id Jeff North <jnorthau@yahoo.com.au> - 2012-03-07 19:08 +1100
          Re: Referring to Controls by id "Jukka K. Korpela" <jkorpela@cs.tut.fi> - 2012-03-07 10:44 +0200
            Re: Referring to Controls by id Jeff North <jnorthau@yahoo.com.au> - 2012-03-07 23:32 +1100
        Re: Referring to Controls by id Dr J R Stockton <reply1210@merlyn.demon.co.uk> - 2012-03-07 21:26 +0000
    Re: Referring to Controls by id Denis McMahon <denismfmcmahon@gmail.com> - 2012-03-07 01:31 +0000
      Re: Referring to Controls by id Gene Wirchenko <genew@ocis.net> - 2012-03-06 22:33 -0800
        Re: Referring to Controls by id Dr J R Stockton <reply1210@merlyn.demon.co.uk> - 2012-03-08 19:06 +0000
      Re: Referring to Controls by id "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-03-07 10:26 +0000
        Re: Referring to Controls by id Gene Wirchenko <genew@ocis.net> - 2012-03-07 08:55 -0800
          Re: Referring to Controls by id "Evertjan." <exjxw.hannivoort@interxnl.net> - 2012-03-08 09:44 +0000
            Re: Referring to Controls by id Gene Wirchenko <genew@ocis.net> - 2012-03-08 19:26 -0800

#12454 — Referring to Controls by id

Dear JavaScripters:

     Given a form with name=theForm and a control with
name=theControl, I can refer to the control with
          document.theForm.theControl

     If, instead of giving the control that name, I give it that id,
the reference still works, but if I change the form the same way
(giving it an id instead of a name of theForm, the reference fails
with the error:
          Error: Unable to get value of the property 'theControl':
object is null or undefined

     Why?

     I suppose I will just change everything to use
document.getElementById(), but the above is shorter.

***** Start of Test Page *****
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1">
  <title>2012-03-06: Change name to id</title>
</head>

<body>

<script type="text/javascript">
function DoThis()
  {
  document.theForm.theControl.value="Changed";
  }
</script>

<form id=theForm>
  <input name=One value="Start One" onblur="return DoThis();">
  <br>
  <input name=Two value="Start Two">
  <br>
  <input id=theControl value="Start Three">
  <br>
</form>

</body>

</html>
***** End of Test Page *****

Sincerely,

Gene Wirchenko

[toc] | [next] | [standalone]

#12455

On Tue, 06 Mar 2012 14:03:52 -0800, in comp.lang.javascript Gene
Wirchenko <genew@ocis.net>
<191dl7ltuts723trrgoj29mln2b3uvqflk@4ax.com> wrote:

>| Dear JavaScripters:
>| 
>|      Given a form with name=theForm and a control with
>| name=theControl, I can refer to the control with
>|           document.theForm.theControl
>| 
>|      If, instead of giving the control that name, I give it that id,
>| the reference still works, but if I change the form the same way
>| (giving it an id instead of a name of theForm, the reference fails
>| with the error:
>|           Error: Unable to get value of the property 'theControl':
>| object is null or undefined
>| 
>|      Why?
>| 
>|      I suppose I will just change everything to use
>| document.getElementById(), but the above is shorter.
>| 
>| ***** Start of Test Page *****
>| <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
>| "http://www.w3.org/TR/html4/strict.dtd">
>| <html>
>| 
>| <head>
>|   <meta http-equiv="Content-Type" content="text/html;
>| charset=iso-8859-1">
>|   <title>2012-03-06: Change name to id</title>
>| </head>
>| 
>| <body>
>| 
>| <script type="text/javascript">
>| function DoThis()
>|   {
>|   document.theForm.theControl.value="Changed";
>|   }

Doesn't work in FF, Chrome or Opera: document.theForm is undefined
Best to use:
var d = document.forms['theForm'];
d.elements['theControl'].value = "Changed";

>| </script>
>| 
>| <form id=theForm>
>|   <input name=One value="Start One" onblur="return DoThis();">

or
<input name=One value="Start One" onblur="return DoThis(this.value);">

<script>
function DoThis( v ) {
	if( v ) { .... }
}
</script>

>|   <br>
>|   <input name=Two value="Start Two">
>|   <br>
>|   <input id=theControl value="Start Three">

You do realise that this control will not be submitted as it is
name/value pairs that are sent to the server.

>|   <br>
>| </form>
>| 
>| </body>
>| 
>| </html>
>| ***** End of Test Page *****
>| 
>| Sincerely,
>| 
>| Gene Wirchenko

[toc] | [prev] | [next] | [standalone]

#12456

On Wed, 07 Mar 2012 09:23:37 +1100, Jeff North <jnorthau@yahoo.com.au>
wrote:

>On Tue, 06 Mar 2012 14:03:52 -0800, in comp.lang.javascript Gene
>Wirchenko <genew@ocis.net>

[snip]

>>|   document.theForm.theControl.value="Changed";
>>|   }
>
>Doesn't work in FF, Chrome or Opera: document.theForm is undefined
>Best to use:
>var d = document.forms['theForm'];
>d.elements['theControl'].value = "Changed";

     Yet another stable datum goes down.

>>| </script>
>>| 
>>| <form id=theForm>
>>|   <input name=One value="Start One" onblur="return DoThis();">
>
>or
><input name=One value="Start One" onblur="return DoThis(this.value);">

><script>
>function DoThis( v ) {
>	if( v ) { .... }
>}
></script>

     No, since One's value is of no consequence in this example.

[snip]

>>|   <input id=theControl value="Start Three">
>
>You do realise that this control will not be submitted as it is
>name/value pairs that are sent to the server.

     No, I did not.  I thought I was going to be able to get rid of
          document.getElementsByName(mumble)[0]
I suppose I still can, but now I need
          <input id=mumble name=mumble...>

[snip]

Sincerely,

Gene Wirchenko

[toc] | [prev] | [next] | [standalone]

#12466

On Tue, 06 Mar 2012 15:02:24 -0800, in comp.lang.javascript Gene
Wirchenko <genew@ocis.net>
<hg5dl7pk5ot1s5nvl2ob3t1vi8p4jldea6@4ax.com> wrote:

>| On Wed, 07 Mar 2012 09:23:37 +1100, Jeff North <jnorthau@yahoo.com.au>
>| wrote:
>| 
>| >On Tue, 06 Mar 2012 14:03:52 -0800, in comp.lang.javascript Gene
>| >Wirchenko <genew@ocis.net>
>| 
>| [snip]
>| 
>| >>|   document.theForm.theControl.value="Changed";
>| >>|   }
>| >
>| >Doesn't work in FF, Chrome or Opera: document.theForm is undefined
>| >Best to use:
>| >var d = document.forms['theForm'];
>| >d.elements['theControl'].value = "Changed";
>| 
>|      Yet another stable datum goes down.

Only 'stable' for IE :-)
You will find that you will most likely use both methods
(document.forms and getElementById). If a single function is
processing form inputs i.e. validation then the document.forms method
would be more suitable (and quicker). An example of getElementById is
given below.
 
>| >>| </script>
>| >>| 
>| >>| <form id=theForm>
>| >>|   <input name=One value="Start One" onblur="return DoThis();">
>| >
>| >or
>| ><input name=One value="Start One" onblur="return DoThis(this.value);">
>| 
>| ><script>
>| >function DoThis( v ) {
>| >	if( v ) { .... }
>| >}
>| ></script>
>| 
>|      No, since One's value is of no consequence in this example.

It was an example of how to send through information about the control
to the function. I could've used: 
<input name=One value="Start One" onblur="return DoThis(this.name);">

<script>
//--- handle the selected controls on a form
//--- here we need to use getElementById as we don't know what form
//--- the control belongs to
function DoThis( el ) {
	if( document.getElementById ) {
		switch( el ) {
			case "One" :
				 document.getElementById("theControl").value='Changed"; 
				 break;
			case "Two" :
				 document.getElementById("One").value='Changed"; 
				 break;
		}
	}
}
</script>

>| [snip]
>| 
>| >>|   <input id=theControl value="Start Three">
>| >
>| >You do realise that this control will not be submitted as it is
>| >name/value pairs that are sent to the server.
>| 
>|      No, I did not.  I thought I was going to be able to get rid of
>|           document.getElementsByName(mumble)[0]
>| I suppose I still can, but now I need
>|           <input id=mumble name=mumble...>
>| 
>| [snip]
>| 
>| Sincerely,
>| 
>| Gene Wirchenko

If you want to write
<input name='fred' id='fred'>
and only want to use
<input name='fred'>
then why not use some script to assign an id to each control. That way
you have less typing and, if js is turned off, then the forms will
submit as per normal. If js is on then you have the added
functionality at your disposal.

[toc] | [prev] | [next] | [standalone]

#12467

2012-03-07 10:08, Jeff North wrote:

> If you want to write
> <input name='fred' id='fred'>
> and only want to use
> <input name='fred'>

... then stop wanting that. :-)

> then why not use some script to assign an id to each control. That way
> you have less typing and, if js is turned off, then the forms will
> submit as per normal.

But any CSS styling that uses id selectors is lost, among other things.

There are good reasons to use an id attribute for every form field:
1) Handy for referring to the element in JavaScript.
2) Handy for referring to the element in CSS. The id selectors work 
universally, e.g. attribute selectors don't.
3) Needed for associating a field with its <label> in the general case. 
(You can put <input> inside <label> instead, but it's less natural and 
it's not possible e.g. when <label> is in one cell of a table and 
<input> is in another cell.)

For text input fields, you can almost always use the same string in the 
id value as in the name value. For radio buttons, you cannot, but it is 
usually easy to apply some simple naming scheme. And if you have 
zillions of fields to generate, you are probably doing it 
programmatically anyway, so it's just a matter of a little extra coding.

-- 
Yucca, http://www.cs.tut.fi/~jkorpela/

[toc] | [prev] | [next] | [standalone]

#12472

On Wed, 07 Mar 2012 10:44:05 +0200, in comp.lang.javascript "Jukka K.
Korpela" <jkorpela@cs.tut.fi>
<jj774j$emf$1@dont-email.me> wrote:

>| 2012-03-07 10:08, Jeff North wrote:
>| 
>| > If you want to write
>| > <input name='fred' id='fred'>
>| > and only want to use
>| > <input name='fred'>
>| 
>| ... then stop wanting that. :-)
>| 
>| > then why not use some script to assign an id to each control. That way
>| > you have less typing and, if js is turned off, then the forms will
>| > submit as per normal.
>| 
>| But any CSS styling that uses id selectors is lost, among other things.

Well stop doing that :-)

For controls you should be using generic styling:
a[href],
input[type='submit'],
input[type='image'],
label[for],
select,
button,
.pointer { cursor: pointer; }

/* style all form input controls */
input {
	background: -moz-linear-gradient(center bottom, #EEEEEE 0%, white
50%) repeat scroll 0 0 #FFFFFF;
	border: 1px solid #AAAAAA;
	border-radius: 4px 4px 4px 4px;
	color: #444444;
	height: 25px;
	line-height: 26px;
	overflow: hidden;
	padding: 0 8px;
	position: relative;
	text-decoration: none;
	white-space: nowrap;
}
etc etc etc

>| There are good reasons to use an id attribute for every form field:
>| 1) Handy for referring to the element in JavaScript.
>| 2) Handy for referring to the element in CSS. The id selectors work 
>| universally, e.g. attribute selectors don't.
>| 3) Needed for associating a field with its <label> in the general case. 
>| (You can put <input> inside <label> instead, but it's less natural and 
>| it's not possible e.g. when <label> is in one cell of a table and 
>| <input> is in another cell.)
>| 
>| For text input fields, you can almost always use the same string in the 
>| id value as in the name value. For radio buttons, you cannot, but it is 
>| usually easy to apply some simple naming scheme. And if you have 
>| zillions of fields to generate, you are probably doing it 
>| programmatically anyway, so it's just a matter of a little extra coding.

[toc] | [prev] | [next] | [standalone]

#12484

In comp.lang.javascript message <hg5dl7pk5ot1s5nvl2ob3t1vi8p4jldea6@4ax.
com>, Tue, 6 Mar 2012 15:02:24, Gene Wirchenko <genew@ocis.net> posted:

>
>     No, I did not.  I thought I was going to be able to get rid of
>          document.getElementsByName(mumble)[0]
>I suppose I still can, but now I need
>          <input id=mumble name=mumble...>

AFAICS, JavaScript in a well-designed page should not need to use any
IDs at all.  It is at most necessary that all elements of the DOM tree
(apart from document) that will be referred to by JavaScript, and all of
their ancestors, should have names.

A parent element "knows" the names of all of its children, and it knows
its own parent; but it does not know the names of its other descendants.
Exception : a form element knows the names of all its descendant
controls.  I don't know what happens if a form's ancestor chain includes
another form - whether the ancestral form knows what controls are within
the descendant form.



I wonder how long newbies take to discover that one can easily and
sufficiently quickly walk the entire DOM tree or a branch thereof,
peering at each element in turn ?

Cut from something that works, but not tested as is :

IDees = {}

function WalkTree(Arg) { var IDee, El = Arg.firstChild
  while (El) { if (El.id) { IDee = El.id ; IDees[IDee] = true }
  WalkTree(El)
  El = El.nextSibling } } // end WalkTree


I don't recall whether anything has been said about anchors matching
IDs.  It might be allowed, but it could cause confusion if matches were
used as a link destination.  I don't allow myself to do it for long.

-- 
 (c) John Stockton, nr London, UK. ?@merlyn.demon.co.uk  Turnpike v6.05  MIME.
  Web  <http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms and links;
  Astro stuff via astron-1.htm, gravity0.htm ; quotings.htm, pascal.htm, etc.
 No Encoding. Quotes before replies. Snip well. Write clearly. Don't Mail News.

[toc] | [prev] | [next] | [standalone]

#12461

On Tue, 06 Mar 2012 14:03:52 -0800, Gene Wirchenko wrote:

>      I suppose I will just change everything to use
> document.getElementById(), but the above is shorter.

You could wrap document.getElementById thus:

function el( id ) { return document.getElementById( id ); }

Rgds

Denis McMahon

[toc] | [prev] | [next] | [standalone]

#12465

On 07 Mar 2012 01:31:50 GMT, Denis McMahon <denismfmcmahon@gmail.com>
wrote:

>On Tue, 06 Mar 2012 14:03:52 -0800, Gene Wirchenko wrote:
>
>>      I suppose I will just change everything to use
>> document.getElementById(), but the above is shorter.
>
>You could wrap document.getElementById thus:
>
>function el( id ) { return document.getElementById( id ); }

     Yeah, and probably will.  I prefer to avoid such layering, but I
suppose it will hurt not that much this once.

     Oh, look!  A road.  I wonder where it leads.

Sincerely,

Gene Wirchenko

[toc] | [prev] | [next] | [standalone]

#12512

In comp.lang.javascript message <k70el7hau55gc89bbbnrkq80jqt3q8qu5n@4ax.
com>, Tue, 6 Mar 2012 22:33:30, Gene Wirchenko <genew@ocis.net> posted:

>On 07 Mar 2012 01:31:50 GMT, Denis McMahon <denismfmcmahon@gmail.com>
>wrote:
>
>>On Tue, 06 Mar 2012 14:03:52 -0800, Gene Wirchenko wrote:
>>
>>>      I suppose I will just change everything to use
>>> document.getElementById(), but the above is shorter.
>>
>>You could wrap document.getElementById thus:
>>
>>function el( id ) { return document.getElementById( id ); }
>
>     Yeah, and probably will.  I prefer to avoid such layering, but I
>suppose it will hurt not that much this once.
>
>     Oh, look!  A road.  I wonder where it leads.

Perhaps to

    function Wryt(ID, S) { document.getElementById(ID).innerHTML = S }

    function Empt() { var L = arguments.length
      while (L--) Wryt(arguments[L], "") }

or
    function Reed(f, s) { return document.forms[f].elements[s].value }
    function Rite(f, s, Q) {
      return document.forms[f].elements[s].value = Q }

-- 
 (c) John Stockton, nr London UK.  ?@merlyn.demon.co.uk  DOS 3.3, 6.20; WinXP.
  Web  <http://www.merlyn.demon.co.uk/> - FAQqish topics, acronyms and links.
   PAS EXE TXT ZIP via  <http://www.merlyn.demon.co.uk/programs/00index.htm>
   My DOS  <http://www.merlyn.demon.co.uk/batfiles.htm> - also batprogs.htm.

[toc] | [prev] | [next] | [standalone]

#12469

Denis McMahon wrote on 07 mrt 2012 in comp.lang.javascript:

> On Tue, 06 Mar 2012 14:03:52 -0800, Gene Wirchenko wrote:
> 
>>      I suppose I will just change everything to use
>> document.getElementById(), but the above is shorter.

Indeed, using IE-only code is a bad idea.

But "everything"?

The use of 

document.forms[].elements[].
this.
this.form.
elementPointer.getElementsBy*()

can make live much easier,
as more general functions can be written.

> You could wrap document.getElementById thus:
> function el( id ) { return document.getElementById( id ); }

This function is most commonly named gebi()

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#12477

On 07 Mar 2012 10:26:27 GMT, "Evertjan."
<exjxw.hannivoort@interxnl.net> wrote:

>Denis McMahon wrote on 07 mrt 2012 in comp.lang.javascript:
>
>> On Tue, 06 Mar 2012 14:03:52 -0800, Gene Wirchenko wrote:
>> 
>>>      I suppose I will just change everything to use
>>> document.getElementById(), but the above is shorter.
>
>Indeed, using IE-only code is a bad idea.
>
>But "everything"?

     I think so.  A lot of my code operates by fieldname.  I have an
object associated with each control that has properties used with it:
name, datatype, size, formatting options, validation code, etc.

>The use of 
>
>document.forms[].elements[].

     I have only seen that with numeric sbuscripts.  I have not
experimented with it.

>this.
>this.form.
>elementPointer.getElementsBy*()

     elementPointer?  I have only seen getElement*() under document.

>can make live much easier,
>as more general functions can be written.
>
>> You could wrap document.getElementById thus:
>> function el( id ) { return document.getElementById( id ); }
>
>This function is most commonly named gebi()

     Already thinking of it.

Sincerely,

Gene Wirchenko

[toc] | [prev] | [next] | [standalone]

#12489

Gene Wirchenko wrote on 07 mrt 2012 in comp.lang.javascript:

> On 07 Mar 2012 10:26:27 GMT, "Evertjan."
> <exjxw.hannivoort@interxnl.net> wrote:
> 
>>Denis McMahon wrote on 07 mrt 2012 in comp.lang.javascript:
>>
>>> On Tue, 06 Mar 2012 14:03:52 -0800, Gene Wirchenko wrote:
>>> 
>>>>      I suppose I will just change everything to use
>>>> document.getElementById(), but the above is shorter.
>>
>>Indeed, using IE-only code is a bad idea.
>>
>>But "everything"?
> 
>      I think so.  A lot of my code operates by fieldname.  I have an
> object associated with each control that has properties used with it:
> name, datatype, size, formatting options, validation code, etc.

What is a fieldname [in HTML]?
Do you mean the <td> cells of a <table><tr> row?

There are nice DOM-methods for that: [not tested]

var myTables = document.getElementsByName('myTables');
myTables[2].tBodies[7].rows[31].cells[12].style.color = '#a00';

or:

function getCellContent(table,row,cell) {
  var myTables = document.getElementsByName(table);
  return myTables[0].rows[row].cells[cell].innerHTML;
};

>>The use of 
>>
>>document.forms[].elements[].
> 
>      I have only seen that with numeric sbuscripts.  I have not
> experimented with it.

var anInput = 'thatInput';
var result = document.forms['thisForm'].elements[anInput].value

or 

document.forms.thisForm.getElementsByTagName('input').7.checked = 
'checked';

 
>>this.
>>this.form.
>>elementPointer.getElementsBy*()
> 
>      elementPointer?  I have only seen getElement*() under document.

The getElement[s]* can be restricted to the children of an element.
[this is more useful with getElementsBy* than with getElementBy*,
since the unique-id requirement]

<form name='thisForm'>
<button name='thatButton'>
<span>A</span> <span>B</span> <span>C</span><br>
<span>D</span> <span>E</span>
</button>
</form>

var elementPointer = document.forms['thisForm'].elements['thatButton'];
var theseSpans = elementPointer.getElementsByTagName('span');
theseSpans[2].style.fontWeight = 800;

... will only bold the 3th span of that an element named 'thatButton'
in a form named 'thisForm'. [named != id-ed] [not tested]

>>can make live much easier,
>>as more general functions can be written.
>>
>>> You could wrap document.getElementById thus:
>>> function el( id ) { return document.getElementById( id ); }
>>
>>This function is most commonly named gebi()
> 
>      Already thinking of it.

;-)

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

[toc] | [prev] | [next] | [standalone]

#12518

On 08 Mar 2012 09:44:09 GMT, "Evertjan."
<exjxw.hannivoort@interxnl.net> wrote:

>Gene Wirchenko wrote on 07 mrt 2012 in comp.lang.javascript:
>
>> On 07 Mar 2012 10:26:27 GMT, "Evertjan."
>> <exjxw.hannivoort@interxnl.net> wrote:
>> 
>>>Denis McMahon wrote on 07 mrt 2012 in comp.lang.javascript:
>>>
>>>> On Tue, 06 Mar 2012 14:03:52 -0800, Gene Wirchenko wrote:
>>>> 
>>>>>      I suppose I will just change everything to use
>>>>> document.getElementById(), but the above is shorter.
>>>
>>>Indeed, using IE-only code is a bad idea.
>>>
>>>But "everything"?
>> 
>>      I think so.  A lot of my code operates by fieldname.  I have an
>> object associated with each control that has properties used with it:
>> name, datatype, size, formatting options, validation code, etc.
>
>What is a fieldname [in HTML]?

     It is not a term in HTML (that I know of).  It is the name of an
input field, such a "CliCode".  The corresponding input control has
that name as its id.

>Do you mean the <td> cells of a <table><tr> row?

     No, but I do put the input controls in <td>s.

>There are nice DOM-methods for that: [not tested]
>
>var myTables = document.getElementsByName('myTables');

     I was doing this (and appending "[0]") to get the control object.
Since Gebi()ed.

>myTables[2].tBodies[7].rows[31].cells[12].style.color = '#a00';

     I do not think of the fields by number but by name.  If I changed
their order, I would not have to change code references.

>or:
>
>function getCellContent(table,row,cell) {
>  var myTables = document.getElementsByName(table);
>  return myTables[0].rows[row].cells[cell].innerHTML;
>};

     Interesting, but not for me ATM.  My data is in input controls.

[snip]

>>>> You could wrap document.getElementById thus:
>>>> function el( id ) { return document.getElementById( id ); }
>>>
>>>This function is most commonly named gebi()
>> 
>>      Already thinking of it.
>
>;-)

     And I have done it except I called mine Gebi().

Sincerely,

Gene Wirchenko

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web