Log in

View Full Version : Chained Select Menu


s.willett
09-06-2010, 12:00 PM
How can I get this W3C validated, almost there, just a couple more alterations and I think this will be there.

Current body HTML:


<form name="listmenu0" id="search_selects" action="">
<span class="label">Select County</span>
<select name="firstlevel"></select>
<span class="label">Select Town / City</span>
<select name="secondlevel"></select>
<span class="label">Select Entertainment Type</span>
<select name="thirdlevel"></select>
<br />
<input type="button" value="Go" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)" />
<input type="button" value="Reset" onclick="resetListGroup('chainedmenu')" />

</form>

Validation errors are as follows:

I have the chained menu all working fine but the script used does not validate, can anyone help with these errors:

Document Type: XHTML Transitional 1.0 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ref: Chained Select Menu- By Xin Yang (http://www.yxscripts.com/) & Dynamic Drive (http://dynamicdrive.com)

I feel one or two alterations may fix most of these.


Error 1: FIXED

Line 120, Column 43: required attribute "action" not specified

<form name="listmenu0" id="search_selects">

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Solution: put action="" within the <form name="listmenu0" id="search_selects" action="">


Error 2:

Line 122, Column 35: end tag for "select" which is not finished

<select name="firstlevel"></select>

Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.


Error 3:

Line 124, Column 36: end tag for "select" which is not finished

<select name="secondlevel"></select>

Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.


Error 4:

Line 126, Column 35: end tag for "select" which is not finished

<select name="thirdlevel"></select>

Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.


Error 5:FIXED

Line 128, Column 41: there is no attribute "onClick"

…nput type="button" value="Go" onClick="goListGroup(document.listmenu0.firstlev…

You have used the attribute named above in your document, but the document type you are using does not support that attribute for this element. This error is often caused by incorrect use of the "Strict" document type with a document that uses frames (e.g. you must use the "Transitional" document type to get the "target" attribute), or by using vendor proprietary extensions such as "marginheight" (this is usually fixed by using CSS to achieve the desired effect instead).

This error may also result if the element itself is not supported in the document type you are using, as an undefined element will have no supported attributes; in this case, see the element-undefined error message for further information.

How to fix: check the spelling and case of the element and attribute, (Remember XHTML is all lower-case) and/or check that they are both allowed in the chosen document type, and/or use CSS instead of this attribute. If you received this error when using the <embed> element to incorporate flash media in a Web page, see the FAQ item on valid flash.

Solution: Changed upper case 'C' to lower case 'c' attribute "onClick" to attribute "onclick"


Error 6: FIXED

Line 128, Column 149: end tag for "input" omitted, but OMITTAG NO was specified

…u0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)">

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

Solution: Simply closed the element which i missed, <input type="button" value="Go" onclick="goListGroup(document.listmenu0.firstlevel, document.listmenu0.secondlevel, document.listmenu0.thirdlevel)" />


Error 7: FIXED

Line 128, Column 1: start tag was here

<input type="button" value="Go" onClick="goListGroup(document.listmenu0.firstle…

Solution: Simply closed the element which i missed, <input type="button" value="Reset" onclick="resetListGroup('chainedmenu')" />


Error 8:FIXED

Line 129, Column 76: end tag for "input" omitted, but OMITTAG NO was specified

<input type="button" value="Reset" onClick="resetListGroup('chainedmenu')">

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

Solution: Simply closed the element which i missed, <input type="button" value="Reset" onclick="resetListGroup('chainedmenu')" />


Error 9:FIXED

Line 129, Column 1: start tag was here

<input type="button" value="Reset" onClick="resetListGroup('chainedmenu')">

Solution: Simply closed the element which i missed, <input type="button" value="Reset" onclick="resetListGroup('chainedmenu')" />


Error 10: FIXED

Line 268, Column 30: required attribute "type" not specified

<script language="javascript">

The attribute given above is required for an element that you've used, but you have omitted it. For instance, in most HTML and XHTML document types the "type" attribute is required on the "script" element and the "alt" attribute is required for the "img" element.

Typical values for type are type="text/css" for <style> and type="text/javascript" for <script>.

Solution: put type="text/javascript" within the <script language="javascript" type="text/javascript">


I will update here if i manage to resolve in the mean time but any advice appreciated.
jscheuer1
09-08-2010, 03:43 AM
You can drop the language attribute, it's being deprecated.

You can replace:


<span class="label">Select County</span>
<select name="firstlevel"></select>
<span class="label">Select Town / City</span>
<select name="secondlevel"></select>
<span class="label">Select Entertainment Type</span>
<select name="thirdlevel"></select>

with:


<script type="text/javascript">
/* <![CDATA[ */
document.write('<span class="label">Select County<\/span>\n' +
'<select name="firstlevel"><\/select>\n' +
'<span class="label">Select Town \/ City<\/span>\n' +
'<select name="secondlevel"><\/select>\n' +
'<span class="label">Select Entertainment Type<\/span>\n' +
'<select name="thirdlevel"><\/select>\n');
/* ]]> */
</script>
elrayyes
09-14-2010, 04:07 PM
For errors 2, 3 and 4 it is pretty much self-explainatory. Take a look at the last sentence in the error message ("For instance, in HTML the <head> element must contain a <title> child element, lists require appropiate list items, ... and so on.").

Having outlined that, the <select> tags do have "child" elements that should be included in order to validate it, namely the <option> tag. As such just include the following in your code:

<option></option>

So, for error 2, your code would be:

<select name="firstleve"><option></option></select>

Hope that answers your inquiry.
jscheuer1
09-14-2010, 11:34 PM
So, for error 2, your code would be:

<select name="firstleve"><option></option></select>

For w3c.org (probably any standard) validation, that should work. However, the way that the script works is that it expects the select to be empty. Even putting an empty option tag in there for validation purposes probably would lead to undesirable consequences. Though, if it doesn't, it would be preferable to my solution.

Alternatively, we could add a little code to the script to empty the select before the script gets to work populating the select. Generally though I try to avoid editing a script to solve a problem as it makes getting future help for the edited script more difficult. That's because it's no longer a script in the library, rather one that only the user has.
s.willett
10-16-2010, 03:26 PM
Update in regards to my original post above.

Big thanks to both: jscheuer1 & elrayyes for their comments and advice.

Error 2: FIXED


Line 122, Column 35: end tag for "select" which is not finished
<select name="firstlevel"></select>

Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.
[/I]

Solution: simply add blank <option></option> tag between the open and close select tags. <select name="firstlevel"><option></option></select>


Error 3: FIXED


Line 124, Column 36: end tag for "select" which is not finished
<select name="secondlevel"></select>

Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.
[/I]

Solution: simply add blank <option></option> tag between the open and close select tags. <select name="firstlevel"><option></option></select>


Error 4: FIXED


Line 126, Column 35: end tag for "select" which is not finished
<select name="thirdlevel"></select>

Most likely, you nested tags and closed them in the wrong order. For example <p><em>...</p> is not acceptable, as <em> must be closed before <p>. Acceptable nesting is: <p><em>...</em></p>

Another possibility is that you used an element which requires a child element that you did not include. Hence the parent element is "not finished", not complete. For instance, in HTML the <head> element must contain a <title> child element, lists require appropriate list items (<ul> and <ol> require <li>; <dl> requires <dt> and <dd>), and so on.
[/I]

Solution: simply add blank <option></option> tag between the open and close select tags. <select name="firstlevel"><option></option></select>
s.willett
11-02-2010, 12:29 PM
Ok thank you to all for the help to get this validating, now only small issue i have is with the "GO" button, initially a type="button" but i would like to customize the button which i can do by changing to type="img" src="" etc but when this is done the script is not working but if i convert back to button it is fine.

Somewhere in either the javascript fie it must be using the type tag to identify and control the next function, I know very little about Java apart from how to place and embed java elements.

Is there anyone who would be able to advise? or maybe had a similar issue.