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').sel ectedindex.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 12 1525
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 "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.
<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.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.
--
Michael Winter M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Tom wrote: 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.
--
David Dorward <http://dorward.me.uk/>
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').se lectedindex.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?
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.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
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.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
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
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?
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.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
> 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.
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.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
--
Michael Winter M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
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
On Mon, 19 Jan 2004 19:46:53 -0700, Tom <sa*******@cox.net> wrote: 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
--
Michael Winter M.******@blueyonder.co.invalid (replace ".invalid" with ".uk" to reply)
Thank you once again. I do appreciate your help...
Tom This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: CloudSolutions |
last post by:
Introduction:
For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
|
by: isladogs |
last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM).
In this session, we are pleased to welcome former...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: Charles Arthur |
last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: BarryA |
last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
| |