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

Re: DOM cannot get Checkbox Button value

Expand Messages
  • hkjackpot
    Todd, With your advise, I finally get the value, tks. I write my understanding here, may be can help other people, too. a. I create the button from markup of
    Message 1 of 6 , Nov 3, 2009
    • 0 Attachment
      Todd,

      With your advise, I finally get the value, tks.

      I write my understanding here, may be can help other people, too.

      a. I create the button from markup of Checkbox field, but Checkbox
      Button is different from Checkbox input field.
      b. DOM can use to get value of Checkbox field, however not applicable
      for Checkbox Button.
      (But there is a question mark in my head, why there is different?
      And where can I find this information in the API or website?)
      c. The Example provided by yui, the variable Scope is in a function
      (local).

      JK
      --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...> wrote:
      >
      > JK -
      >
      > When using a YUI Button instance, you don't query the DOM for the
      > value, but rather the Button's "value" attribute via the get()
      > method. For example:
      >
      > var val = oCheckButton8.get("value");
      >
      > - Todd
      >
      > On Nov 2, 2009, at 8:47 PM, hkjackpot wrote:
      >
      > > Hi,
      > > I use DOM to get the Checkbox Button value, but it returned as
      > > "undefined".
      > > Look like I am referring to not exist object.
      > > I can't find any hint from the YUI Library website. Could you please
      > > help me? Thanks in advance!
      > > regards,
      > > JK
      > >
      > > Below are the codes(Most of them from Checkbox Example):
      > >
      > > <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
      "http://www.w3.org/TR/html4/strict.dtd
      > > ">
      > > <html>
      > > <head>
      > > <meta http-equiv="content-type" content="text/html; charset=utf-8">
      > > <title>Checkbox Buttons</title>
      > > <link rel="stylesheet" type="text/css"
      href="../../build/fonts/fonts-
      > > min.css" />
      > > <link rel="stylesheet" type="text/css" href="../../build/button/
      > > assets/skins/sam/button.css" />
      > > <script type="text/javascript" src="../../build/yahoo-dom-event/
      > > yahoo-dom-event.js"></script>
      > > <script type="text/javascript" src="../../build/element/element-
      > > min.js"></script>
      > > <script type="text/javascript" src="../../build/button/button-
      > > min.js"></script>
      > > </head>
      > > <body class="yui-skin-sam">
      > >
      > > <div id="checkboxbuttonsfrommarkup">
      > >
      > > <span id="checkbutton8" class="yui-button yui-checkbox-button"><span
      > > class="first-child"><button type="button"
      > > name="checkboxfield2">Four</button></span></span>
      > >
      > > <input type="button" id="buttonMe" name="buttonMe" value="Get
      > > CheckBox Button Value" onClick="getByDom()">
      > >
      > >
      > > <script>
      > > (function () {
      > > var Button = YAHOO.widget.Button;
      > > YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup",
      > > function () {
      > >
      > > function onButtonClick(p_oEvent) {
      > > alert("You " + this.get("checked")+ " info "+ this.get("id"));
      > > }
      > >
      > > var oCheckButton8 = new Button("checkbutton8", { type: "checkbox",
      > > value: "4" ,onclick: { fn: onButtonClick }});
      > > });
      > >
      > > }());
      > >
      > > function getByDom(){
      > > var Dom = YAHOO.util.Dom;
      > > var value=Dom.get('checkbutton8').value;
      > > alert(value);
      > >
      > > }
      > > </script>
      > > </body>
      > > </html>
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > >
      > > ------------------------------------
      > >
      > > Yahoo! Groups Links
      > >
      > >
      > >
      >
    • Todd Kloots
      JK - Button transforms all pre-existing markup into a new format (using the element) in order to provide a look and feel that is consistent across
      Message 2 of 6 , Nov 5, 2009
      • 0 Attachment
        JK -

        Button transforms all pre-existing markup into a new format (using
        the <button> element) in order to provide a look and feel that is
        consistent across Button types. For this reason, you need to use the
        Button's API, not the DOM API for accessing any attributes as the
        original markup provided (in your case, the <input>) element, isn't in
        the DOM any longer. So that covers your points a and b. Not sure
        about question c. Can you clarify your question?

        Thanks,
        Todd

        On Nov 3, 2009, at 7:10 PM, hkjackpot wrote:

        > Todd,
        >
        > With your advise, I finally get the value, tks.
        >
        > I write my understanding here, may be can help other people, too.
        >
        > a. I create the button from markup of Checkbox field, but Checkbox
        > Button is different from Checkbox input field.
        > b. DOM can use to get value of Checkbox field, however not applicable
        > for Checkbox Button.
        > (But there is a question mark in my head, why there is different?
        > And where can I find this information in the API or website?)
        > c. The Example provided by yui, the variable Scope is in a function
        > (local).
        >
        > JK
        > --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...> wrote:
        >>
        >> JK -
        >>
        >> When using a YUI Button instance, you don't query the DOM for the
        >> value, but rather the Button's "value" attribute via the get()
        >> method. For example:
        >>
        >> var val = oCheckButton8.get("value");
        >>
        >> - Todd
        >>
        >> On Nov 2, 2009, at 8:47 PM, hkjackpot wrote:
        >>
        >>> Hi,
        >>> I use DOM to get the Checkbox Button value, but it returned as
        >>> "undefined".
        >>> Look like I am referring to not exist object.
        >>> I can't find any hint from the YUI Library website. Could you please
        >>> help me? Thanks in advance!
        >>> regards,
        >>> JK
        >>>
        >>> Below are the codes(Most of them from Checkbox Example):
        >>>
        >>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        > "http://www.w3.org/TR/html4/strict.dtd
        >>> ">
        >>> <html>
        >>> <head>
        >>> <meta http-equiv="content-type" content="text/html; charset=utf-8">
        >>> <title>Checkbox Buttons</title>
        >>> <link rel="stylesheet" type="text/css"
        > href="../../build/fonts/fonts-
        >>> min.css" />
        >>> <link rel="stylesheet" type="text/css" href="../../build/button/
        >>> assets/skins/sam/button.css" />
        >>> <script type="text/javascript" src="../../build/yahoo-dom-event/
        >>> yahoo-dom-event.js"></script>
        >>> <script type="text/javascript" src="../../build/element/element-
        >>> min.js"></script>
        >>> <script type="text/javascript" src="../../build/button/button-
        >>> min.js"></script>
        >>> </head>
        >>> <body class="yui-skin-sam">
        >>>
        >>> <div id="checkboxbuttonsfrommarkup">
        >>>
        >>> <span id="checkbutton8" class="yui-button yui-checkbox-button"><span
        >>> class="first-child"><button type="button"
        >>> name="checkboxfield2">Four</button></span></span>
        >>>
        >>> <input type="button" id="buttonMe" name="buttonMe" value="Get
        >>> CheckBox Button Value" onClick="getByDom()">
        >>>
        >>>
        >>> <script>
        >>> (function () {
        >>> var Button = YAHOO.widget.Button;
        >>> YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup",
        >>> function () {
        >>>
        >>> function onButtonClick(p_oEvent) {
        >>> alert("You " + this.get("checked")+ " info "+ this.get("id"));
        >>> }
        >>>
        >>> var oCheckButton8 = new Button("checkbutton8", { type: "checkbox",
        >>> value: "4" ,onclick: { fn: onButtonClick }});
        >>> });
        >>>
        >>> }());
        >>>
        >>> function getByDom(){
        >>> var Dom = YAHOO.util.Dom;
        >>> var value=Dom.get('checkbutton8').value;
        >>> alert(value);
        >>>
        >>> }
        >>> </script>
        >>> </body>
        >>> </html>
        >>>
        >>>
        >>>
        >>>
        >>>
        >>>
        >>>
        >>>
        >>>
        >>>
        >>>
        >>>
        >>>
        >>>
        >>> ------------------------------------
        >>>
        >>> Yahoo! Groups Links
        >>>
        >>>
        >>>
        >>
        >
        >
        >
        >
        > ------------------------------------
        >
        > Yahoo! Groups Links
        >
        >
        >
      • hkjackpot
        Todd, Sorry for my late reply! My point c was remark to help anybody who looking for the issue too. In the example, oCheckButton8 is declared inside the
        Message 3 of 6 , Nov 9, 2009
        • 0 Attachment
          Todd,

          Sorry for my late reply! My point c was remark to help anybody who looking for the issue too. In the example, oCheckButton8 is declared inside the function; in case to access it outside the function. I need to declare oCheckButton8 outside the function.

          Inside
          ======
          (function () { ...
          var oCheckButton8 = new Button("checkbutton8" ....
          Outside
          =======
          var oCheckButton8;
          (function () {

          Regards,
          JK

          --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...> wrote:
          >
          > JK -
          >
          > Button transforms all pre-existing markup into a new format (using
          > the <button> element) in order to provide a look and feel that is
          > consistent across Button types. For this reason, you need to use the
          > Button's API, not the DOM API for accessing any attributes as the
          > original markup provided (in your case, the <input>) element, isn't in
          > the DOM any longer. So that covers your points a and b. Not sure
          > about question c. Can you clarify your question?
          >
          > Thanks,
          > Todd
          >
          > On Nov 3, 2009, at 7:10 PM, hkjackpot wrote:
          >
          > > Todd,
          > >
          > > With your advise, I finally get the value, tks.
          > >
          > > I write my understanding here, may be can help other people, too.
          > >
          > > a. I create the button from markup of Checkbox field, but Checkbox
          > > Button is different from Checkbox input field.
          > > b. DOM can use to get value of Checkbox field, however not applicable
          > > for Checkbox Button.
          > > (But there is a question mark in my head, why there is different?
          > > And where can I find this information in the API or website?)
          > > c. The Example provided by yui, the variable Scope is in a function
          > > (local).
          > >
          > > JK
          > > --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@> wrote:
          > >>
          > >> JK -
          > >>
          > >> When using a YUI Button instance, you don't query the DOM for the
          > >> value, but rather the Button's "value" attribute via the get()
          > >> method. For example:
          > >>
          > >> var val = oCheckButton8.get("value");
          > >>
          > >> - Todd
          > >>
          > >> On Nov 2, 2009, at 8:47 PM, hkjackpot wrote:
          > >>
          > >>> Hi,
          > >>> I use DOM to get the Checkbox Button value, but it returned as
          > >>> "undefined".
          > >>> Look like I am referring to not exist object.
          > >>> I can't find any hint from the YUI Library website. Could you please
          > >>> help me? Thanks in advance!
          > >>> regards,
          > >>> JK
          > >>>
          > >>> Below are the codes(Most of them from Checkbox Example):
          > >>>
          > >>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          > > "http://www.w3.org/TR/html4/strict.dtd
          > >>> ">
          > >>> <html>
          > >>> <head>
          > >>> <meta http-equiv="content-type" content="text/html; charset=utf-8">
          > >>> <title>Checkbox Buttons</title>
          > >>> <link rel="stylesheet" type="text/css"
          > > href="../../build/fonts/fonts-
          > >>> min.css" />
          > >>> <link rel="stylesheet" type="text/css" href="../../build/button/
          > >>> assets/skins/sam/button.css" />
          > >>> <script type="text/javascript" src="../../build/yahoo-dom-event/
          > >>> yahoo-dom-event.js"></script>
          > >>> <script type="text/javascript" src="../../build/element/element-
          > >>> min.js"></script>
          > >>> <script type="text/javascript" src="../../build/button/button-
          > >>> min.js"></script>
          > >>> </head>
          > >>> <body class="yui-skin-sam">
          > >>>
          > >>> <div id="checkboxbuttonsfrommarkup">
          > >>>
          > >>> <span id="checkbutton8" class="yui-button yui-checkbox-button"><span
          > >>> class="first-child"><button type="button"
          > >>> name="checkboxfield2">Four</button></span></span>
          > >>>
          > >>> <input type="button" id="buttonMe" name="buttonMe" value="Get
          > >>> CheckBox Button Value" onClick="getByDom()">
          > >>>
          > >>>
          > >>> <script>
          > >>> (function () {
          > >>> var Button = YAHOO.widget.Button;
          > >>> YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup",
          > >>> function () {
          > >>>
          > >>> function onButtonClick(p_oEvent) {
          > >>> alert("You " + this.get("checked")+ " info "+ this.get("id"));
          > >>> }
          > >>>
          > >>> var oCheckButton8 = new Button("checkbutton8", { type: "checkbox",
          > >>> value: "4" ,onclick: { fn: onButtonClick }});
          > >>> });
          > >>>
          > >>> }());
          > >>>
          > >>> function getByDom(){
          > >>> var Dom = YAHOO.util.Dom;
          > >>> var value=Dom.get('checkbutton8').value;
          > >>> alert(value);
          > >>>
          > >>> }
          > >>> </script>
          > >>> </body>
          > >>> </html>
          > >>>
          > >>>
          > >>>
          > >>>
          > >>>
          > >>>
          > >>>
          > >>>
          > >>>
          > >>>
          > >>>
          > >>>
          > >>>
          > >>>
          > >>> ------------------------------------
          > >>>
          > >>> Yahoo! Groups Links
          > >>>
          > >>>
          > >>>
          > >>
          > >
          > >
          > >
          > >
          > > ------------------------------------
          > >
          > > Yahoo! Groups Links
          > >
          > >
          > >
          >
        • Todd Kloots
          In that example I am simply declaring an anonymous function for the purpose of creating a scope to declare a variable (Button) that is an alias for
          Message 4 of 6 , Nov 9, 2009
          • 0 Attachment
            In that example I am simply declaring an anonymous function for the
            purpose of creating a scope to declare a variable (Button) that is an
            alias for YAHOO.widget.Button. So, if you want to create a Button
            instance outside that function scope, simply do so using the fully
            qualified reference:

            var oCheckButton8 = new YAHOO.widget.Button("checkbutton8");

            - Todd

            On Nov 9, 2009, at 1:56 AM, hkjackpot wrote:

            > Todd,
            >
            > Sorry for my late reply! My point c was remark to help anybody who
            > looking for the issue too. In the example, oCheckButton8 is declared
            > inside the function; in case to access it outside the function. I
            > need to declare oCheckButton8 outside the function.
            >
            > Inside
            > ======
            > (function () { ...
            > var oCheckButton8 = new Button("checkbutton8" ....
            > Outside
            > =======
            > var oCheckButton8;
            > (function () {
            >
            > Regards,
            > JK
            >
            > --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@...> wrote:
            >>
            >> JK -
            >>
            >> Button transforms all pre-existing markup into a new format (using
            >> the <button> element) in order to provide a look and feel that is
            >> consistent across Button types. For this reason, you need to use the
            >> Button's API, not the DOM API for accessing any attributes as the
            >> original markup provided (in your case, the <input>) element, isn't
            >> in
            >> the DOM any longer. So that covers your points a and b. Not sure
            >> about question c. Can you clarify your question?
            >>
            >> Thanks,
            >> Todd
            >>
            >> On Nov 3, 2009, at 7:10 PM, hkjackpot wrote:
            >>
            >>> Todd,
            >>>
            >>> With your advise, I finally get the value, tks.
            >>>
            >>> I write my understanding here, may be can help other people, too.
            >>>
            >>> a. I create the button from markup of Checkbox field, but Checkbox
            >>> Button is different from Checkbox input field.
            >>> b. DOM can use to get value of Checkbox field, however not
            >>> applicable
            >>> for Checkbox Button.
            >>> (But there is a question mark in my head, why there is
            >>> different?
            >>> And where can I find this information in the API or website?)
            >>> c. The Example provided by yui, the variable Scope is in a function
            >>> (local).
            >>>
            >>> JK
            >>> --- In ydn-javascript@yahoogroups.com, Todd Kloots <kloots@> wrote:
            >>>>
            >>>> JK -
            >>>>
            >>>> When using a YUI Button instance, you don't query the DOM for the
            >>>> value, but rather the Button's "value" attribute via the get()
            >>>> method. For example:
            >>>>
            >>>> var val = oCheckButton8.get("value");
            >>>>
            >>>> - Todd
            >>>>
            >>>> On Nov 2, 2009, at 8:47 PM, hkjackpot wrote:
            >>>>
            >>>>> Hi,
            >>>>> I use DOM to get the Checkbox Button value, but it returned as
            >>>>> "undefined".
            >>>>> Look like I am referring to not exist object.
            >>>>> I can't find any hint from the YUI Library website. Could you
            >>>>> please
            >>>>> help me? Thanks in advance!
            >>>>> regards,
            >>>>> JK
            >>>>>
            >>>>> Below are the codes(Most of them from Checkbox Example):
            >>>>>
            >>>>> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            >>> "http://www.w3.org/TR/html4/strict.dtd
            >>>>> ">
            >>>>> <html>
            >>>>> <head>
            >>>>> <meta http-equiv="content-type" content="text/html;
            >>>>> charset=utf-8">
            >>>>> <title>Checkbox Buttons</title>
            >>>>> <link rel="stylesheet" type="text/css"
            >>> href="../../build/fonts/fonts-
            >>>>> min.css" />
            >>>>> <link rel="stylesheet" type="text/css" href="../../build/button/
            >>>>> assets/skins/sam/button.css" />
            >>>>> <script type="text/javascript" src="../../build/yahoo-dom-event/
            >>>>> yahoo-dom-event.js"></script>
            >>>>> <script type="text/javascript" src="../../build/element/element-
            >>>>> min.js"></script>
            >>>>> <script type="text/javascript" src="../../build/button/button-
            >>>>> min.js"></script>
            >>>>> </head>
            >>>>> <body class="yui-skin-sam">
            >>>>>
            >>>>> <div id="checkboxbuttonsfrommarkup">
            >>>>>
            >>>>> <span id="checkbutton8" class="yui-button yui-checkbox-
            >>>>> button"><span
            >>>>> class="first-child"><button type="button"
            >>>>> name="checkboxfield2">Four</button></span></span>
            >>>>>
            >>>>> <input type="button" id="buttonMe" name="buttonMe" value="Get
            >>>>> CheckBox Button Value" onClick="getByDom()">
            >>>>>
            >>>>>
            >>>>> <script>
            >>>>> (function () {
            >>>>> var Button = YAHOO.widget.Button;
            >>>>> YAHOO.util.Event.onContentReady("checkboxbuttonsfrommarkup",
            >>>>> function () {
            >>>>>
            >>>>> function onButtonClick(p_oEvent) {
            >>>>> alert("You " + this.get("checked")+ " info "+ this.get("id"));
            >>>>> }
            >>>>>
            >>>>> var oCheckButton8 = new Button("checkbutton8", { type: "checkbox",
            >>>>> value: "4" ,onclick: { fn: onButtonClick }});
            >>>>> });
            >>>>>
            >>>>> }());
            >>>>>
            >>>>> function getByDom(){
            >>>>> var Dom = YAHOO.util.Dom;
            >>>>> var value=Dom.get('checkbutton8').value;
            >>>>> alert(value);
            >>>>>
            >>>>> }
            >>>>> </script>
            >>>>> </body>
            >>>>> </html>
            >>>>>
            >>>>>
            >>>>>
            >>>>>
            >>>>>
            >>>>>
            >>>>>
            >>>>>
            >>>>>
            >>>>>
            >>>>>
            >>>>>
            >>>>>
            >>>>>
            >>>>> ------------------------------------
            >>>>>
            >>>>> Yahoo! Groups Links
            >>>>>
            >>>>>
            >>>>>
            >>>>
            >>>
            >>>
            >>>
            >>>
            >>> ------------------------------------
            >>>
            >>> Yahoo! Groups Links
            >>>
            >>>
            >>>
            >>
            >
            >
            >
            >
            > ------------------------------------
            >
            > Yahoo! Groups Links
            >
            >
            >
          Your message has been successfully submitted and would be delivered to recipients shortly.