Dynamically add input field using #ajax

Question

As the question says, im not clear on how to go about adding new input fields depending on values of certain fields in the form.

I got as far as setting a callback and a wrapper, but i just can't seem to rebuild the form, i can do basic returns of values from the callback, but that's about it.

If anyone could show me a clean, simple way where i could go from, that would be great!

<?php

//Create raffle form
function raffle_create_form($form, &$form_state)
{

    //Basic raffle info
    $form['raf_raffle_name'] = array(
        '#type' => "textfield",
        "#prefix" => "<h5>Raffle information</h5><hr>",
        "#title" => "Raffle Name:",
        "#required" => TRUE
    );

    $form['raf_allowed_number'] = array(
        '#type' => "textfield",
        "#title" => "Number of allowed members",
        "#required" => TRUE,
        '#element_validate' => array('element_validate_number')
    );

    $form['raf_start_now'] = array(
        "#type" => "checkbox",
        "#title" => "Start raffle now?"
    );

    $form['raf_end_date'] = array(
        "#type" => "date",
        "#title" => "When to close this raffle?",
        "#required" => TRUE
    );

    $form['raf_prize_type'] = array(
        '#type' => "select",
        "#options" => array('gift' => 'Steam Gift', 'hardware' => 'Gaming peripherals'),
        "#title" => "Prize type",
        "#ajax" => array(
            'callback' => 'raffle_create_form_type_steam',
            'wrapper' => 'steam_options',
        ),
    );


    if(isset($form_state['values']['raf_prize_type']))
    {
        $form['raf_steam_options'] = array(
            '#type' => 'textfield',
            '#title' => 'Added div',
            '#prefix' => '<div id="steam_options">',
            '#suffix' => '</div>'
        );
        $form['raf_steam_options']['#description'] = 'configure some steamy steam steam';
    }

    $form['raf_prize_name'] = array(
        '#type' => "textfield",
        "#title" => "Prize name",
        '#prefix' => '<div id="steam options"></div>',
    );

    $form['raf_prize_about'] = array(
        '#type' => "textarea",
        "#resizeable" => true,
        "#title" => "Prize description"
    );

    $form['raf_prize_thumb'] = array(
        '#type' => "file",
        "#title" => "Prize thumbnail"
    );

    $form['raf_prize_link'] = array(
        '#type' => 'textfield',
        '#title' => "Link to product"
    );

    $form['raf_raffle_create'] = array(
        '#type' => 'submit',
        '#value' => "Create Raffle",
    );

    $form['#submit'][] = 'raffle_create_form_submit';

    return $form;
}

function raffle_create_form_validate($form, &$form_state)
{

}

function raffle_create_form_submit($form, &$form_state)
{
    dsm('i printed');
}

function raffle_create_form_type_steam($form, &$form_state)
{
    dms('hi');
    return $form['raf_steam_options'];
}

Answer 1

You should do something like this

$form['raf_prize_type'] = array(
        '#type' => "select",
        "#options" => array('gift' => 'Steam Gift', 'hardware' => 'Gaming peripherals'),
        "#title" => "Prize type",
        "#ajax" => array(
            'callback' => 'raffle_create_form_type_steam',
            'wrapper' => 'steam_options',
            'event' => 'change',
           'method' => 'replace',
        ),
    );



$form['raf_prize_name'] = array(
        '#type' => "textfield",
        "#title" => "Prize name",
        '#prefix' => '<div id="steam options">',
        '#suffix' => '</div>'
    );

And your callback function should be

function raffle_create_form_type_steam($form, $form_state){



    return $form['raf_prize_name'];
}

Answer 2

Please note that form function should contains all form variant. So the way stated by @Haider Ali did is not acceptable because $form['raf_steam_options'] is appended in the #ajax callback.

The code in question is not working because there is no <div id="steam options"></div> printed in page in the very beginning.

Please check below for the reference.

/**
 * Create raffle form.
 */
function raffle_create_form($form, &$form_state) {
  $form = array();
  $values = &$form_state['#values'];

  // ...

  $form['raf_prize_type'] = array(
    '#type' => "select",
    "#options" => array(
      'gift' => 'Steam Gift',
      'hardware' => 'Gaming peripherals'
    ),
    "#title" => "Prize type",
    "#required" => TRUE,
    "#ajax" => array(
      'callback' => 'raffle_create_form_type_steam',
      'wrapper' => 'steam_options',
      'event' => 'change',
      'method' => 'append',
    ),
  );

  if (isset($values['raf_prize_type']) && !empty($values['raf_prize_type']) {
    $form['raf_prize_name'] = array(
      '#type' => "textfield",
      '#title' => "Prize name",
      '#prefix' => '<div id="steam options">',
      '#suffix' => '</div>',
    );
  } else {
    $form['raf_prize_name'] = array(
      '#prefix' => '<div id="steam options">',
      '#suffix' => '</div>',
    );
  }

  // ...

  return $form;
}

/**
 * Ajax callback.
 */
function raffle_create_form_type_steam($form, $form_state){
  return $form['raf_prize_name'];
}

Answer 3

The trick was to:

1. Define ajax method as append.

   Append keeps adding the input field on change, replace works swifter in this case.

2. Set a prefix on any of the input field to create a div. CLOSE THE DIV ON THE PREFIX FIELD AND NOT ON THE SUFFIX FIELD. E.g.

   '#prefix' => "<div id='div_to_replace'></div>"
   

3. Then set the callback function to return required input

      <?php
   
   //Create raffle form
   function raffle_create_form($form, &$form_state)
   {
   
       //Basic raffle info
       $form['raf_raffle_name'] = array(
           '#type' => "textfield",
           "#prefix" => "<h5>Raffle information</h5><hr>",
           "#title" => "Raffle Name:",
           "#required" => TRUE
       );
   
       $form['raf_allowed_number'] = array(
           '#type' => "textfield",
           "#title" => "Number of allowed members",
           "#required" => TRUE,
           '#element_validate' => array('element_validate_number')
       );
   
       $form['raf_start_now'] = array(
           "#type" => "checkbox",
           "#title" => "Start raffle now?"
       );
   
       $form['raf_end_date'] = array(
           "#type" => "date",
           "#title" => "When to close this raffle?",
           "#required" => TRUE
       );
   
       $form['raf_prize_type'] = array(
           '#type' => "select",
           "#options" => array('gift' => 'Steam Gift', 'hardware' => 'Gaming peripherals'),
           "#title" => "Prize type",
           "#required" => TRUE,
           "#ajax" => array(
               'callback' => 'raffle_create_form_type_steam',
               'wrapper' => 'steam_options',
               'event' => 'change',
               'method' => 'append',
           ),
       );
   
       $form['raf_prize_name'] = array(
           '#type' => "textfield",
           "#title" => "Prize name",
           "#prefix" => "<div id='steam_options'></div>",
           "#required" => TRUE
       );
   
       $form['raf_prize_about'] = array(
           '#type' => "textarea",
           "#resizeable" => true,
           "#title" => "Prize description"
       );
   
       $form['raf_prize_thumb'] = array(
           '#type' => "file",
           "#title" => "Prize thumbnail"
       );
   
       $form['raf_prize_link'] = array(
           '#type' => 'textfield',
           '#title' => "Link to product"
       );
   
       $form['raf_raffle_create'] = array(
           '#type' => 'submit',
           '#value' => "Create Raffle",
       );
   
       $form['#submit'][] = 'raffle_create_form_submit';
   
       return $form;
   }
   
   function raffle_create_form_validate($form, &$form_state)
   {
   
   }
   
   function raffle_create_form_submit($form, &$form_state)
   {
       dsm('i printed');
   }
   
   function raffle_create_form_type_steam($form, &$form_state)
   {
       return  $form['raf_steam_options'] = array(
               '#type' => 'textfield',
               '#title' => 'Added div',
               '#prefix' => '<div id="steam_options">',
               '#suffix' => '</div>'
           );
   }