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

Button question

Expand Messages
  • dvidluca
    Hi, The following code works in IE 7 & 6 and Opera, but it fails in FireFox and Netscape:
    Message 1 of 4 , Jan 2, 2008
    View Source
    • 0 Attachment
      Hi,

      The following code works in IE 7 & 6 and Opera, but it fails in
      FireFox and Netscape:

      <!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>Button Test</title>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-
      event.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.4.1/build/element/element-beta-
      min.js"></script>
      <script type="text/javascript"
      src="http://yui.yahooapis.com/2.4.1/build/button/button-
      min.js"></script>
      <link rel="stylesheet" type="text/css"
      href="http://yui.yahooapis.com/2.4.1/build/button/assets/skins/sam/but
      ton.css">
      </head>
      <body class="yui-skin-sam">
      <h1>Please complete this form</h1>
      <form method="post" action="#" id="testform" name="testform">
      <div class="formdiv"><label>Please enter your
      email: </label><input class="field" type="text"
      name="email"></div>
      <div><button id="reset" name="reset"
      type="reset">Reset</button></div>
      </form>

      <script type="text/javascript">

      function initButton() {

      var oReset = new YAHOO.widget.Button("reset");

      }

      YAHOO.util.Event.onContentReady("reset", initButton);
      </script>
      </body>
      </html>

      The button control is rendered correctly and has the skin applied to
      it in all browsers, but in firefox and netscape it doesn't clear the
      text field. In IE and Opera it does. There are no errors in the
      console

      Is this a bug, or am I missing something?
    • Jing Ceawlin
      Seems that changing BOTH id and name of the button to something other than reset can solve the problem, but I don t know why.
      Message 2 of 4 , Jan 2, 2008
      View Source
      • 0 Attachment
        Seems that changing BOTH id and name of the button to something other than 'reset' can solve the problem, but I don't know why.

        On Jan 3, 2008 8:44 AM, dvidluca < dvidluca@...> wrote:

        Hi,

        The following code works in IE 7 & 6 and Opera, but it fails in
        FireFox and Netscape:

        <!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>Button Test</title>
        <script type="text/javascript"
        src="http://yui.yahooapis.com/2.4.1/build/yahoo-dom-event/yahoo-dom-
        event.js"></script>
        <script type="text/javascript"
        src="http://yui.yahooapis.com/2.4.1/build/element/element-beta-
        min.js"></script>
        <script type="text/javascript"
        src="http://yui.yahooapis.com/2.4.1/build/button/button-
        min.js"></script>
        <link rel="stylesheet" type="text/css"
        href="http://yui.yahooapis.com/2.4.1/build/button/assets/skins/sam/but
        ton.css">
        </head>
        <body class="yui-skin-sam">
        <h1>Please complete this form</h1>
        <form method="post" action="#" id="testform" name="testform">
        <div class="formdiv"><label>Please enter your
        email:&nbsp;</label><input class="field" type="text"
        name="email"></div>
        <div><button id="reset" name="reset"
        type="reset">Reset</button></div>
        </form>

        <script type="text/javascript">

        function initButton() {

        var oReset = new YAHOO.widget.Button("reset");

        }

        YAHOO.util.Event.onContentReady("reset", initButton);
        </script>
        </body>
        </html>

        The button control is rendered correctly and has the skin applied to
        it in all browsers, but in firefox and netscape it doesn't clear the
        text field. In IE and Opera it does. There are no errors in the
        console

        Is this a bug, or am I missing something?


      • dvidluca
        Wow, thanks! That s fixed it
        Message 3 of 4 , Jan 3, 2008
        View Source
        • 0 Attachment
          Wow, thanks! That's fixed it
        • Jing Ceawlin
          Finally I find out the reason. According to the W3C documentation, the form element encompasses behavior similar to a collection and an element. It provides
          Message 4 of 4 , Jan 3, 2008
          View Source
          • 0 Attachment
            Finally I find out the reason. According to the W3C documentation, the form element "encompasses behavior similar to a collection and an element. It provides direct access to the contained form controls as well as the attributes of the form element". Let's use an example to see what that means:
            ------------------------eg1----------------------------------------------
            <form id='form1'....>
            <span class="yui-button yui-reset-button" id="reset"><span class="first-child"><button type="button">Reset</button></span></span>
            </form>
            alert(document.getElementById('form1').length); // will show 1, because the form element "encompasses
                                                                                 // behavior similar to a collection" and there is only one
                                                                                 // form control here(the button)
            alert(document.getElementById('form1').reset) // shows that it is a fucntion, obviously
            ----------------------------------------------------------------------------


            ------------------------eg2----------------------------------------------------
            <form id='form1'....>
            <button type="button" id='reset'>Reset</button>
            </form>
            alert(document.getElementById('form1').length); // still 1
            alert(document.getElementById('form1').reset);  // This time it shows that reset is an element, the button.
                                                                                 // Because button is a form control, and it has an id, then we can
                                                                                 // access it directly through its container form. That's what the
                                                                                 // W3C documentation says.
            ----------------------------------------------------------------------------------

            From the second example, we can see that if we have a form control with an id, and the id is the same as form's built-in attribute or function's name, then the built-in member got overridden. After a little more testing, turns out the name of form control could also override form's built-in member.

            There is one more thing. In the first example, the id is on the span element, and span is not a form control. So it can't override the form's reset function. But, what if the yui button is dynamic generated. Suppose that the original html goes like this:
            <form id='form1'....>
            <button type="button" id='reset'>Reset</button>
            </form>
            I don't if it's a bug of mozilla, but after the yui library change the html button to the yui button, the form collection doesn't update. So the reset function still get overridden. Both IE and Opera update. That's why the problem above only happens in Mozilla.



            On Jan 3, 2008 5:36 PM, dvidluca <dvidluca@...> wrote:

            Wow, thanks! That's fixed it


          Your message has been successfully submitted and would be delivered to recipients shortly.