Bug 279618 - Duplicated <form id="show-bug" name="f" creates javascript error reported by debugger
Summary: Duplicated <form id="show-bug" name="f" creates javascript error reported by ...
Status: RESOLVED FIXED
Alias: None
Product: bugs.kde.org
Classification: Websites
Component: general (show other bugs)
Version: unspecified
Platform: Ubuntu Linux
: NOR normal
Target Milestone: ---
Assignee: Matt Rogers
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2011-08-07 22:10 UTC by Gérard Talbot (no longer involved)
Modified: 2012-03-05 04:25 UTC (History)
0 users

See Also:
Latest Commit:
Version Fixed In:
Sentry Crash Report:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Gérard Talbot (no longer involved) 2011-08-07 22:10:56 UTC
Version:           unspecified (using KDE 4.7.0) 
OS:                Linux

With javascript debugger enabled and report javascript errors checkboxes checked, the duplicated forms with the same name="f" will trigger a javascript error when trying to execute 
<body onload="document.forms['f'].quicksearch.focus();"
instruction. 

Relevant chunk of code involved
===============================

line 104:   <body onload="document.forms['f'].quicksearch.focus();"
        class="bugs-kde-org">


line 156: 	<form id="show-bug" name="f" action="buglist.cgi" method="get"
        onsubmit="if (this.quicksearch.value == '')
                  { alert('Please enter one or more search terms first.');
                    return false; } return true;">
    Search by report number or terms: <br>
    <input id="quicksearch" type="text" name="quicksearch">
    <input id="find" type="submit" value="Find">
    <a href="page.cgi?id=quicksearch.html">[Help]</a>
  </form>


line 211: 	<form id="show-bug" name="f" action="buglist.cgi" method="get"
        onsubmit="if (this.quicksearch.value == '')
                  { alert('Please enter one or more search terms first.');
                    return false; } return true;">
    <input id="quicksearch" type="text" name="quicksearch">
  </form>

The decisive factor causing the error is that 2 forms have the same name.

The HTML 4.01 spec says a form can use a name to identify it and to allow script access to it. In no way the spec indicate that multiple form elements can have/share the same name and that such collection of named form elements can be accessed by an accessor.

"
name = cdata [CI]
    This attribute names the element so that it may be referred to from style sheets or scripts. Note. This attribute has been included for backwards compatibility. Applications should use the id attribute to identify elements.
"
http://www.w3.org/TR/html4/interact/forms.html#adef-name-FORM

Reproducible: Didn't try

Steps to Reproduce:
1- Configuration/Configure Konqueror.../category Java & Javascript/Javascript
tab/Debugging section/Enable debugger and Report errors checkboxes must be
checked

2- Load https://bugs.kde.org/

Actual Results:  
A javascript error modal window will pop up and say
"
A problem occured when trying to start a script in the page.

https://bugs.kde.org/ line 103 :
TypeError: Undefined value
"

Expected Results:  
No javascript error modal window should pop up and no javascript error should be reported.

The TypeError: Undefined value error message is just the way the javascript error gets reported. The real error is having 2 forms with/having/sharing the same name.

Other browsers (Opera 11.50 and Chrome 13.0.782.107) also report the same error albeit with a different error message. Other browsers will also refuse to focus any of the 2 text input since they can not figure out which forms to begin with, in the first place.

Opera 11.50 error console reports:
"
Event thread: load
Uncaught exception: TypeError: Cannot convert 'document.forms['FormName'].elements' to object
"
and when investigating typeof document.forms["FormName"] in Opera DragonFly

>>> typeof document.forms["FormName"]
"object"
>>> typeof document.forms["FormName"].length
"number"
>>> document.forms["FormName"].length
2
>>> typeof document.forms["FormName"][0]
"object"
>>> typeof document.forms["FormName"][0].elements
"object"
>>> typeof document.forms["FormName"][0].elements["InputTextName"]
"object"

while Chrome 13.0.782.107 error console reports
"
Uncaught TypeError: Cannot read property 'InputTextName' of undefined
"
because the exact and unique form can not be identified only with its name under such circumstances.

I will create a reduced testcase.

regards, Gérard
Comment 1 Gérard Talbot (no longer involved) 2011-08-07 22:41:18 UTC
Firefox 5.0 returns the first form when multiple forms have the same name:

"
(...) document.forms['x'] looks for forms names 'x' and if there is more than
one returns a list (not just the first one as we [Mozilla] do).
"
https://bugzilla.mozilla.org/show_bug.cgi?id=293397#c2

--------------

Expected Results:  
No javascript error modal window should pop up and no javascript error should
be reported.

By this, I mean the KDE Bug Tracking System entrance webpage should be fixed. There should not be 2 forms with the same name, otherwise a javascript error is the correct thing to report when trying to parse and execute 
document.forms['f'].quicksearch.focus();

--------------

Reduced testcase
================

http://www.gtalbot.org/BrowserBugsSection/Konqueror4Bugs/Bug279618-duplicated-form-with-same-name.html

This testcase is mostly there to test/verify javascript debuggers, error console, query some values, compare results with other browsers.

regards, Gérard
Comment 2 Gérard Talbot (no longer involved) 2011-08-07 22:42:08 UTC
KDE Platform Version: 4.7.0
Konqueror version: 4.7.0 (KHTML rendering engine)
Qt Version: 4.7.2
Operating System: Linux 2.6.38-10-generic-pae i686 (32bits)
Distribution: Kubuntu 11.04
here.

regards, Gérard
Comment 3 Tom Albers 2012-03-04 22:40:31 UTC
Can you reopen if this still happens now the bugzilla version has been updated?
Comment 4 Gérard Talbot (no longer involved) 2012-03-05 04:08:19 UTC
TypeError Null value at line 217

function quicksearchHelpText(el_id, action){
  var el = document.getElementById(el_id);
  if ( action == "show") {
    if( el.value == "" ) {
      el.value = quicksearch_message
      YAHOO.util.Dom.addClass(el, "quicksearch_help_text");
    }
  } else {
    if( el.value == quicksearch_message ) {
      el.value = "";
      YAHOO.util.Dom.removeClass(el, "quicksearch_help_text");
    }
  }
}
YAHOO.util.Event.onDOMReady(onLoadActions);
//-->

------------

(In reply to comment #3)
> Can you reopen if this still happens now the bugzilla version has been
> updated?

Tom Albers,

The error in the bug report no longer happens but another one exists now.

I may have to open another bug report for that one ...

Gérard
Comment 5 Gérard Talbot (no longer involved) 2012-03-05 04:15:48 UTC
(In reply to comment #4)
> TypeError Null value at line 217
> 
 function quicksearchHelpText(el_id, action){
  var el = document.getElementById(el_id);
  if ( action == "show") {
line 217:     if( el.value == "" ) {

According to Konqueror's Javascript Debugger and the values of local variables,

action is "show"
el_id is "quicksearch_main"
el is null  
the window's url is  https://bugs.kde.org/index.cgi?GoAheadAndLogIn=1

So, the question is: Is there an element with the id attribute value of  "quicksearch_main" in such window?

Gérard
Comment 6 Gérard Talbot (no longer involved) 2012-03-05 04:25:59 UTC
(In reply to comment #5)

> So, the question is: Is there an element with the id attribute value of 
> "quicksearch_main" in such window?



As far as I can see, the error being reported by Konqueror Javascript Debugger is correct and appropriate: there is no element with id attribute value of "quicksearch_main". So,
line 217
var el = document.getElementById(el_id); 
when the el_id value passed is "quicksearch_main"

2 other points.

1- 
I also wish that the javascript would be entirely declared in the head section and not into body.

2-
The script could be improved too 

"
Correct Reference To Form Input
document.forms["formname"].elements["inputname"]


Bad Practice
document.formname.inputname
"
Javascript Best Practices
Reference Forms and Form Elements Correctly
http://www.javascripttoolbox.com/bestpractices/#forms

Gérard