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

Re: [ydn-javascript] DOM cannot get Checkbox Button value

Expand Messages
  • Todd Kloots
    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
    Message 1 of 6 , Nov 3, 2009
    • 0 Attachment
      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
      >
      >
      >
    • 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 2 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 3 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 4 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 5 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.