1

i have added a script tag in side a select tag which creates options dynamically. The function works fine but the W3C validator gives me 4 errors regarding this syntax. It will be helpful if you guys could find me a solution for this problem.

These are the 2 errors that repeat 2 times.

1. document type does not allow element "script" here

2. year_option(); end tag for "select" which is not finished

Kiran
  • 2,990
  • 4
  • 21
  • 38
Prasad Sampath
  • 33
  • 1
  • 5
  • 2
    To debug your markup, it would help if you posted your markup. – Ayman Safadi Mar 12 '13 at 06:22
  • I'm glad you use the W3C validator. It would be wise to listen to what it says "document type does not allow element `script` here". So move that ` – Amy Mar 12 '13 at 06:25

3 Answers3

2

1) the only tags that <select> can have are <option> and <optgroup> tags the validator is complaining because <script> is not one of those things -- the browser is doing its best to take your invalid markup and turn it into something valid, so despite the fact that it works, that's why you get the error, if you're actually putting <script> tags inside of a <select>

2) your script tags should be at the bottom of your page, and instead of using document.write to put option tags there, use DOM methods to add options to the select element after the fact

<select name="select-box"></select>
<!-- ...rest of page... -->
<script src="external-script.js"></script>

/* contents of external-script.js */
var select_box = document.querySelector("select[name=select-box]"),
    bob_opt  = document.createElement("option"),
    doug_opt = document.createElement("option");

bob_opt.value  = "Bob";
doug_opt.value = "Doug";
bob_opt.appendChild(document.createTextNode("Bob"));
doug_opt.appendChild(document.createTextNode("Doug"));

select_box.appendChild(bob_opt);
select_box.appendChild(doug_opt);

There are faster and neater, or more-elaborate or more flexible ways of doing this, but this is closer to the "right way" than something like:

<select>
    <script>document.write("<option value=\"" + i + "\">one</option>");</script>
</select>

Or whatever you might currently have there. JS is not meant to be templated like that, without using/writing a templating library for that purpose.

Norguard
  • 24,349
  • 4
  • 38
  • 45
  • Thanx for the quick reply and the solution :) – Prasad Sampath Mar 12 '13 at 07:50
  • ` – Daniel Sokolowski Jul 07 '15 at 18:18
  • @DanielSokolowski of course they don't have to be only in the `` or at the end of the ``... ...you can put them all over your page, and inside of any element which expects flow content. That, however, is a ***bad*** idea, despite its technical viability. If you are writing an application which 100% requires libraries/frameworks to function (and content can't be shown, otherwise), they should probably go in the head; otherwise, they should be deferred until initial content is visible and interactive, to improve perceived speed). – Norguard Jul 07 '15 at 22:00
  • I think we agree that it depends on the situation :). It used to be a bad idea but now a days we have `async` and `defer` and browsers now pre-scan/pre-load pages prior to parsing. I used to religiously put things in the `` but now I simply do what makes sense from a design perspective; I prefer my widgets to be self contained rather then depend on some globally defined `domready` entry point. – Daniel Sokolowski Jul 09 '15 at 01:18
  • @DanielSokolowski it's not about having them in the head, so much as not having `
     – Norguard Jul 09 '15 at 01:29
0

1) Script tags should be located in head, or perhaps elsewhere in the document, but not inside select tags

2) Looks like you are missing a tag, or perhaps its having problems finding it because of the first error.

fredrik
  • 5,858
  • 3
  • 30
  • 39
  • 2
    ` – rink.attendant.6 Mar 12 '13 at 06:33
  • I didn't say they had to, I said should. As you can read I also stated that they can be elsewhere, but not inside select tags. – fredrik Mar 12 '13 at 06:35
0

You can put your JavaScript out side the select tag, and you can append option tags later, when select tag is rendered on the page, after page load using $(document).ready.

You can standardize your code by placing JavaScript in separate file, there you can do like

$(document).ready(function(){
//Your code to init all things,
//e.g. load options in select box etc..
//so It will be easy later to maintain the code, all init code will go here
});

Or if you are not using jquery, you can use below code

function your_function(){
//your init code will go here
}
document.getElementsByTagName("body")[0].onLoad = your_function;

that's it, place your code in your_function()

Patriks
  • 996
  • 1
  • 7
  • 26
  • Assuming that he is using jQuery. It will be a bit more complicated without that. – fredrik Mar 12 '13 at 06:36
  • no, @fredrik you can do it withouth jquery using `document.getElementsByTagName("body")[0].onLoad = your_function();", and you can place all your code in your_function(). – Patriks Mar 12 '13 at 06:38
  • This way you can place all your JavaScript code in a separate file, and in organized way. – Patriks Mar 12 '13 at 06:39
  • Yes, but your example is jQuery based - and you don't know if hes using that. All I said was that it would be a bit more complicated -which you have just shown... – fredrik Mar 12 '13 at 06:40
  • it is not complicated @fredrik, it is only one line of code, is it hard/complicated for you? :D – Patriks Mar 12 '13 at 06:40
  • I did not say that it would be complicated - just more so than the jQuery way. – fredrik Mar 12 '13 at 06:41
  • @fredrik, yes you are 100% right, using frameworks make it is for programmer to deliver on time, and many other benefits, I agree. – Patriks Mar 12 '13 at 06:44