Fire custom submit handler in form embedded in node edit form [duplicate]

Question

I have a form that is being inserted inside of a node edit form and the inserted form is given a custom submit handler. The inserted form's submit button is defined as follows:

    $form['decision_select']['update'] = [
      '#type' => 'submit',
      '#value' => $this->t('Select Segment Set'),
      '#submit' => [[$this, 'updateSegmentSet']],
      '#limit_validation_errors' => [],
      '#ajax' => [
        'callback' => [$this, 'updateSegmentSetAjax'],
        'wrapper' => $wrapper_id,
      ],
    ];

However, when I click 'Select Segment Set' the entire node form is submitted to the backend (I've verified this by printing the request/route objects sent to the backend). Is there any way to press that submit button and have only the inserted form sent to the backend along with this custom submit handler? The idea is to have this inserted form filled with values given to it via ajax before the node form is ever submitted to save the node.

Answer 1

I came across https://www.drupal.org/forum/support/module-development-and-code-questions/2015-09-03/put-a-custom-form-inside-node-form which, while old, claims that what I wanted to do is not possible. To get this to function the way I wanted I:

• Attached a JS event handler to the embedded form submit buttons that performed .preventDefault()
• This handler then .ajax'd a custom route that I created.
• In the Controller for that route, I had to perform all the primary operations for submitting the form and return markup back to the .ajax call.