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="serversidehandlerurl.php" method="post" onsubmit="if(document.getelementbyid) {
window.open(document.getelementbyid('pblinks').selectedindex.value); return false; }" >
<select id="pblinks" size="1" >
<option selected="selected" >Select the size...</option>
<optgroup label="Containers">
<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 "Transitional" 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 serversidehandlerurl.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

 

[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="serversidehandlerurl.php" method="post"
onsubmit="if(document.getelementbyid) {
window.open(document.getelementbyid('pblinks').selectedindex.value); return
false; }" >
<select id="pblinks" size="1" >
<option selected="selected" >Select the size...</option>
<optgroup label="Containers">
<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
"Transitional" 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]

Now don't flip out this is a "Strict" XHTML site and I cannot change to
"Transitional" 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.

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.selectedIndex ].value
}

<form ... onsubmit="someFunction(this);return 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 serversidehandlerurl.php
site but the option url is not selected.

That's because Select.selectedIndex (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.selectedIndex ].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.

 

[David Dorward]

My form is as follows:

<form action="serversidehandlerurl.php" method="post"
onsubmit="if(document.getelementbyid) {

Now don't flip out this is a "Strict" XHTML site and I cannot change to
"Transitional" 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 serversidehandlerurl.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.getlementbyid method for a start - its case
sensitive. document.getElementById - so that if statement gets a false and
never triggers.

 

[Michael Winter]

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

 

[Lasse Reichstein Nielsen]

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.getElementById. 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

 

[Lee]

Lasse Reichstein Nielsen said:

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]

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

 

[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.selectedIndex ].value
}

<form ... onsubmit="someFunction(this);return 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.selectedIndex].value
}
</script>

<form action="serversidehandlerurl.php" method="post" onsubmit="mybpcodes(this);return false">
<select id="pblinks" size="1" >
<option selected="selected" >Select the size...</option>
<optgroup label="Containers">
<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]

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.selectedIndex].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(elem.options[ elem.selectedIndex ].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.selectedIndex ].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

 

[Tom]

Thank you Mike it worked like a charm! Thank you.

One last question. In the form, the first option is <option selected="selected" >Select the
size...</option>. I would like to exclude this option from the function.

Can you suggest a way to accomplish this such as:

if ([elem.selectedIndex].value=0){
onsubmit="mypbcodes(this);return false"
}

This doesn't work but you get the idea.

Tom

 

[Michael Winter]

Thank you Mike it worked like a charm! Thank you.

You're welcome.

One last question. In the form, the first option is <option
selected="selected" >Select the
size...</option>. I would like to exclude this option from the function.

Can you suggest a way to accomplish this such as:

if ([elem.selectedIndex].value=0){
onsubmit="mypbcodes(this);return false"
}

If the excluded option will *always* be the first option, then you can use
this in the function:

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

if (elem.selectedIndex) {
// selectedIndex is greater than 1
}

If the selected option is the first in the menu (index 0), code placed
where "// selectedIndex is greater than 1" is located above will be
ignored.

Hope that helps,
Mike

 

[Tom]

Thank you once again. I do appreciate your help...

Tom