Form element replaced via Ajax callback doesn't seem to be submitting or the values are not appearing in buildForm I'm having a form with a select list and a textbox. On-change of select list will trigger an ajax callback. The callback function will replace the default value of textbox with an updated value. 
But when I try to get the textbox value in buildForm() or if I try to submit the form, instead of the updated value the default value (old value which is set) is passed on submit handler. Below is the code - 

&lt;?php

namespace Drupal\my_module\Form;

use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\ReplaceCommand;
use Drupal\Core\Form\FormStateInterface;


class MyAjaxForm extends ConfigFormBase {

  /**
   * {@inheritdoc}
   */
  public function getFormId() {
    return 'my_form';
  }

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {

    $form['output'] = [
        '#type' =&gt; 'textfield',
        '#size' =&gt; '60',
        '#value' =&gt; 'oldvalue',
        '#default_value' =&gt; 'oldvalue',
        '#attributes' =&gt; [
            'id' =&gt; ['edit-output'],
        ],
    ];


    $form['input'] = array(
        '#title' =&gt; t('Crust Size'),
        '#type' =&gt; 'select',
        '#description' =&gt; 'Select the desired pizza crust size.',
        '#options' =&gt; [
          'medium' =&gt; 'Medium',
          'large' =&gt; 'large',
         ],
        '#ajax' =&gt; [
            'callback' =&gt; [$this, 'seyHello'],
            'event' =&gt; 'change',
            'wrapper' =&gt; 'edit-output',
            'progress' =&gt; [
                'type' =&gt; 'throbber',
                'message' =&gt; t('Verifying entry...'),
            ],
        ],
    );

    return parent::buildForm($form, $form_state);
    dpm($form['output']['#value']);
    //even after the ajax callback return and the textbox is filled with 'newvalue', dpm returns 'oldvalue' still.
  }



  /**
   * {@inheritdoc}
   */
  public function submitForm(array &amp;$form, FormStateInterface $form_state) {
    parent::submitForm($form, $form_state);

    dpm($form['output']['#value']);
    dpm($form_state-&gt;getValue('output'));
    //both returns 'oldvalue'


  }


  public function seyHello(array &amp;$form, FormStateInterface &amp;$form_state) : AjaxResponse {
    $elem = [
        '#type' =&gt; 'textfield',
        '#size' =&gt; '60',
        '#default_value' =&gt; 'newvalue',
        '#value' =&gt; 'newvalue',
        '#attributes' =&gt; [
            'id' =&gt; ['edit-output'],
        ],
    ];
    $renderer = \Drupal::service('renderer');
    $response = new AjaxResponse();
    $response-&gt;addCommand(new ReplaceCommand('#edit-output', 
    $renderer-&gt;render($elem)));
    $form_state-&gt;setRebuild(TRUE);
    return $response;
  }


}


I'm not sure why this is happening, it clearly seems to be the case of form values not getting updated after the ajax callback for me. Been debugging this for entire day. Any help/ suggestions would be lovely.
Thanks.
The ajax callback returns the part of $form which is inside of the ajax wrapper:

  /**
   * Ajax callback for the color dropdown.
   */
  public function updateColor(array $form, FormStateInterface $form_state) {
    return $form['color_wrapper'];
  }


The wrapper has to be a div container.

Complete code example  https://cgit.drupalcode.org/examples/tree/form_api_example/src/Form/AjaxColorForm.php