Question 2686 in Wordpress Question posted in
The official Wordpress documentation can be found here.

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

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>
Tags:

2

Answers


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

    Login or Signup to reply.
  2. 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).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search