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]

Re: Javascript Problem with Form

On Mon, 19 Jan 2004 12:15:11 -0700, Tom <sail_saba@cox. net> wrote:
[color=blue]
> 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.[/color]

And?
[color=blue]
> This means that the typical JavaScript practice of capitalizing parts
> of attribute names in HTML tags must go.[/color]

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>
[color=blue]
> 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.[/color]

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.
[color=blue]
> When I run this form I am taken to the action serversidehandl erurl.php
> site but the option url is not selected.[/color]

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.
[color=blue]
> Also the window.open command does not function (i.e., a new window does
> not open).[/color]

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.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

[David Dorward]

Re: Javascript Problem with Form

Tom wrote:
[color=blue]
> My form is as follows:
>
> <form action="servers idehandlerurl.p hp" method="post"
> onsubmit="if(do cument.geteleme ntbyid) {[/color]
[color=blue]
> 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.[/color]

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.
[color=blue]
> 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( )[/color]

That isn't a work around, its the correct technique.. .well - one of them.

and its getElementById, not ByID.
[color=blue]
> 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).[/color]

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]

Re: Javascript Problem with Form

Tom said:[color=blue]
>
>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.[/color]

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]

Re: Javascript Problem with Form

On 19 Jan 2004 11:41:56 -0800, Lee <REM0VElbspamtr ap@cox.net> wrote:
[color=blue]
> Doesn't Strict XHTML allow form elements to have a "name" attribute in
> addition to the "id" attribute?[/color]

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

Mike

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

[Lasse Reichstein Nielsen]

Re: Javascript Problem with Form

Lee <REM0VElbspamtr ap@cox.net> writes:
[color=blue]
> Doesn't Strict XHTML allow form elements to have a "name" attribute in
> addition to the "id" attribute?[/color]

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 - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Lee]

Re: Javascript Problem with Form

Lasse Reichstein Nielsen said:[color=blue]
>
>Lee <REM0VElbspamtr ap@cox.net> writes:
>[color=green]
>> Doesn't Strict XHTML allow form elements to have a "name" attribute in
>> addition to the "id" attribute?[/color]
>
>Not form elements (i.e., the ones created with the tag "form").[/color]

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]

Re: Javascript Problem with Form

On 19 Jan 2004 13:07:38 -0800, Lee <REM0VElbspamtr ap@cox.net> wrote:
[color=blue]
> 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?[/color]

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

Mike

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

[Tom]

Re: Javascript Problem with Form

> There is no "typical practice" with attribute names in HTML[1]. I could[color=blue]
> 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.[/color]

Ok, so only attribute names need to be lowercase in Strict. I misunderstood.
[color=blue]
> 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">[/color]

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
[color=blue]
> 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.[/color]

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]

Re: Javascript Problem with Form

On Mon, 19 Jan 2004 17:28:54 -0700, Tom <sail_saba@cox. net> wrote:
[color=blue]
> 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>[/color]

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.Winter@blueyo nder.co.invalid (replace ".invalid" with ".uk" to reply)

[Tom]

Re: Javascript Problem with Form

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

One last question. In the form, the first option is <option selected="selec ted" >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.selectedIn dex].value=0){
onsubmit="mypbc odes(this);retu rn false"
}

This doesn't work but you get the idea.

Tom

[Michael Winter]

Re: Javascript Problem with Form

On Mon, 19 Jan 2004 19:46:53 -0700, Tom <sail_saba@cox. net> wrote:
[color=blue]
> Thank you Mike it worked like a charm! Thank you.[/color]

You're welcome.
[color=blue]
> One last question. In the form, the first option is <option
> selected="selec ted" >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.selectedIn dex].value=0){
> onsubmit="mypbc odes(this);retu rn false"
> }[/color]

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.selectedI ndex) {
// 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

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

[Tom]

Re: Javascript Problem with Form

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

Tom