By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,970 Members | 1,669 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,970 IT Pros & Developers. It's quick & easy.

form variable not being set

P: n/a
i've written some javascript code that i believe should set a form
variable to a certain value, depending on what the user clicks on.
unfortunately, it isn't working. here's the url:

http://www.frostjedi.com/terra/scripts/graemlin3.html

clicking in the color palette thing and then clicking the submit button
reveals that the form variable named color isn't being set. if you
look at the javascript source, you'll see that i'm atleast attempting
to set it with "document.forms[0].color.value = 'xxxxxx'"...

any ideas on what i'm doing wrong and how i could go about fixing it
would be appreciated - thanks!

Jul 23 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
A job for 'alert', I'd say.

"yawnmoth" <te*******@yahoo.com> wrote in message
news:11**********************@l41g2000cwc.googlegr oups.com...
i've written some javascript code that i believe should set a form
variable to a certain value, depending on what the user clicks on.
unfortunately, it isn't working. here's the url:

http://www.frostjedi.com/terra/scripts/graemlin3.html

clicking in the color palette thing and then clicking the submit button
reveals that the form variable named color isn't being set. if you
look at the javascript source, you'll see that i'm atleast attempting
to set it with "document.forms[0].color.value = 'xxxxxx'"...

any ideas on what i'm doing wrong and how i could go about fixing it
would be appreciated - thanks!

Jul 23 '05 #2

P: n/a
In article <11**********************@l41g2000cwc.googlegroups .com>,
"yawnmoth" <te*******@yahoo.com> wrote:
clicking in the color palette thing and then clicking the submit button
reveals that the form variable named color isn't being set. if you
look at the javascript source, you'll see that i'm atleast attempting
to set it with "document.forms[0].color.value = 'xxxxxx'"...


Trim this down to just the color pane and the javascript.

Implement you own debug console so you can print out progress data.
see:
http://groups-beta.google.com/group/...t/msg/170ddb0d...
Here is an example of how to work with an input field.

Robert

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Simple validate</title>

<script type="text/javascript">

function myfunction(formName,formField)
{

var ok;
var newValue = document.forms[formName].elements[formField].value;
alert('formName = ' + formName +
' formField = ' + formField +
' value = ' + newValue);

if( /^(0|[1-9]\d*)$/.test(newValue) )
{
var theValue = parseInt(newValue,10) + 1;
document.forms[formName].elements[formField].value = theValue;
ok = true;
}
else
{ ok = false;
alert('You need to enter a number.')
}

return ok;
}
</script>
</head>
<body>
<p>
The HTML file demonstrates how increment an input field.
Please input a number. </p>
<p>
</p>
<form name="myForm"
action="http://www.natAValidWebAddress.com"
method="POST"
onsubmit="return myfunction('myForm','theAddress');">

<p>Address:&nbsp;
<input type="text" name="theAddress" id='theAddress' size="40"></p>
<br>
<input type="submit" value="Submit address information">
</form>
</body>
</html>
Jul 23 '05 #3

P: n/a
yawnmoth wrote:
i've written some javascript code that i believe should set a form
variable to a certain value, depending on what the user clicks on.
unfortunately, it isn't working. here's the url:

http://www.frostjedi.com/terra/scripts/graemlin3.html

clicking in the color palette thing and then clicking the submit button reveals that the form variable named color isn't being set. if you
look at the javascript source, you'll see that i'm atleast attempting
to set it with "document.forms[0].color.value = 'xxxxxx'"...

any ideas on what i'm doing wrong and how i could go about fixing it
would be appreciated - thanks!


Simple problem...the color values being generated by the 'colorSwatch'
function don't match the select values in the 'color' listbox. So
nothing gets selected. Probably the most logical way to proceed here is
to reconstruct the listbox at the same time you're 'replacing' it with
the palette, ensuring the values match. Roughly....
function colorSwatch(width, height)
{
............
............
document.getElementById('color').style.display = 'none';
extra = '';
var sel = document.forms[0].color; //get listbox
sel.options.length = 0; //clear it
............
............
for(b = 0; b < 5; b++) {
temp = "" + numberList[r] + "" + numberList[g] + "" + numberList[b];
sel.options[sel.options.length] = new Option(temp, temp);
document.writeln('<a href="javascript:void........
............
............
}

Cute little app. \:=)

Jul 23 '05 #4

P: n/a
RobB wrote:
[...]
var sel = document.forms[0].color; //get listbox
sel.options.length = 0; //clear it


AFAIK, this will only work in IE because length is supposed to
be read-only. Surely the options should be removed using DOM
to remove the nodes, then add the new ones?

[...]

--
Rob
Jul 23 '05 #5

P: n/a

RobB wrote:
yawnmoth wrote:
<snip>

Simple problem...the color values being generated by the 'colorSwatch' function don't match the select values in the 'color' listbox. So
nothing gets selected. Probably the most logical way to proceed here is to reconstruct the listbox at the same time you're 'replacing' it with the palette, ensuring the values match. Roughly.... <snip code>
that makes sense. thanks for the tip / code! :)

as per RobG's comment... i found a website that i should be able to
reference for making it more cross-browser compliant (i'm mostly just
posting it for my personal reference):

http://www.mredkj.com/tutorials/tutorial005.html
Cute little app. \:=)


thanks! :=)

Jul 23 '05 #6

P: n/a
yawnmoth wrote:
RobB wrote:
yawnmoth wrote:
<snip>

Simple problem...the color values being generated by the 'colorSwatch'
function don't match the select values in the 'color' listbox. So
nothing gets selected. Probably the most logical way to proceed here is
to reconstruct the listbox at the same time you're 'replacing' it with
the palette, ensuring the values match. Roughly....

<snip code>


that makes sense. thanks for the tip / code! :)


Your'e welcome.
as per RobG's comment...


Don't sweat it.

http://www.faqts.com/knowledge_base/...d/1600/fid/178
Cute little app. \:=)


thanks! :=)


NP.

Jul 23 '05 #7

P: n/a
RobB wrote:
[...]
as per RobG's comment...


Don't sweat it.

http://www.faqts.com/knowledge_base/...d/1600/fid/178


Since select.length is the same as select.options.length, why not
use:

select.length = 0;

Saves an entire 8 keystrokes. You can also use it to add options:

selectRef.length += 10;

will add 10 empty options.
Seems my understanding re length being read only is out of date
(in regard to arrays and collections anyway). Since about
JavaScript 1.1:

"You can set the length property to truncate an array at
any time. When you extend an array by changing its length
property, the number of actual elements does not increase..."

<URL:http://synchro.net/docs/js/ref/array.html#1193439>

Sun had some similar comments on options collections.

I could not find any reference on the W3C site to say that the
number of options can be modified by changing the length other
than this in their "issues to be resolved":

"From O'Reilly's JavaScript Definitive Guide book [p. 646]:

"[begin quote]

"If you set an element in the options[] array to null, then
that option will be removed from the Select object, and the
elements above it in the array will be moved down, changing
their indices, to occupy the new space in the array.

"If you create a new Option object with the Option()
constructor (see the Option reference entry), you can add that
option to the end of list of options in the Select object by
assigning the newly created option to a position at the end of
the options[] array. To do this, set options[options.length].

"[end quote]

"Additionally, if you set options.length to a value higher than
the current value, then the number of options in the Select
object will be increased by adding new options to the end of
the array.

"Each of the browsers that I tested, Netscape, Win IE, Mac IE,
and WebTV, all work as above. I tested older versions of
browsers as well as the latest versions of these browsers."

<URL:http://www.w3.org/2001/12/DOM-Level-2-issues#i9b>

So I guess use length to modify arrays/collections all you like,
you should be able to extend and truncate arrays this way and can
use select.length or select.options.length (tested in IE and
Firefox).

--
Rob
Jul 23 '05 #8

P: n/a
RobG wrote:

[snip]
I could not find any reference on the W3C site to say that the
number of options can be modified by changing the length other
than this in their "issues to be resolved":


So I take it you didn't read the DOM 2 HTML Specification
(<URL:http://www.w3.org/TR/DOM-Level-2-HTML>) then? :P

From Appendix D - ECMAScript Language Binding:

Objects that implement the HTMLOptionsCollection interface:
Properties of objects that implement the HTMLOptionsCollection
interface:
length
This property is a Number and can raise an object that
implements DOMException interface on setting.

[Note that it doesn't say "read-only" in the description.]

Objects that implement the HTMLSelectElement interface:
Properties of objects that implement the HTMLSelectElement
interface:
length
This property is a Number and can raise an object that
implements DOMException interface on setting.

[Again, no "read-only".]

From Appendix A.1.1 - Changes to DOM Level 1 interfaces and exceptions:

Interface HTMLSelectElement
The type of the attribute options was changed from HTMLCollection
to HTMLOptionsCollection.
The attribute length is no longer readonly and is now unsigned.

[The length property of the HTMLCollection interface in both versions
/is/ read-only, so the change is significant.]

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #9

P: n/a
Michael Winter wrote:
RobG wrote:

[snip]
I could not find any reference on the W3C site to say that the
number of options can be modified by changing the length other
than this in their "issues to be resolved":

So I take it you didn't read the DOM 2 HTML Specification
(<URL:http://www.w3.org/TR/DOM-Level-2-HTML>) then? :P


Not, strictly speaking, in its entirety. But the point is kinda
moot since I'm not sure that had I done so I would have inferred
that I could use length to add and delete elements from an
options collection anyway. :-(

[...]
[Note that it doesn't say "read-only" in the description.] [...] [Again, no "read-only".]


But it does say the length attribute of HTMLCollection is
read-only. To me, it would be handy if at that point the spec
pointed out that there are exceptions to the rule.

Noted of course that for HTMLOptionsCollection, length
"specifies the length or size of the list."

I can't find anywhere in the spec that says something like
"length can be used to change the number of elements in an
options collection".

Clearly I don't think laterally enough! ;-)
--
Rob
Jul 23 '05 #10

P: n/a
RobG wrote:

[DOM 2 HTML Specification]
But it does say the length attribute of HTMLCollection is
read-only.
Yes, that hasn't changed. That property is read-only in both DOM 1 and 2.
To me, it would be handy if at that point the spec
pointed out that there are exceptions to the rule.


But there aren't any exceptions. In DOM 1, the HTMLSelectElement
interface used HTMLCollection for the options collection. Therefore,
under DOM 1, you couldn't modify the property. Once the working group
realised that DOM 0 allowed hosts to treat the options collection like
an array (in that changing the length property modified the array),
they introduced a new interface: HTMLOptionsCollection. It is exactly
the same as the HTMLCollection interface except that the length
property is read/write. The other change was that the
HTMLSelectElement interface itself was modified to make the length
property there read/write, too.

If you look at the respective interfaces, the specification marks
changes with the text "Modified in DOM Level 2" and "introduced in DOM
Level 2". The specific details are listed in Appendix A.

Finally, note that implementations are allowed to raise an exception
if the length attributes are modified, presumably to allow easier
migration from DOM 1 to DOM 2.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.