I am trying to add a form element via ajax with a button associated with it, the idea is when the user clicks on this button it will render another form element,but the second button is not clickable. Following is my code-

The main form

function create_report_form($form, $form_state) {
    $form['title'] = array(
        '#type' => 'textfield',
        '#title' => t('Report ttitle'),
        '#value' =>'',
    );
  
    $form['actions'] = array(
      '#type' => 'actions',
    );
  
    $form['actions']['submit'] = array(
      '#type' => 'submit',
      '#value' => t('Save'),
    );
    $form['conditions'] = array(
      '#tree' => TRUE,
    );
    $form['conditions']['report_type'] = array(
      '#title' => t('Report type'),
      '#type' => 'select',
      '#prefix'=> '<div id="conditions-wrapper"></div>',
      '#multiple' => false, 
      '#options' => array('team'=>'Team','projects'=>'Projects','work_items'=>'Work items'),
    ); 
    
     $form['conditions']['submit'] = array(
       '#type' => 'button',
       '#value' => t('Add condition'),
       '#ajax' => array(
          'callback' => 'reports_add_conditions',
          'wrapper' => 'conditions-wrapper',
          'method' => 'replace',
          'effect' => 'fade',
       ),
    );  
  return $form;
}

This is the main ajax callback which will generate a new form element with another button

function reports_add_conditions($form, &$form_state){
    $values = $form_state['values'];
  $form_state['rebuild'] = TRUE;
    $type = $values['conditions']['report_type'];
    $form['report_conditions'] = array(
      '#tree' => TRUE,
    );
    
    $id = drupal_html_id();
    $form['report_conditions']['submit'] = array(
       '#type' => 'button',
       '#value' => t('Add attribute condition'),
        '#name' =>   '_add_another_outcome',
     // '#submit' => array('add_more_add_one'),
       '#attributes' => array(
          'class' => array('qapi-search-widget-filter-cb'),
          'id' => 'someidhere',
        ),
      
      
      '#ajax' => array(
          'callback' => 'reports_add_attribute_conditions',
          'wrapper' => 'conditions-wrapper',
          'method' => 'replace',
          'effect' => 'fade',
         'event' => 'click',
       ),
      
    ); 
    $form['report_conditions']['type'] = array(
        '#type' => 'select',
        '#title' => '',
        '#options' => get_options($type),
        '#size' => 22, 
    ); 
        
    return  drupal_render( $form['report_conditions'])  ;
} 

Upto here my code is working fine, but when I click the newly added button it is not getting triggered. following is my second ajax callback function-

function reports_add_attribute_conditions($form, &$form_state){
   // $form_state['rebuild'] = TRUE;
    $values = $form_state['values'];
    $type = $values['conditions']['report_type'];
    $form['attribute'] = array(
        '#type' => 'select',
        '#name' => $type,
        '#title' => '',
        '#options' =>  get_options($type),
        '#size' => 22, 
    ); 
    $form['attributes']['submit'] = array(
        '#type' => 'button',
        '#value' => t('Add attribute condition'),
         '#attributes' => array(
          'class' => array('qapi-search-widget-filter-cb'),
          'id' => 'filter-my',
        ),
        '#ajax' => array(
          'callback' => 'reports_add_attribute_conditions',
          'wrapper' => 'report-form',
          'method' => 'replace',
          'effect' => 'fade',
        ),
    ); 
    
  return drupal_render($form);
}

Any help ?

Comments

Jaypan’s picture

You are adding elements in your ajax callback. You cannot add elements in ajax callbacks, for as you have found, they don't work. All elements need to be added in the form definition, or a _form_alter() function.

See the #ajax example in the Examples module to understand better.

nabajit’s picture

Hi, thanks for you replay. I tried to add the elements as show in the example module like below-

This is my main form submit handler -

 $form['conditions']['submit'] = array(
      '#type' => 'submit',
      '#value' => t('Add condition'),
      '#submit' =>   array('reports_add_element'),
      '#ajax' => array(
         'callback' => 'reports_append_conditions',
         'wrapper' => 'conditions-wrapper',
         'method' => 'replace',
         'effect' => 'fade',
      ),
    );

Than I added the new elements in the submit hook as below-

function reports_add_element($form, &$form_state)
     $form['attributes'] = array(
           '#tree' => TRUE,
      );
        
        $form['attributes']['attribute'] = array(
        '#type' => 'select',
          '#prefix'=> '<div id="conditions-wrapper"></div>',
        '#name' => 'attribute',
        '#title' => '',
        '#options' =>  array(),
        '#size' => 22, 
    ); 
    $form['attributes']['submit'] = array(
        '#type' => 'submit',
        '#value' => t('Add attribute condition'),
       '#submit' => array('reports_add_element'),
      
        '#ajax' => array(
          'callback' => 'reports_append_conditions',
          'wrapper' => 'conditions-wrapper',
          'method' => 'replace',
          'effect' => 'fade',
        ),
      
    );
  
$form_state['rebuild'] = TRUE;
}

And finally calling my ajax callback to add the new elements as below_

function reports_append_conditions($form, &$form_state){
     $form_state['rebuild'] = TRUE;
     return $form['attributes'];
}

but still its not working. any ideas.

Jaypan’s picture

You can't add elements in the submit handler either. They all have to go in the form definition (or a _form_alter() hook).