How do I submit two different values with a single button in the form?

I have a form that allows users to change their data (name, surname, display name etc ..). With the “save settings” button, this data is updated correctly.

Now I’m trying to include a new field that allows users to upload an avatar. The problem is that now I have another button called “upload” which is meant to upload the image entered by the user. If I click on this, instead of uploading the image, the entire form is sent and the avatar is not uploaded.

So as a solution I was thinking of creating a single button that executes the values of both buttons I just described. Although I’m not sure if it actually works.

Anyway this is what I’m trying to do, some good Samaritan can show me the right way to find a solution that works for me?

<form id="wpua-edit-<?php echo esc_attr( $user->ID ); ?>" enctype="multipart/form-data" name="Form" class="mts-edit-account" action="" method="post" <?php do_action( 'woocommerce_edit_account_form_tag' );?> >
  
//Here are all the fields of my form

  <?php wp_nonce_field( 'save_account_details', 'save-account-details-nonce', 'update-user_' . $user->ID ); ?>

  <button type="submit" class="edit-account-button" name="save_account_details" value="<?php esc_attr_e( 'Save changes', 'woocommerce' ); ?>"><?php esc_html_e( 'Save changes', 'woocommerce' ); ?></button>
  <button type="submit" class="button" id="<?php echo esc_attr( ( 'add-new-user' == $user ) ? 'wpua-upload' : 'wpua-upload-existing' ); ?>" name="submit" value="<?php esc_html_e( 'Upload', 'one-user-avatar' ); ?>"><?php esc_html_e( 'Upload', 'one-user-avatar' ); ?></button>

  <input type="hidden" name="action" value="save_account_details" />
  <input type="hidden" name="wpua_action" value="update" />
  <input type="hidden" name="user_id" id="user_id" value="<?php echo esc_attr( $user->ID ); ?>" />

</form>

Answer

You design your avatar upload as a form inside a form. This is not allowed.

If you want to do something like this, you can use AJAX to upload the image as a separate background step. But then you need to take take about cancelled submissions (image on the server without the intention to change it because the user left the form without saving).

I would recommend to not have an extra button to upload the image. You should have a single submit button that submits the entire form where the image is just another attribute of the form.

Or… make an extra from just for the image upload as an separate section.