Javascript Problem with Form

[Tom]

Hi all, I am a newbe to javascript so I could use your help. I checked the FAQs and searched google
but I could not resolve this problem.

My form is as follows:

<form action="servers idehandlerurl.p hp" method="post" onsubmit="if(do cument.geteleme ntbyid) {
window.open(doc ument.getelemen tbyid('pblinks' ).selectedindex .value); return false; }" >
<select id="pblinks" size="1" >
<option selected="selec ted" >Select the size...</option>
<optgroup label="Containe rs">
<option value="url/1" >1.0 L - $19.90</option>
<option value="url/2" >1.5 L - $29.85</option>
<option value="url/3" >2.0 L - $39.80</option>
<option value="url/4" >3.0 L - $59.70</option>
</optgroup>
</select ><br />
<input type="submit" value="Buy Now" / >
</form >

Now don't flip out this is a "Strict" XHTML site and I cannot change to "Transition al" therefore
Attribute names must be lower-case. This means that the typical JavaScript practice of capitalizing
parts of attribute names in HTML tags must go. So within tags onLoad becomes onload, onClick becomes
onclick and so on. This change should not break anything.

Also note that in Strict some elements are not allowed. For example, a form element may not have a
name= attribute, which makes it difficult to refer to by normal means. The workaround is to give
elements you want to refer to an id= attribute and then use the JavaScript getElementByID( ) function
to refer to them. The form itself does not need an id attribute, only the element you want to refer
to.

When I run this form I am taken to the action serversidehandl erurl.php site but the option url is
not selected. Also the window.open command does not function (i.e., a new window does not open).

Like I said I am a newbe to javascript and any help is appreciated. Thanks in advance...

Tom

[Michael Winter]

On Mon, 19 Jan 2004 12:15:11 -0700, Tom <sa*******@cox. net> wrote:

Now don't flip out this is a "Strict" XHTML site and I cannot change to
"Transition al" therefore Attribute names must be lower-case.
And?
This means that the typical JavaScript practice of capitalizing parts
of attribute names in HTML tags must go.
There is no "typical practice" with attribute names in HTML[1]. I could
write easily write OnMoUSEoveR and it would make no difference, other than
to adversely affect readability. That could be only legitimate reason to
use onMouseOver rather than onmouseover.

<snipped to avoid sarcasm>
Also note that in Strict some elements are not allowed. For example, a
form element may not have a name= attribute, which makes it difficult
to refer to by normal means.
An alternative workaround is to use the elements collection of the form
object:

function someFunction( form ) {
var elem = form.elements[ 'pblinks' ];

// Use the value
elem.options[ elem.selectedIn dex ].value
}

<form ... onsubmit="someF unction(this);r eturn false">
<select ... id="pblinks">

I omitted the use for the control's value with window.open() because it
was invalid. See below.
When I run this form I am taken to the action serversidehandl erurl.php
site but the option url is not selected.
That's because Select.selected Index (you must use a capital 'I' -
JavaScript is case-sensitive) returns an index; a number. To get the
actual value, you must use:

Select.options[ Select.selected Index ].value

where Select is Select object reference.

Although forms can no longer have name attributes, controls may. A control
cannot be successful, or submitted, if it doesn't have a control name.
Also the window.open command does not function (i.e., a new window does
not open).

There are three arguments to the window.open() method - only one of them
(the last, obviously) is optional. The first is a string with the URI used
in the new window. The second argument is a string with the name[2] of the
new window.
Mike

[1] As you say, attribute names must always be lowercase in XHTML
[2] The name, in HTML, would be referenced by the target attribute in FORM
and A elements. Though this attribute wouldn't be used in XHTML, it is
still required by the function.

--
Michael Winter
M.******@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

[David Dorward]

Tom wrote:

My form is as follows:

<form action="servers idehandlerurl.p hp" method="post"
onsubmit="if(do cument.geteleme ntbyid) { Now don't flip out this is a "Strict" XHTML site and I cannot change to
"Transition al" therefore Attribute names must be lower-case.
Element and attribute names must be lower case in any version of XHTML, and
I don't think anyone here is libel to flip out over it.
Also note that in Strict some elements are not allowed. For example, a
form element may not have a name= attribute, which makes it difficult to
refer to by normal means. The workaround is to give elements you want to
refer to an id= attribute and then use the JavaScript getElementByID( )
That isn't a work around, its the correct technique.. .well - one of them.

and its getElementById, not ByID.
When I run this form I am taken to the action serversidehandl erurl.php
site but the option url is
not selected. Also the window.open command does not function (i.e., a new
window does not open).

Well, there is no document.getlem entbyid method for a start - its case
sensitive. document.getEle mentById - so that if statement gets a false and
never triggers.

--
David Dorward <http://dorward.me.uk/>

[Lee]

Tom said:

Hi all, I am a newbe to javascript so I could use your help. I checked the FAQs
and searched google
but I could not resolve this problem.

My form is as follows:

<form action="servers idehandlerurl.p hp" method="post"
onsubmit="if(d ocument.getelem entbyid) {
window.open(do cument.geteleme ntbyid('pblinks ').selectedinde x.value); return
false; }" >
<select id="pblinks" size="1" >
<option selected="selec ted" >Select the size...</option>
<optgroup label="Containe rs">
<option value="url/1" >1.0 L - $19.90</option>
<option value="url/2" >1.5 L - $29.85</option>
<option value="url/3" >2.0 L - $39.80</option>
<option value="url/4" >3.0 L - $59.70</option>
</optgroup>
</select ><br />
<input type="submit" value="Buy Now" / >
</form >

Now don't flip out this is a "Strict" XHTML site and I cannot change to
"Transitiona l" therefore
Attribute names must be lower-case. This means that the typical JavaScript
practice of capitalizing
parts of attribute names in HTML tags must go. So within tags onLoad becomes
onload, onClick becomes
onclick and so on. This change should not break anything.

Javascript in the attribte values remains case sensitive, and you must
use the correct method and attribute names, such as "getElementById ()"
and "selectedIndex" .

Doesn't Strict XHTML allow form elements to have a "name" attribute in
addition to the "id" attribute?

[Michael Winter]

On 19 Jan 2004 11:41:56 -0800, Lee <RE************ **@cox.net> wrote:

Doesn't Strict XHTML allow form elements to have a "name" attribute in
addition to the "id" attribute?

Yes, button, input, textarea and select elements all have name attributes
under the Strict XHTML DTD.

Mike

--
Michael Winter
M.******@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

[Lasse Reichstein Nielsen]

Lee <RE************ **@cox.net> writes:

Doesn't Strict XHTML allow form elements to have a "name" attribute in
addition to the "id" attribute?

Not form elements (i.e., the ones created with the tag "form").

It does allow them on form *controls* (the ones created by the tags
"input", "textarea", "select", "button", and "object" (no, I don't
know how to use an object as a form control, but apparently it's
supposed to be possible)).

The name attribute on these elements is not an id for the element,
so you can't find it with document.getEle mentById. Instead they
define the "control name" of the control, which is what is sent when
the form is submitted, and what is available through the elements
collection.

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Lee]

Lasse Reichstein Nielsen said:

Lee <RE************ **@cox.net> writes:

Doesn't Strict XHTML allow form elements to have a "name" attribute in
addition to the "id" attribute?

Not form elements (i.e., the ones created with the tag "form").

I'll have to remember to be more careful in my wording.
I've always called controls "form elements", as in "elements of a form".
The term "controls" is relatively new and uncomfortable to me.
Maybe I can go back to calling them input widgets?

[Michael Winter]

On 19 Jan 2004 13:07:38 -0800, Lee <RE************ **@cox.net> wrote:

I'll have to remember to be more careful in my wording.
I've always called controls "form elements", as in "elements of a form".
The term "controls" is relatively new and uncomfortable to me.
Maybe I can go back to calling them input widgets?

It's understandable, to a point, but it is how they (form controls) are
referred to in the HTML Specification.

Mike

--
Michael Winter
M.******@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

[Tom]

> There is no "typical practice" with attribute names in HTML[1]. I could

write easily write OnMoUSEoveR and it would make no difference, other than
to adversely affect readability. That could be only legitimate reason to
use onMouseOver rather than onmouseover.
Ok, so only attribute names need to be lowercase in Strict. I misunderstood.
An alternative workaround is to use the elements collection of the form
object:

function someFunction( form ) {
var elem = form.elements[ 'pblinks' ];

// Use the value
elem.options[ elem.selectedIn dex ].value
}

<form ... onsubmit="someF unction(this);r eturn false">
<select ... id="pblinks">
I must not understand what exactly you are suggesting here. I tried the following:

<script>
function mypbcodes(form) {
var elem = form.elements['pblinks'];
elem.options[elem.selectedIn dex].value
}
</script>

<form action="servers idehandlerurl.p hp" method="post" onsubmit="mybpc odes(this);retu rn false">
<select id="pblinks" size="1" >
<option selected="selec ted" >Select the size...</option>
<optgroup label="Containe rs">
<option value="url/1" >1.0 L - $19.90</option>
<option value="url/2" >1.5 L - $29.85</option>
<option value="url/3" >2.0 L - $39.80</option>
<option value="url/4" >3.0 L - $59.70</option>
</optgroup>
</select ><br />
<input type="submit" value="Buy Now" / >
</form >

When I run this code, nothing happens
There are three arguments to the window.open() method - only one of them
(the last, obviously) is optional. The first is a string with the URI used
in the new window. The second argument is a string with the name[2] of the
new window.

I was under the impression that the second 2 arguments were optional. The url is the option
selected.

Thanks again for the help.

[Michael Winter]

On Mon, 19 Jan 2004 17:28:54 -0700, Tom <sa*******@cox. net> wrote:

I must not understand what exactly you are suggesting here. I tried the
following:

<script>
function mypbcodes(form) {
var elem = form.elements['pblinks'];
elem.options[elem.selectedIn dex].value
}
</script>

When I commented, "Use the value", you should actually *use* the value.
The reason why I didn't actually add something like:

window.open(ele m.options[ elem.selectedIn dex ].value, 'newWindow');

was because I wasn't sure whether the values of your OPTION elements were
actually valid fragment URIs. The expression:

elem.options[ elem.selectedIn dex ].value

used in my post was never meant to exist on its own like that.

Sorry for the confusion, and I hope you see my intentions now,
Mike

--
Michael Winter
M.******@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)