[FIXED] Can three elements with same id / value in a form be a problem?

Issue

In my form I have save button that is repeated three times, saving must update data in the database such as name, surname, address, avatar etc…

All buttons work, save / update information correctly. However in the console I get a warning: [DOM] Found 3 elements with non-unique id #save-account-details-nonce. Can this become a problem ? Should I change the value of the save buttons?

Button 1

<!-- Save Settings -->
    <p style="margin-bottom: 0px!important;">
      <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
      <button type="submit" class="edit-account-button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Salva modifiche', 'woocommerce' ); ?></button>
      <input type="hidden" name="action" value="save_account_details" />
    </p>

Button 2

 <!-- Save Address -->
          <p>
            <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
            <button type="submit" class="edit-account-button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Salva indirizzo', 'woocommerce' ); ?></button>
            <input type="hidden" name="action" value="save_account_details" />
          </p>

Button 3

<!-- Upload Avatar -->
        <p style="margin-bottom: 0px!important;">
          <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce' ); ?>
          <button type="submit" class="edit-account-button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Upload Avatar', 'woocommerce' ); ?></button>
          <input type="hidden" name="action" value="save_account_details" />
        </p>

Solution

Yes, you should have unique id attributes for each element.
It will create conflict when you want to read the element via JS using document.getElementById or using jQuery $('#') or styling it using CSS

The warnings are also self-explanatory. Although it wont mess up your HTML if you just use the markup, however it will cause issues once you start manipulating the elements

Read docs:

The id global attribute defines an identifier (ID) which must be
unique in the whole document. Its purpose is to identify the element
when linking (using a fragment identifier), scripting, or styling
(with CSS).

Answered By – Tushar

Answer Checked By – Cary Denson (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published