Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-65217

Conflict of element ids (html attribute "id") when there are several forms on one page

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      1. Create a custom form that has autocomplete elements and add it to a page twice. For example, use this test file: https://gist.github.com/marinaglancy/3e2a4210532edd9b7bc870616fc98315
      2. Make sure you can interact with each course selector properly
      3. Do not test form submit - it is not implemented via AJAX, the form elements names are still the same
      4. Make sure filepicker, editor and filemanager form elements still work. Visit any page where they are used (for example create a Page resource or restore a course from a backup)
      Show
      Create a custom form that has autocomplete elements and add it to a page twice. For example, use this test file: https://gist.github.com/marinaglancy/3e2a4210532edd9b7bc870616fc98315 Make sure you can interact with each course selector properly Do not test form submit - it is not implemented via AJAX, the form elements names are still the same Make sure filepicker, editor and filemanager form elements still work. Visit any page where they are used (for example create a Page resource or restore a course from a backup)
    • Affected Branches:
      MOODLE_37_STABLE
    • Fixed Branches:
      MOODLE_37_STABLE
    • Pull Master Branch:
      MDL-65217-master

      Description

      This issue is similar to MDL-64324 but now it is about the element ids.

      Moodleforms create html id for the elements in the format "id_".$elementname
      this is unique for the form because all elements have different names (and _generateId() method is overridden in radio inputs to add a suffix).
      However when we add several forms on the same page and they have elements with the same name we end up with several elements in the DOM with the same "id" attribute.

      First of all, it breaks html validation:
      https://www.w3schools.com/tags/att_global_id.asp
      > The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).

      Second, it breaks some JS, for example, 'autocomplete' form element attaches the selector to the wrong element.

        Attachments

          Issue Links

            Activity

              People

              • Votes:
                0 Vote for this issue
                Watchers:
                5 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:
                  Fix Release Date:
                  20/May/19

                  Time Tracking

                  Estimated:
                  Original Estimate - Not Specified
                  Not Specified
                  Remaining:
                  Remaining Estimate - 0 minutes
                  0m
                  Logged:
                  Time Spent - 6 hours, 50 minutes
                  6h 50m