Accessing text form fields name=field[label]

[Chuck Anderson]

I'm pretty much a JavaScript novice. I'm good at learning by example
and changing those examples to suit my needs. That said ....

..... I have some select fields in a form I created for a database search
that I am unable to figure out how to access. (The search is
implemented in Php/MySQL.)

The user enters search values for: name, address1, city, .... etc.,
..... and for each of these they also select whether the search should
look for the field to be equal to, not equal to, Like, or Not Like the
value in the database.

So in the form I have:
<input type=text name=city>
in combination with
<select name=func[city]>
<option value='='>=</option>
<option value='!='>!=</option>
<option value='LIKE'>LIKE</option>
<option value='!='NOT LIKE>NOT LIKE</option>
</select>

For an example, this search could be to find an entry "WHERE city
$func[city]] $city. (Php - e.g., WHERE city = 'Denver'). This works
fine - in Php. I use similar combinations for name, address, etc., ...

Okay, here's the JavaScript problem. For the Reset action I have a
JavaScript function to Reset all the form fields. I want to Reset the
selected indexes for the "func" fields (func[name], func[city],
func[state], ...) using a loop that goes through the associative array,
"func." I cannot find the right syntax to address them as an array and
I am beginning to think that JavaScript does not see them as an array.
I could have just as well named them func_name, func_address, func_city,
..... (??)

I have already come up with a workaround. I loop though *every* form
element and if substring(0,5) = 'func[' I set the SelectedIndex for that
element to 0.

What I would like is a definitive answer. Am I correct that JavaScript
does not see func as an array, or is there a syntax for accessing it
that has so far totally eluded me.

I can access individual members of func like so:
alert (form["func[host_id]"].selectedIndex);
and that works, but I cannot figure out the correct syntax to loop
through the array with:

for (x in form.func)

Is it simply not possible? If it is possible, what is the correct
syntax for::

// within a function where form is an input = document.theform
for (x in form.func) // I also tried for (x in form["func"])
{
alert (x);
form.func[x].SelectedIndex = 0;
}

I put the alert in that loop for testing and it never seems to even
enter the loop.

Can this be done the way I want to do it?

Thanks in Advance for any help.

 

[Chuck Anderson]

I goofed the Subject. It should actually be

Accessing *select* form fields name=field[label]
(select, not text fields)

I'm pretty much a JavaScript novice. I'm good at learning by example
and changing those examples to suit my needs. That said ....

.... I have some select fields in a form I created for a database search
that I am unable to figure out how to access. (The search is
implemented in Php/MySQL.)

The user enters search values for: name, address1, city, .... etc.,
.... and for each of these they also select whether the search should
look for the field to be equal to, not equal to, Like, or Not Like the
value in the database.

So in the form I have:
<input type=text name=city>
in combination with
<select name=func[city]>
<option value='='>=</option>
<option value='!='>!=</option>
<option value='LIKE'>LIKE</option>
<option value='!='NOT LIKE>NOT LIKE</option>
</select>

For an example, this search could be to find an entry "WHERE city
$func[city]] $city. (Php - e.g., WHERE city = 'Denver'). This works
fine - in Php. I use similar combinations for name, address, etc., ...

Okay, here's the JavaScript problem. For the Reset action I have a
JavaScript function to Reset all the form fields. I want to Reset the
selected indexes for the "func" fields (func[name], func[city],
func[state], ...) using a loop that goes through the associative array,
"func." I cannot find the right syntax to address them as an array and
I am beginning to think that JavaScript does not see them as an array.
I could have just as well named them func_name, func_address, func_city,
.... (??)

I have already come up with a workaround. I loop though *every* form
element and if substring(0,5) = 'func[' I set the SelectedIndex for that
element to 0.

What I would like is a definitive answer. Am I correct that JavaScript
does not see func as an array, or is there a syntax for accessing it
that has so far totally eluded me.

I can access individual members of func like so:
alert (form["func[host_id]"].selectedIndex);
and that works, but I cannot figure out the correct syntax to loop
through the array with:

for (x in form.func)

Is it simply not possible? If it is possible, what is the correct
syntax for::

// within a function where form is an input = document.theform
for (x in form.func) // I also tried for (x in form["func"])
{
alert (x);
form.func[x].SelectedIndex = 0;
}

I put the alert in that loop for testing and it never seems to even
enter the loop.

Can this be done the way I want to do it?

Thanks in Advance for any help.

--
*****************************
Chuck Anderson • Boulder, CO
http://www.CycleTourist.com
Everyone's journey should be different,
so that we all are enriched
in new and endless ways
*****************************

 

[RobG]

I'm pretty much a JavaScript novice. I'm good at learning by example
and changing those examples to suit my needs. That said ....

.... I have some select fields in a form I created for a database search
that I am unable to figure out how to access. (The search is
implemented in Php/MySQL.)

The user enters search values for: name, address1, city, .... etc.,
.... and for each of these they also select whether the search should
look for the field to be equal to, not equal to, Like, or Not Like the
value in the database.

So in the form I have:
<input type=text name=city>
in combination with
<select name=func[city]>

You should always quote attribute values in HTML - though it's not
always necessary, it saves having to remember which characters to quote
- the '[' and ']' characters must be quoted.

"In certain cases, authors may specify the value of an attribute
without any quotation marks. The attribute value may only contain
letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45),
periods (ASCII decimal 46), underscores (ASCII decimal 95), and
colons (ASCII decimal 58). We recommend using quotation marks even
when it is possible to eliminate them."

<option value='='>=</option>
<option value='!='>!=</option>
<option value='LIKE'>LIKE</option>
<option value='!='NOT LIKE>NOT LIKE</option>

You possibly meant:

</select>

For an example, this search could be to find an entry "WHERE city
$func[city]] $city. (Php - e.g., WHERE city = 'Denver'). This works
fine - in Php. I use similar combinations for name, address, etc., ...

Okay, here's the JavaScript problem. For the Reset action I have a
JavaScript function to Reset all the form fields. I want to Reset the

Why can't you use a plain reset button? No script required.

selected indexes for the "func" fields (func[name], func[city],
func[state], ...) using a loop that goes through the associative array,
"func." I cannot find the right syntax to address them as an array and

There is no 'associative array' func unless you have created it elsewhere.

I am beginning to think that JavaScript does not see them as an array.

No, it doesn't. However, the option elements of a select are held in a
collection called options - but they don't have a reset method.

I could have just as well named them func_name, func_address, func_city,
.... (??)

I have already come up with a workaround. I loop though *every* form
element and if substring(0,5) = 'func[' I set the SelectedIndex for that
element to 0.

The obvious solution is:

<input type="reset">


If you insist on using JavaScript then call the form's reset method:

document.forms['formName'].reset();

What I would like is a definitive answer. Am I correct that JavaScript
does not see func as an array, or is there a syntax for accessing it
that has so far totally eluded me.

See above.

I can access individual members of func like so:
alert (form["func[host_id]"].selectedIndex);
and that works, but I cannot figure out the correct syntax to loop
through the array with:

for (x in form.func)

Looping through the options is unnecessary. Say you have:

<form name="formA" action="">
<select name="selA">
<option selected>one
<option>two
<option>three
</select>
<input type="reset">
<input type="button" value="Reset using script"
onclick="this.form.reset();">
<input type="button" value="Select two"
onclick="this.form.elements['selA'].selectedIndex = 1;">
</form>

Clicking the reset button will reset the form. To do it with script,
click the "Reset using script" button.

To set option 1 (the second one) as selected, click the "Select two" button.

To loop through all the options - which seems pointless, but what the
heck - do something like:

var options = document.forms['formA'].elements['selA'].options;
for (var i=0, len=options.length; i<len; i++){
alert('Option ' + i + ': ' + options.value)
}

[...]

 

[RobG]

RobG wrote:
[...]

To loop through all the options - which seems pointless, but what the
heck - do something like:

var options = document.forms['formA'].elements['selA'].options;
for (var i=0, len=options.length; i<len; i++){
alert('Option ' + i + ': ' + options.value)

Sorry, IE won't like that - if an option has no value attribute, IE
wants the text explicitly:

alert('Option ' + i + ': ' + options.text)

 

[Randy Webb]

RobG said the following on 7/21/2006 11:41 PM:

RobG wrote:
[...]

To loop through all the options - which seems pointless, but what the
heck - do something like:

var options = document.forms['formA'].elements['selA'].options;
for (var i=0, len=options.length; i<len; i++){
alert('Option ' + i + ': ' + options.value)

Sorry, IE won't like that - if an option has no value attribute, IE
wants the text explicitly:

alert('Option ' + i + ': ' + options.text)

I have never understood what a select list without values was good for.

 

[Dr John Stockton]

JRS: In article <44c197ef$0$23507$5a62ac22@per-qv1-newsreader-
01.iinet.net.au>, dated Sat, 22 Jul 2006 13:12:38 remote, seen in

You should always quote attribute values in HTML - though it's not
always necessary, it saves having to remember which characters to quote

ISTM that it's very easy to remember that alphanumerics (A-Za-z0-9)
don't need quoting, and that ordinary numeric values (such as -99.5)
don't need quoting; and that URLs *should* be quoted.

That leads, AFAICS, to quoting everything that needs it, and not too
much else (I'm aware that what follows href= sometimes does not *need*
quoting).

When HTML is being written out from javascript strings, knowing that
simple cases do not need quoting saves having to remember to alternate
or escape the quotes you don't need.


IIRC, there is an argument that moving on from HTML to some other
acronym will mean adding those quotes; but it will mean many other
changes too, and an experienced RegExp user should be able to do the
vast bulk of the extra quoting with an editing tool.

 

[Chuck Anderson]

First off, thanks for your help (reply interspersed).

I'm pretty much a JavaScript novice. I'm good at learning by example
and changing those examples to suit my needs. That said ....

.... I have some select fields in a form I created for a database search
that I am unable to figure out how to access. (The search is
implemented in Php/MySQL.)

The user enters search values for: name, address1, city, .... etc.,
.... and for each of these they also select whether the search should
look for the field to be equal to, not equal to, Like, or Not Like the
value in the database.

So in the form I have:
<input type=text name=city>
in combination with
<select name=func[city]>

You should always quote attribute values in HTML - though it's not
always necessary, it saves having to remember which characters to quote
- the '[' and ']' characters must be quoted.

"In certain cases, authors may specify the value of an attribute
without any quotation marks. The attribute value may only contain
letters (a-z and A-Z), digits (0-9), hyphens (ASCII decimal 45),
periods (ASCII decimal 46), underscores (ASCII decimal 95), and
colons (ASCII decimal 58). We recommend using quotation marks even
when it is possible to eliminate them."
<URL:http://www.w3.org/TR/html4/intro/sgmltut.html#attributes>

Oh yeah. I am aware of this and choose not to quote strictly
alphanumeric attributes, ... and I almost always remember to quote any
attributes containing other characters (like % or [ or ] ). Somehow I
forgot about that in this case.

<option value='='>=</option>
<option value='!='>!=</option>
<option value='LIKE'>LIKE</option>
<option value='!='NOT LIKE>NOT LIKE</option>

You possibly meant:

<option value='NOT LIKE'>NOT LIKE</option>


Yep, just a mistype.

</select>

For an example, this search could be to find an entry "WHERE city
$func[city]] $city. (Php - e.g., WHERE city = 'Denver'). This works
fine - in Php. I use similar combinations for name, address, etc., ...

Okay, here's the JavaScript problem. For the Reset action I have a
JavaScript function to Reset all the form fields. I want to Reset the

Why can't you use a plain reset button? No script required.

When the user Submits the search, the search page reloads itself,
re-displays the search form with the search criteria displayed in the
form, and displays the search results under that. At that point I want
Reset to to set to set all text fields back to blank and the comparator
function fields back to '=', but what it does at this point is Reset
them to the values that were set when the page reloaded itself. I want
them to go back to blank, so I have a function do it.

selected indexes for the "func" fields (func[name], func[city],
func[state], ...) using a loop that goes through the associative array,
"func." I cannot find the right syntax to address them as an array and

There is no 'associative array' func unless you have created it elsewhere.

I am beginning to think that JavaScript does not see them as an array.

No, it doesn't.

That's the key point for me. I can quit beating my head against the
wall and use my "workaround."

However, the option elements of a select are held in a
collection called options - but they don't have a reset method.

I can access individual members of func like so:
alert (form["func[host_id]"].selectedIndex);
and that works, but I cannot figure out the correct syntax to loop
through the array with:

for (x in form.func)

Looping through the options is unnecessary.

Correct. And I don't need or want to, either. Although you've shown me
one more thing about JavaScript and forms I did not know. .option.

<form name="formA" action="">
<select name="selA">
<option selected>one
<option>two
<option>three
</select>
<input type="reset">
<input type="button" value="Reset using script"
onclick="this.form.reset();">
<input type="button" value="Select two"
onclick="this.form.elements['selA'].selectedIndex = 1;">
</form>

Clicking the reset button will reset the form. To do it with script,
click the "Reset using script" button.

To set option 1 (the second one) as selected, click the "Select two" button.

To loop through all the options - which seems pointless, but what the
heck - do something like:

var options = document.forms['formA'].elements['selA'].options;
for (var i=0, len=options.length; i<len; i++){
alert('Option ' + i + ': ' + options.value)
}

[...]

 

[RobG]

First off, thanks for your help (reply interspersed).

Chuck Anderson wrote: [...]
Why can't you use a plain reset button? No script required.

When the user Submits the search, the search page reloads itself,
re-displays the search form with the search criteria displayed in the
form, and displays the search results under that. At that point I want
Reset to to set to set all text fields back to blank and the comparator
function fields back to '=', but what it does at this point is Reset
them to the values that were set when the page reloaded itself. I want
them to go back to blank, so I have a function do it.

Then I guess using the form's reset method would be best. You can call
it using body/window onload or use a script element immediately below
the form.

The problem with onload is that the form may display un-reset for some
time before the page finishes loading, then it will reset.

[...]

That's the key point for me. I can quit beating my head against the
wall and use my "workaround."

I probably should have written "Yes, it doesn't". English is a strange
language. ;-)

[...]