How to reset counter in Drupal form using AJAX

use Drupal\Core\Form\FormBase;
use Drupal\Core\Form\FormStateInterface;

/**
 * Provides the counter form.
 */
class CounterForm extends FormBase {

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

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {
    $count = $form_state->get('count') ?: 0;

    $form['count'] = [
      '#markup' => "<p>Total count: $count",
      '#prefix' => '<div id="counter">',
      '#suffix' => '</div>',
    ];

    $form['increment'] = [
      '#type' => 'submit',
      '#value' => $this->t('Increment'),
      '#ajax' => [
        'callback' => [$this, 'ajaxRefresh'],
        'wrapper' => 'counter',
      ],
      '#submit' => [
        [$this, 'submitFormIncrement'],
      ],
    ];

    $form['reset'] = [
      '#type' => 'submit',
      '#value' => $this->t('Reset'),
      '#ajax' => [
        'callback' => [$this, 'ajaxRefresh'],
        'wrapper' => 'counter',
      ],
      '#submit' => [
        [$this, 'submitFormReset'],
      ],
    ];

    return $form;
  }

  public function ajaxRefresh(array $form, FormStateInterface $form_state) {
    return $form['count'];
  }

  /**
   * Increment the counter.
   */
  public function submitFormIncrement(array &$form, FormStateInterface $form_state) {
    $count = $form_state->get('count');
    $form_state->set('count', ++$count);
    $form_state->setRebuild();
  }

  /**
   * Reset the counter.
   */
  public function submitFormReset(array &$form, FormStateInterface $form_state) {
    $form_state->set('count', 0);
    $form_state->setRebuild();
  }

  /**
   * This method will not be called.
   *
   * Due to for the $form['increment'] and $form['reset'] elements was set
   * the "#submit" property, the "submitForm" method will not be called.
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
  }

}

Hello,

It's great to hear that you are exploring module development! Incrementing the counter using AJAX in a Drupal form is a good start. Now, let's work on adding a reset button to reset the counter.

To achieve this, you'll need to follow these steps:

1. Modify your Drupal form: First, add a new button element to your Drupal form. You can do this by using the '#type' attribute and setting it to 'button' in the form array.

2. Implement AJAX callback: Next, create a new AJAX callback function in your custom module. This function will be triggered when the reset button is clicked.

3. Reset the counter: Inside the AJAX callback function, reset the counter to its initial value. If you have stored the counter value in a variable, set it back to the starting point.

4. Update the form: After resetting the counter, you need to update the form element to display the new value. Use AJAX commands like 'replace', 'html', or 'data' to update the counter field with the reset value.

Here's a simplified example of the code:

// Inside your form builder function.
function my_module_my_form($form, &$form_state) {
  // Your existing code to create the counter field.
  $form['counter'] = array(
    '#type' => 'textfield',
    '#title' => t('Counter'),
    '#default_value' => 0,
    '#attributes' => array('readonly' => 'readonly'),
  );

  // Add the reset button.
  $form['reset_button'] = array(
    '#type' => 'button',
    '#value' => t('Reset'),
    '#ajax' => array(
      'callback' => 'my_module_reset_counter_ajax_callback',
    ),
  );

  return $form;
}

// AJAX callback function to reset the counter.
function my_module_reset_counter_ajax_callback($form, &$form_state) {
  // Reset the counter to its initial value (e.g., 0).
  $form_state['values']['counter'] = 0;

  // Return the updated counter field element.
  return $form['counter'];
}
 

Remember to replace 'my_module' with the actual name of your custom module.

With these changes, when the user clicks the reset button, the counter will be reset to its starting value, and the form will display the updated counter without requiring a page refresh.

I hope this helps you in your module development journey! If you have any further questions, feel free to ask. Happy coding!