I made a simple form with two input fields and a button. The button is supposed to enter the sum of the two input fields in a third field. I want the value in the third field to be editable by the user. I've tried to change the default_value with an ajax callback, but that doesn't work. I can change all other field properties though (description, placeholder, title, ...), but not default_value. I also tried changing the value through form_state -> setValue() in a custom validate function that I attached to the button. But form_state seems to be reset to the initial value upon form rebuild.

This is my code:

  class calculatorForm extends FormBase {

  public function getFormId() {
    return 'calculator_example';
  }

  public function buildForm(array $form, FormStateInterface $form_state) {
    $form['#prefix'] = '<div id="calculator-form-wrapper">';
    $form['#suffix'] = '</div>';

    $form['number1'] = array(
      '#type' => 'textfield',
      '#weight' => 0,
      '#title' => $this->t('number 1'),
    );

    $form['number2'] = array(
      '#type' => 'textfield',
      '#weight' => 1,
      '#title' => $this->t('number 2'),
    );

    $form['button_sum'] = array(
      '#type' => 'button',
      '#name' => 'sum',
      '#value' => t('+'),
      '#weight' => 2,
    );

    $form['sum'] = array(
      '#title' => $this->t('sum'),
      '#type' => 'textfield',
      '#weight' => 3,
    );

    // attempt with validation function
    $form['button_sum']['#element_validate'] = array([$this,'calculator_example_custom_validate']);

    // attempt with ajax callback
    $form['button_sum']['#ajax'] = array(
      'callback' => [$this,'sumValues_ajax_callback'], //'sumValues_ajax_callback',
      'event' => 'click',
      'wrapper' => 'calculator-form-wrapper',
      );

    $form['sum']['#description'] = t('calculated sum');
    return $form;
  }


  function sumValues_ajax_callback(array &$form, FormStateInterface $form_state)  {
    $n1 = $form_state->getValue('number1');
    $n2 = $form_state->getValue('number2');
    $sum = $n1 + $n2;
    $form['sum']['#placeholder'] = $sum;
    $form['sum']['#default_value'] = $sum;
    return $form;
  }

  function calculator_example_custom_validate($element, &$form_state, $form) {
    $n1 = $form_state->getValue('number1');
    $n2 = $form_state->getValue('number2');
    $sum = $n1 + $n2;
    $form_state->setValue('sum' , $sum);
    drupal_set_message($this-> t('sum is '). $sum);
    $form_state->setRebuild('true');
  }

  public function validateForm(array &$form, FormStateInterface $form_state) {  }

  public function submitForm(array &$form, FormStateInterface $form_state) {  }

}

Does anyone know why $sum doesn't appear as a value in the 'sum' field? What am I doing wrong?

Thanks a lot!!

up vote 1 down vote accepted

I found the solution myself. In case someone else stumbles upon this: In the ajax callback you need to change #value instead of #default_value.

So this callback works:

function sumValues_ajax_callback(array &$form, FormStateInterface $form_state)  {
   $n1 = $form_state->getValue('number1');
   $n2 = $form_state->getValue('number2');
   $sum = $n1 + $n2;
   $form['sum']['#placeholder'] = $sum;
   $form['sum']['#value'] = $sum;
   return $form;
}

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.