Web Analytics Made Easy -
StatCounter Nested <span> problem with getElementById - CodingForum

Announcement

Collapse
No announcement yet.

Nested <span> problem with getElementById

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Nested <span> problem with getElementById

    Hi there,

    I'm working on a Javascript to add <option>'s to a <select> element depending on the number of entries in the array (i.e. each variable in the array gets printed as an option) but it doesn't seem to like having a <span> element inside the <select> element... making this very awkward for me.

    Code:
     
    "<form name=\"billingAdd\" action=\"#\">" +
    "<select name=\"billTo\" onchange=\"checkBilling();\">" +
    "<option value=\"default\">Default - " + billingAddress[0] + "</option>" +
    "<span id=\"billingAddress\"></span>" +
    "<option value=\"addBilling\">Add an Address</option>" +
    "</select>" +
    "</form>";
    Don't worry about any of the extra stuff I just included it to show you where the <span> was nested. The problem occurs when I later try to refer to the span using: document.getElementById("billingAddress").innerHTML = "content"; -or any getElementById method, The firefox webdev toolbar addon error console says "document.getElementById("billingAddress").innerHTML is null."

    Any suggestions?

    Thanks for your time & help.

  • #2
    Originally posted by cptbbb View Post
    Hi there,

    I'm working on a Javascript to add <option>'s to a <select> element depending on the number of entries in the array (i.e. each variable in the array gets printed as an option) but it doesn't seem to like having a <span> element inside the <select> element... making this very awkward for me.

    Code:
     
    "<form name=\"billingAdd\" action=\"#\">" +
    "<select name=\"billTo\" onchange=\"checkBilling();\">" +
    "<option value=\"default\">Default - " + billingAddress[0] + "</option>" +
    "<span id=\"billingAddress\"></span>" +
    "<option value=\"addBilling\">Add an Address</option>" +
    "</select>" +
    "</form>";
    Don't worry about any of the extra stuff I just included it to show you where the <span> was nested. The problem occurs when I later try to refer to the span using: document.getElementById("billingAddress").innerHTML = "content"; -or any getElementById method, The firefox webdev toolbar addon error console says "document.getElementById("billingAddress").innerHTML is null."
    as you can see, it's empty:
    Code:
    <span id="billingAddress"></span>
    best regards

    Comment


    • #3
      <option>s are the only valid html element allowed inside <select>s:
      Code:
      <!-- invalid html -->
      <select>
      	<span>Fruit</span>
      	<option value="orange">Orange</option>
      	<option value="banana">Banana</option>
      	<span>Vegetables</span>
      	<option value="broccoli">Broccoli</option>
      	<option value="lettuce">Lettuce</option>
      </select>
      
      <!-- valid html -->
      <select>
      	<option value="">--Fruit--</option>
      	<option value="orange">Orange</option>
      	<option value="banana">Banana</option>
      	<option value="">--Vegetables--</option>
      	<option value="broccoli">Broccoli</option>
      	<option value="lettuce">Lettuce</option>
      </select>
      If you need to categorize your options then use different selects or have <option> headers with empty values (so you can validate your form later).
      Feel free to e-mail me if I forget to respond ;)
      [email protected]

      Comment


      • #4
        or better, in my opinion:
        Code:
        <!-- valid html -->
        <select>
        	<optgroup name="Fruit">
                	<option value="orange">Orange</option>
        	        <option value="banana">Banana</option>
                 </optgroup>
        	<optgroup name="Vegetables">
                	<option value="broccoli">Broccoli</option>
                	<option value="lettuce">Lettuce</option>
                 </optgroup>
        </select>
        best regards

        Comment


        • #5
          I apologise if I worded it wrong, I wanted it to add additional <option></option> tags to the <span> using the document.getElementById("billingAddress") javascript method. But the error I was getting was >
          document.getElementById("billingAddress").innerHTML is null

          Comment


          • #6
            It's null because there is nothing in that <span>. ie: the tag is empty.
            You shouldn't have a span in a <select> but if you want to do this somewhere else try putting some placeholder text there in the HTML document.
            It can just be a space or w/e you like, as long as it's something.
            eg: <span id="billingAddress"> </span>
            Last edited by PhantomCode; Apr 15, 2009, 06:26 AM. Reason: formatting and example

            Comment


            • #7
              If the span is empty its unneccessary anyway, just place your new option using an index rather than a span's id.
              Feel free to e-mail me if I forget to respond ;)
              [email protected]

              Comment


              • #8
                the <span> is empty because it will be populated by the Javascript when called to (I have used empty <span>'s before and it works fine)...

                However, I will try the index method instead.

                Thanks

                Comment


                • #9
                  the <span> is empty because it will be populated by the Javascript when called to
                  - i think we are all clear on how you are using it, but when inside a <select> it's bad form, and apparently in some browsers even incorrect syntax
                  Feel free to e-mail me if I forget to respond ;)
                  [email protected]

                  Comment


                  • #10
                    thanks I have used a targeted addElement function to complete the task.

                    Comment

                    Working...
                    X