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

Question

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>

ID's have to be unique! Using an ID in the same page multiple times is not valid and as such it can cause a lot of problems especially on JS/jQuery basis. But since you already get a warning from your console, you should have been easily be able to self-answer the question. — tacoshy, Aug 29 '22 at 14:37

score 0 · Answer 1 · answered Aug 29 '22 at 14:37

0

This is not a problem for the submission of the form. These work independently of the id-attribute.

It does however violate some standards, which is further described in this answer to a related question.

answered Aug 29 '22 at 14:37

thomasberends

89
8

Tushar Gupta · Accepted Answer · 2022-08-29T14:42:40.290

0

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).

edited Aug 29 '22 at 14:42

answered Aug 29 '22 at 14:38

Tushar Gupta

15,504
1
29
47

Thanks for the comment. As I am relatively new to this how could I solve? Is it enough to simply provide a different id for the three elements ? – Snorlax Aug 29 '22 at 14:42
1

@Snorlax yep thats correct ! just have different unique id for 3 elements – Tushar Gupta Aug 29 '22 at 14:43

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

2 Answers2