Simple AJAX callback fired on form submission button click

Question

I am trying to fire an AJAX callback when the user presses the submit button. This is such a simple thing but trying to debug Drupal's Form AJAX API is driving me crazy. At this point I just need a fresh set of eyes to look over it. Currently, when I press the button the page just refreshes and the AJAX callback is never fired. I have a form being built with the following code:

class OnlineRevenueForm extends FormBase {
  public function buildForm(array $form, FormStateInterface $form_state) {
    $form['resetbutton'] = array(
        '#type' => 'submit',
        '#value' => $this->t('Submit'),
        '#prefix' => '<div class="buttons">',
        '#suffix' => '</div>',
        '#ajax' => array(
            'callback' => 'Drupal\revenue_projection_model\Controller\RPMController::ResetFields',
            'event' => 'click',
            'progress' => array(
                'type' => 'throbber',
                'message' => NULL,
            ),
        )
    );
    return $form;
  }

  public function submitForm(array &$form, FormStateInterface $form_state) {
    $form_state->setRebuild(FALSE);
  }
}

Inside of my controller I load this form using the following code:

class RPMController extends ControllerBase implements ContainerInjectionInterface {
 public function rpm() {
    // Load the module's template file
    $TemplateFilePath = drupal_get_path('module', 'revenue_projection_model') . "/templates/revenue_projection_model.html.twig";
    $template = $this->twig->loadTemplate($TemplateFilePath);
    //Load Forms
    $OnlineRevForm = \Drupal::formBuilder()->getForm('Drupal\revenue_projection_model\Form\OnlineRevenueForm');
        $markup = [
         '#type' => 'inline_template',
         '#template' => $template->render(
            ['online_rev_form' => $OnlineRevForm]
         )
        ];
   return $markup;
 }

This form is then displayed via the twig template file. The callback that I'm trying to call is also inside of the Controller:

public static function ResetFields(array &$form, FormStateInterface $form_state) {
     $ajax_response = new AjaxResponse();
     $ajax_response -> addCommand(new AlertCommand("Testing"));
     return $ajax_response;
}

Update 1: I have updated how the form is being return in the controller. It is now being returned as a unrendered form in a render array.

public function rpm() {
  $OnlineRevForm = \Drupal::formBuilder()->getForm('Drupal\revenue_projection_model\Form\OnlineRevenueForm');
  return [
        '#theme' => 'rpm_page',
        '#online_rev_form' => $OnlineRevForm
  ];
}

I have also added this code to the .module file:

function revenue_projection_model_theme() {
  $theme['rpm_page'] = [
    'variables' => ['online_rev_form' => NULL],
    'template' => 'revenue_projection_model',
  ];

  return $theme;
}

Answer 1

You also need a submit function.

You can have a look here. It's a complete example with submit handler and callback. In this case I altered the form as I didn't create it but is quite similar. Also a really nice post is here