Hide certain field on form alter using AJAX

Question

I have a webform created using interface, and need to hide some fields through button. Using form_alter I have added that button added AJAX call with it. Now I want to remove/hide certain element using that button and AJAX.

Below is the sample code

function xyz_user_signup_form_webform_submission_form1_form_alter(array &$form, FormStateInterface $form_state, $form_id) {


  $form['#attached']['library'][] = 'xyz/xyz.global';

  $form['start'] = [
      '#type' => 'button',

      '#ajax' => [
        'callback' => 'xyz_user_signup',
       ],
      '#value' => t('START >>'),
  ];

}

function xyz_user_signup(array &$form, FormStateInterface $form_state) {

    $elements = &WebformFormHelper::flattenElements($form['elements']);


    $elements['field1']['#access'] = FALSE;


    return $elements;
}

On clicking start button I want to hide field1.

Answer 1

Your AJAX needs to have a target ID where it will put your AJAX output. You declare that ID in the wrapper key.

In your form_alter

  '#ajax' => [
    'callback' => 'xyz_user_signup',
    'wrapper' => 'load-me-here-id', // This element is updated with this AJAX callback.
   ],

Then you need to wrap the field with this ID so AJAX replaces it.

 $form['elements']['field1']['#attributes'] = ['id' => 'load-me-here-id'];

In your ajax callback

return $elements['field1']; // so it doesn't return the entire form.