ajax form, send data from js modal to form

Question

I have the following form:

When I click the "Add Filter" button, I need to open a modal with a select input element. Then I need to send the user's choice back to the Drupal Form instance and extend the original form, based on the user's input.

I'm not sure of the best way to do this. 2 options I've thought of are:

1. Is it possible to have the "Add Filter" ajax callback send an "OpenModalDialogCommand" with a new form, then have the new form "submitForm" method send the data to the original form?

2. Another possibility would be to collect the data clientside and send it to the original form.

However I'm not sure how to get the user data into the original form in either of the options above.

Answer 1

I have worked on a similar case in D7. Take a look at these tutorials. https://www.deeson.co.uk/labs/insert-form-pop-modal-ctools-and-drupal-7 http://internetdevels.com/blog/big-manual-for-creating-ctools-popups-in-drupal-7

Answer 2

Steps:

1. Add button with 'OpenModalDialogCommand' (Form 1).

2. Use ajax submission in modal form (Form 2) remember:

   $form['actions']['submit'] = [
   ...
    '#ajax' => [
      'callback' => [$this, 'submitAjax'], // The callback for step 3
      'event' => 'click', // what ever event you want to trigger.
      'url' => Url::fromRoute('Form 2 route here'), // Required
      'options' => ['query' => ['ajax_form' => 1]], // Required
    ],
   

   ],

3. In the callback of step 2, add AppendCommand, InvokeCommand ... to set the value or replace HTML to form 1's wrapper.

4. Do not forget to add command CloseModalDialogCommand in step 2 callback