8

When on the checkout page, I receive the following console error when selecting the shipping method and going to the next-step 'payment'.

[DOM] Found 2 elements with non-unique id #billing-new-address-form:

[DOM] Found 2 elements with non-unique id #billing-save-in-address-book: `

How can I resolve this issue?

8
  • Is this a default/clean Magento 2 store? Which version? Seems like a bug in Magento 2. Is there a Gitub issue linked to this? Starting with Chrome 63, it's now throwing errors related to DOM.
    – Erfan
    Commented Jan 9, 2018 at 8:46
  • I have the same issue in Magento community edition 2.1.9
    – Supersonic
    Commented Jan 22, 2018 at 17:23
  • any solution for it Commented Feb 1, 2018 at 18:06
  • github.com/magento/magento2/issues/13415 - templates from ./magento/module-checkout/view/frontend/web/template/billing-address/*.html are used for every payment method where billing address can be not equal to shipping, when 2 DOM elements with the same ID are appeared on the page the error is raised. We need to add payment method code to these IDs but these are frontend templates. Only JS code can do it but I don't know how.
    – Alex Gusev
    Commented Mar 5, 2018 at 20:54
  • I had the same issue on 2.1.8, but with #agreements. I have overwritten Magento Agreements core module with Magento_CheckoutAgreements in my custom template using Mage 2.2 files github.com/magento/magento2/tree/2.2/app/code/Magento/… Files needed: web/template/checkout/checkout-agreements.html web/js/model/agreement-validator.js web/js/view/checkout-agreements.js
    – Gediminas
    Commented Mar 6, 2018 at 14:05

2 Answers 2

1

This issue is fixed in 2.3-develop branch, it's also backported to 2.2 and going to be released in 2.2.6, I can see it's backported to 2.1 too.

There are 2 places need to change to fix the issue

vendor/magento/module-gift-message/view/frontend/web/template/gift-message-form.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<!-- ko if: isActive() -->
<div class="gift-message">
    <div class="gift-options-title">
        <span data-bind="i18n: 'Gift Message (optional)'"></span>
    </div>
    <div class="gift-options-content">
        <fieldset class="fieldset">
            <div class="field field-to">
                <label data-bind="attr: {for: 'gift-message-whole-to-' + index }" class="label">
                    <span data-bind="i18n: 'To:'"></span>
                </label>
                <div class="control">
                    <input type="text"
                           class="input-text"
                           data-bind="value: getObservable('recipient'), attr: { id: 'gift-message-whole-to-' + index }">
                </div>
            </div>

            <div class="field field-from">
                <label data-bind="attr: {for: 'gift-message-whole-from-' + index }" class="label">
                    <span data-bind="i18n: 'From:'"></span>
                </label>
                <div class="control">
                    <input type="text"
                           class="input-text"
                           data-bind="value: getObservable('sender'), attr: { id: 'gift-message-whole-from-' + index }">
                </div>
            </div>
            <div class="field text">
                <label for="gift-message-whole-message" class="label">
                    <span data-bind="i18n: 'Message:'"></span>
                </label>
                <div class="control">
                    <textarea id="gift-message-whole-message"
                              class="input-text"
                              rows="5" cols="10"
                              data-bind="value: getObservable('message')"></textarea>
                </div>
            </div>
        </fieldset>

    </div>
</div>
<!-- /ko -->
<div class="actions-toolbar">
    <div class="secondary">
        <button type="submit" class="action secondary action-update" data-bind="
                    attr: {title: $t('Update')},
                    click: $data.submitOptions.bind($data)">
            <span data-bind="i18n: 'Update'"></span>
        </button>
        <button class="action action-cancel" data-bind="
                    attr: {title: $t('Cancel')},
                    click: $data.hideFormBlock.bind($data)">
            <span data-bind="i18n: 'Cancel'"></span>
        </button>
    </div>
</div>

vendor/magento/module-checkout/view/frontend/web/template/billing-address/form.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="billing-address-form" data-bind="fadeVisible: isAddressFormVisible">
    <!-- ko foreach: getRegion('before-fields') -->
    <!-- ko template: getTemplate() --><!-- /ko -->
    <!--/ko-->
    <form data-bind="attr: {'data-hasrequired': $t('* Required Fields')}">
        <fieldset
            data-bind="attr: { id:'billing-new-address-form-'+index, value:index}"
            class="billing-new-address-form fieldset address">
            <!-- ko foreach: getRegion('additional-fieldsets') -->
            <!-- ko template: getTemplate() --><!-- /ko -->
            <!--/ko-->
            <!-- ko if: (isCustomerLoggedIn && customerHasAddresses) -->
            <div class="choice field">
                <input type="checkbox" class="checkbox"  data-bind="checked: saveInAddressBook, attr: {id: 'billing-save-in-address-book-' + getCode($parent)}" />
                <label class="label" data-bind="attr: {for: 'billing-save-in-address-book-' + getCode($parent)}" >
                    <span data-bind="i18n: 'Save in address book'"></span>
                </label>
            </div>
            <!-- /ko -->
        </fieldset>
    </form>
</div>

Cheers

-1

if u want to Resolved issued than follow this step

  1. first found where that html in .phtml file
  2. Now anlaysis any that get data with loop like(for,foreach)
  3. if data get with loop than that id with add some unique data

just like this

<?php
foreach ($variable as $key => $value) {
 ?>
      <div id="billing-new-address-form<?php echo "-"."daynamic some unique id"; ?>"></div>
 <?php
}
?>

and uniq id genarated

1
  • its not working. Commented May 21, 2019 at 12:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.