Hello,

How to reproduce

  1. Display two forms on the same page (for example, with Drupal core only, place in left sidebar Login block and Search block, in this order).
  2. Fill out first form appearing in DOM (Login block), ensuring validation will fail (wrong or empty password).
  3. Stare at DOM, containing two <input> tags with id="edit-submit".

What's happening ?

(Or should I say how I interpret what happens.)

  1. When the page is first generated, each button is generated and a call to drupal_html_id() is made to ensure each button gets a unique HTML id. Thus the ids "edit-submit" and "edit-submit--2".
  2. Each form is also cached to be reused later (for validation and submission for example).
  3. When Login form is submitted, its cache is retrieved, processed, then validation fails. As it failed, the cached version of the form is reused to be displayed.
  4. The other elements of the page are generated, including the other forms, such as the Search form I mentioned before. When reaching the generation of this form's submit button, a call to drupal_html_id()is made, but as no other call was made before, there's no reason not to give "edit-submit" id to this button.
  5. Both buttons then get id="edit-submit".

Consequences ?

  • HTML validation error.
  • AJAX behaviors are messed up : if the "edit-submit" button has AJAX behaviors attached, through Forms and AJAX APIs, then after validation error, those behaviors will be attached to the first button instead (in the previous use case, if search form button had AJAX behavior, then after validation error, this behavior will be attached to Login form submit button instead).
  • Example: #1548610: Ajax-webform in block ajaxifies other forms on that page after validation.

I didn't find any issue describing same use case, so I thought it would be a good idea to describe it as precisely as possible.

Regards,

David

Comments

David Stosik’s picture

David Stosik commented
Title: Multiple forms on same page, same HTML id multiple types after validation » Multiple forms on same page, duplicate HTML id after validation error

Fixed title.

David Stosik’s picture

David Stosik commented
Issue summary: View changes

Add example issue.

Version: 8.0.x-dev » 8.1.x-dev

Drupal 8.0.6 was released on April 6 and is the final bugfix release for the Drupal 8.0.x series. Drupal 8.0.x will not receive any further development aside from security fixes. Drupal 8.1.0-rc1 is now available and sites should prepare to update to 8.1.0.

Bug reports should be targeted against the 8.1.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.2.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

torotil’s picture

torotil commented

I'm unable to reproduce this with Drupal 7.50 using a AJAX-enabled webform and the search form.

  1. I've disabled the webform_ajax specific workaround for this bug.
  2. The search form gets #edit-submit and the webform #edit-submit--2.
  3. After a AJAX submit of the webform that triggers a validation error it gets #edit-submit--3.

If the issue was reproducible with setup I'd have expected the webform to get #edit-submit thus triggering the AJAX-behavior on the search form.

Maybe this issue was fixed accidentally due to some other changes in Drupal-core. If it is still reproducible in 8.x then this might be a regression.

Version: 8.1.x-dev » 8.2.x-dev

Drupal 8.1.9 was released on September 7 and is the final bugfix release for the Drupal 8.1.x series. Drupal 8.1.x will not receive any further development aside from security fixes. Drupal 8.2.0-rc1 is now available and sites should prepare to upgrade to 8.2.0.

Bug reports should be targeted against the 8.2.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.3.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.2.x-dev » 8.3.x-dev

Drupal 8.2.6 was released on February 1, 2017 and is the final full bugfix release for the Drupal 8.2.x series. Drupal 8.2.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.3.0 on April 5, 2017. (Drupal 8.3.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.3.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.4.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.3.x-dev » 8.4.x-dev

Drupal 8.3.6 was released on August 2, 2017 and is the final full bugfix release for the Drupal 8.3.x series. Drupal 8.3.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.4.0 on October 4, 2017. (Drupal 8.4.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.4.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.5.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.4.x-dev » 8.5.x-dev

Drupal 8.4.4 was released on January 3, 2018 and is the final full bugfix release for the Drupal 8.4.x series. Drupal 8.4.x will not receive any further development aside from critical and security fixes. Sites should prepare to update to 8.5.0 on March 7, 2018. (Drupal 8.5.0-alpha1 is available for testing.)

Bug reports should be targeted against the 8.5.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.6.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

Version: 8.5.x-dev » 8.6.x-dev

Drupal 8.5.6 was released on August 1, 2018 and is the final bugfix release for the Drupal 8.5.x series. Drupal 8.5.x will not receive any further development aside from security fixes. Sites should prepare to update to 8.6.0 on September 5, 2018. (Drupal 8.6.0-rc1 is available for testing.)

Bug reports should be targeted against the 8.6.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.7.x-dev branch. For more information see the Drupal 8 minor version schedule and the Allowed changes during the Drupal 8 release cycle.

cilefen’s picture

cilefen commented
Related issues: +#2938842: Duplicate ID on the login page
torotil’s picture

torotil commented

I also just tried to reproduce it with the original steps to reproduce but I couldn’t (with Drupal 7.63).

Setup

  1. Install minimal profile.
  2. Enable search module.
  3. Give anonymous user the permission to use search.
  4. Place search block in the first sidebar beneath the login.

Steps to reproduce

  1. As anonymous user load any page. See two forms look at submit button IDs: edit-submit, edit-submit--2.
  2. Submit login inform with invalid credentials. Look at the submit button IDs: edit-submit, edit-submit--2.

Seems like this is not an issue in Drupal 7.

scottsawyer’s picture

scottsawyer
Primary language English
Location Atlanta
commented

I am having this issue right now. I have a User Login Block and a Webform on the same page, and a warning in my console about duplicate id's, '#edit-submit'. This is also causing another issue because I have Ajax enabled on my Webform, which gets attached to my User Login Block, causing logins to fail with an Ajax error.

I see several Google is littered with reports of duplicate ID on #edit-submit, seems to be a persistent issue that rears it's ugly head under a variety of conditions with a minimal requirement of 2 or more forms on a screen.

cilefen’s picture

cilefen commented
Related issues: +#1852090: Cached render elements can have duplicate HTML IDs
bès’s picture

bès commented
Related issues: +#1831560: Remove Html::resetSeenIds() call during form processing

Duplicate of https://www.drupal.org/project/drupal/issues/1831560 ?

staceroni’s picture

staceroni commented

I am seeing the same behavior as comment #11.

The PHP error written to dblog is: Symfony\Component\HttpKernel\Exception\HttpException: The specified #ajax callback is empty or not callable. in Drupal\Core\Form\FormAjaxResponseBuilder->buildResponse() (line 67 of /data/var/www/html/ispe.org/public_html/web/core/lib/Drupal/Core/Form/FormAjaxResponseBuilder.php).

I have a login in block in the header, and a webform submission with AJAX enabled in the sidebar.
The login form fails to work in this scenario.

I disabled the AJAX option in the webform, and this has resolved the issue.

Version: 8.6.x-dev » 8.8.x-dev

Drupal 8.6.x will not receive any further development aside from security fixes. Bug reports should be targeted against the 8.8.x-dev branch from now on, and new development or disruptive changes should be targeted against the 8.9.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 8.8.x-dev » 8.9.x-dev

Drupal 8.8.7 was released on June 3, 2020 and is the final full bugfix release for the Drupal 8.8.x series. Drupal 8.8.x will not receive any further development aside from security fixes. Sites should prepare to update to Drupal 8.9.0 or Drupal 9.0.0 for ongoing support.

Bug reports should be targeted against the 8.9.x-dev branch from now on, and new development or disruptive changes should be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

andrewmacpherson’s picture

andrewmacpherson commented
Status: Active » Closed (duplicate)

There are several issues reporting this problem. I'm closing this one in favour of #1852090: Cached render elements can have duplicate HTML IDs, already noted by @cilefen in #12. That issue has much more information about the accessibility problems, and some suggested work-arounds. Neither issue has a patch yet.

andrewmacpherson’s picture

andrewmacpherson commented
Parent issue: » #1852090: Cached render elements can have duplicate HTML IDs
Related issues: -#1852090: Cached render elements can have duplicate HTML IDs