表单中三个同ID元素是否会引发问题？是否需修改按钮值？

我的表单里有三个重复的保存按钮，分别用来更新数据库中的姓名、姓氏、地址、头像等信息。目前所有按钮都能正常保存/更新信息，但控制台弹出警告：[DOM] Found 3 elements with non-unique id #save-account-details-nonce。请问这会不会引发问题？是否需要修改保存按钮的参数？

按钮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>

按钮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>

按钮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>

1. 会引发潜在问题，必须修改 #

虽然目前功能正常，但DOM中ID重复违反了HTML标准——ID属性在整个文档中必须唯一。后续可能出现的问题包括：

• JavaScript通过getElementById()获取元素时，只会返回第一个匹配的元素，导致后续按钮的相关JS逻辑失效；
• 浏览器渲染或表单处理时可能出现不可预期的行为，比如表单提交时nonce验证异常（当前没出问题是因为PHP处理表单时会取同名参数的最后一个值，但这不是可靠的行为）；
• 影响页面的可访问性和兼容性，部分浏览器或辅助工具可能因为重复ID出现错误。

2. 需要修改参数，具体调整方案 #

每个按钮对应不同的操作场景，应该给它们分配独立的nonce和action参数，这样既能解决ID重复问题，也能让后端更精准地处理不同的保存请求：

修改按钮1（保存基础设置）

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

修改按钮2（保存地址）

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

修改按钮3（上传头像）

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

后端对应调整

同时需要在处理表单的PHP代码中，针对不同的action值分别验证nonce并处理对应的逻辑：

add_action('woocommerce_save_account_details', 'custom_save_account_settings');
add_action('woocommerce_save_account_details', 'custom_save_account_address');
add_action('woocommerce_save_account_details', 'custom_save_account_avatar');

function custom_save_account_settings() {
    if (!isset($_POST['save-account-settings-nonce']) || !wp_verify_nonce($_POST['save-account-settings-nonce'], 'save_account_settings')) {
        wp_die('Nonce验证失败');
    }
    // 处理基础设置保存逻辑
}

function custom_save_account_address() {
    if (!isset($_POST['save-account-address-nonce']) || !wp_verify_nonce($_POST['save-account-address-nonce'], 'save_account_address')) {
        wp_die('Nonce验证失败');
    }
    // 处理地址保存逻辑
}

function custom_save_account_avatar() {
    if (!isset($_POST['save-account-avatar-nonce']) || !wp_verify_nonce($_POST['save-account-avatar-nonce'], 'save_account_avatar')) {
        wp_die('Nonce验证失败');
    }
    // 处理头像上传逻辑
}

如果不想拆分后端逻辑，也可以只修改nonce的ID，保持action不变，但这种方式不如拆分精准，还是推荐按操作场景区分参数，让代码更清晰健壮。

内容的提问来源于stack exchange，提问作者Snorlax