Loading ...
Sorry, an error occurred while loading the content.

Re: Dom?

Expand Messages
  • Duane A. Couchot-Vore
    ... and an ... No, not necessarily. name is the name used when passing the value of the element to a server in a query string (GET) or HTTP headers (POST).
    Message 1 of 14 , May 4, 2004
    • 0 Attachment
      --- In javascript_official@yahoogroups.com, soren.j.winslow@c... wrote:
      > I guess I don't understand DOM very well.
      >
      > So... with form elements, do I have to give them a name attribute
      and an
      > ID attribute in order for them to comply with DOM?
      > If so, What about radio buttons? Would I still give them the same ID as
      > well name?

      No, not necessarily. "name" is the name used when passing the value
      of the element to a server in a query string (GET) or HTTP headers
      (POST). "id" is the name used to refer to the element internally,
      such as in JavaScript programming. getElementById() is the official
      function for turning an id into an element reference. There is also
      getElementByName() which searches by name instead, but since not all
      elements have the name attribute, searching by id is more universal.

      > What is a good website (with good examples) for understanding DOM
      better
      > and applying it to forms?

      Hmmm... The official documents are at http://www.w3c.org, but
      sometimes they're about as enlighting as reading the phone book.
      There are lots of excellent tutorials at http://www.w3schools.com/
      where you would want to look at the JavaScript and DHTML tutorials.
      Haven't looked at them so long myself that I can't tell you how
      complete they are. More JavaScript tutorials at
      http://www.javascriptkit.com. A good reference for DHTML is at the
      MSDN site:
      http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/dhtml_reference_entry.asp
      . But you have to be CAREFUL here. If under "Standards Information"
      near the bottom of each page it says "There is no public standard that
      applies to this <whatever>," then it's a Microsoft only thing and best
      to stay away from it.

      Duane
    • Duane A. Couchot-Vore
      ... because ... it will ... In this case, you want to use getElementByName for your buttons, which returns an array of all elements with that name.
      Message 2 of 14 , May 4, 2004
      • 0 Attachment
        --- In javascript_official@yahoogroups.com, soren.j.winslow@c... wrote:
        > So......
        >
        > If I need to find the value of a checked radio button using proper DOM,
        > how do I do it if I have to use "getElementById"?
        >
        > Here is an example that I have tried, obviously, it doesn't work,
        because
        > I am not returning any value at all.
        >
        > function CheckRadioVal()
        > {
        > var TheValue = ""
        > for (x=0;x<document.getElementById("SomeRadio").length;x++)
        > {
        > if (document.getElementById("SomeRadio")[x].checked)
        > {
        > TheValue = document.getElementById("SomeRadio")[x].value
        > }
        > }
        > document.getElementById("TestStuff").innerHTML = TheValue
        > }
        >
        >
        > Honestly, I am trying to understand this better. Almost every example I
        > find online, shows how I have been using it, but you guys say that
        it will
        > only work with I.E.
        >
        > Thanx,
        > Soren

        In this case, you want to use getElementByName for your buttons, which
        returns an array of all elements with that name. getElementById
        returns only the first one it finds, which is OK because id shouldn't
        be duplicated like name. Yeah, this does get confusing, doesn't it?
        But cheer up. It all starts to make sense after a while.

        Duane
      • Jon Stephens
        First of all, you don t *have* to use the newer DOM methods for accessing form elements. The old document.formName.elementName syntax is still perfectly valid
        Message 3 of 14 , May 4, 2004
        • 0 Attachment
          First of all, you don't *have* to use the newer DOM methods for accessing form elements. The old
          document.formName.elementName syntax is still perfectly valid (it even says that this should
          continue to be supported by DOM-compliant browsers in the W3C DOM specs, qq.v., and refers to
          this as "DOM Level Zero"). So long as you start the reference chain with "document" you'll be in
          good shape across all browsers. So the function

          function CheckRadioVal()
          {
          var TheValue = "";
          theRadios = document.SomeForm.SomeRadio;

          for(x=0; x<theRadios.length; x++)
          {
          if(theRadios[x].checked)
          {
          document.getElementById("TestStuff").innerHTML = theRadios[x].value;
          break;
          }
          }
          }

          will work fine (where "SomeForm" is the name of the form, and "SomeRadio" is the name attribute
          for all the radio buttons in the group you're wanting to check). The use of getElementById() and
          innerHTML will cause problems in older UAs, but the form element references are good for ANY
          JS-capable browser and will continue to be for the foreseeable future.

          Now, as for using "strict" DOM-1+ methods. What you want here is getElementsByName():

          function CheckRadioVal()
          {
          var the Radios = document.getElementsByName("SomeRadio");
          /* OR:
          var the Radios = document.getElementsByName("SomeForm")[0].getElementsByName("SomeRadio");
          */

          for(x=0;x<theRadios.length;x++)
          {
          if(theRadios[x].checked)
          {
          document.getElementById("TestStuff").innerHTML = theRadios[x].value;
          break;
          }
          }
          }

          getElementsByName() is a method of HTMLElement (meaning it can be used as a method of any
          element object) which returns a collection of all elements with the stated name contained by
          that element. This is why in the alternative syntax we use
          document.getElementsByName("SomeForm")[0] to get at the first element whose name is "SomeForm".

          The difference between document.getElementsByName("SomeRadio") and
          document.getElementsByName("SomeForm")[0].getElementsByName("SomeRadio") is this:

          document.getElementsByName("SomeRadio") -- collection of all elements with the name attribute
          "SomeRadio", anywhere in the document.

          document.getElementsByName("SomeForm")[0].getElementsByName("SomeRadio") -- collection of all
          elements with the name attribute "SomeRadio", but only contained within the elements whose name
          attribute is "SomeForm".

          If the only elements with the name "SomeRadio" are inside the form whose name is "SomeForm",
          then these two refer to exactly the same colleciton of elements.

          Check the list archive for 24th March '04; you'll find another message from me "Re: Supporting
          all Browsers" that might help to shed some light on this as well.

          HTH,

          j.

          > Date: Mon, 03 May 2004 17:07:24 -0700
          > From: soren.j.winslow@...
          > Subject: More DOM
          >
          > So......
          >
          > If I need to find the value of a checked radio button using proper DOM,
          > how do I do it if I have to use "getElementById"?
          >
          > Here is an example that I have tried, obviously, it doesn't work, because
          > I am not returning any value at all.
          >
          > function CheckRadioVal()
          > {
          > var TheValue = ""
          > for (x=0;x<document.getElementById("SomeRadio").length;x++)
          > {
          > if (document.getElementById("SomeRadio")[x].checked)
          > {
          > TheValue = document.getElementById("SomeRadio")[x].value
          > }
          > }
          > document.getElementById("TestStuff").innerHTML = TheValue
          > }
          >
          >
          > Honestly, I am trying to understand this better. Almost every example I
          > find online, shows how I have been using it, but you guys say that it will
          > only work with I.E.
          >
          > Thanx,
          > Soren
        • Jon Stephens
          Oops, I meant 24th APRIL 2004. Sorry about that! :)
          Message 4 of 14 , May 4, 2004
          • 0 Attachment
            Oops, I meant 24th APRIL 2004. Sorry about that! :)

            Jon Stephens wrote:

            >
            > Check the list archive for 24th March '04; you'll find another message
            > from me "Re: Supporting all Browsers" that might help to shed some light
            > on this as well.
            >
            > HTH,
            >
            > j.
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.