Creating custom input form for a node using Ajax

Question

Attached is an example screenshot of the form I'm using PHP and AJAX in Drupal 7.

By default, the form will display 10 fields. The form uses AJAX to enable users to add a potentially infinite number of input fields to the initial 10 in groups of 5. What I need it to do is upon retrieval, repopulate the fields as it was saved, with the same functionality available, should the user wish to edit.

Example form

I have on a previous attempt used $form_state in entries_form_add_five to add to the number of input boxes and returned using the ajax call but I couldn't get this to work when loading the data to edit. How can I rebuild the form with a new $node-->entries_form['term'] array which has been increased by 5?

<?php 

function entries_form_form_entries_node_form_alter(&$form, &$form_state, $form_id) {
//trimmed 
$node = $form['#node'];
$form["section"]["term"]["#tree"] = TRUE;

$items = $node->entries_form['term'];
foreach($items as $key => $item) {
    $form["section"]["term"][$key] = array(
        '#type' => 'textfield',
        '#size' => 10,
        '#attributes' => array(
        'class' => array('left'),
         ),
         '#value' => $item,
         ); 
 }  
//trimmed
}

function entries_form_commands_add_callback($form, $form_state) {
return $form['section']['term'];    
}

function entries_form_add_five($node, $form, &$form_state){
$node->entries_form['term'] = array_push($node->entries_form['term'],'', '', '', '', '');
$form_state['rebuild'] = TRUE;
}

function entries_form_node_prepare($node) {
if (empty($node->entries_form)) {
// Set default 10 empty values, since this only runs when adding a new node.
$node->entries_form['term'] = array_fill(0, 10, '');
}
}

function entries_form_node_load($nodes, $types) {
if($types[0] == 'entries'){
    $result = db_query('SELECT * FROM {entries_form_node_form_alter} WHERE nid IN(:nids)', array(':nids' => array_keys($nodes)))->fetchAllAssoc('nid');
    foreach ($nodes as &$node) {
        $node->entries_form['term'] = json_decode($result[$node->nid]->term);
    }
}

}

Any help very much appreciated.

Thanks!

You need to paste the code of how you are displaying these fields. — AyB
Thanks Cheez, have added code. Thanks again in advance for help. — stevieb123

Felix Eve Felix Eve · Accepted Answer · 2014-03-28T14:28:49

I agree that there are no good examples of loading previously saved data into an unlimited values field. (I think this should have been in the examples module.

I wrote the code below to just manage a list of people. This list is stored in Drupal variable table, not as nodes, however the methodology should be similar, so hope should guide you in the right direction.

function people_list_form($form, &$form_state) {

    $form['#tree'] = TRUE;

    // load the list of names - here you could use node load instead
    $names = variable_get('people_list', array());

    if (empty($form_state['num_names'])) {
        // store the number of names we have in $form_state
        $form_state['num_names'] = count($names)>0 ? count($names) : 1;
    }

    $form['names_fieldset'] = array(
        '#title' => 'List of People',
        '#type' => 'fieldset',
        '#prefix' => '<div id="names-fieldset-wrapper">',
        '#suffix' => '</div>',
    );

    // loop for each name to add form elements
    for ($i = 1; $i <= $form_state['num_names']; $i++) {
        $form['names_fieldset']['name'][$i]['name'] = array(
            '#type' => 'textfield',
            '#title' => 'Name #'.$i,
            '#default_value' => isset($names[$i-1]) ? $names[$i-1] : '',
        );
    }

    $form['names_fieldset']['add_name'] = array(
        '#type' => 'submit',
        '#value' => t('Add another name'),
        '#submit' => array('people_list_form_add_name'),
        '#ajax' => array(
            'callback' => 'people_list_add_more_callback',
            'wrapper' => 'names-fieldset-wrapper',
        ),
    );

    if ($form_state['num_names'] > 1) {
        $form['names_fieldset']['remove_name'] = array(
            '#type' => 'submit',
            '#value' => t('Remove last name'),
            '#submit' => array('people_list_form_remove_name'),
            '#limit_validation_errors' => array(),
            '#ajax' => array(
                'callback' => 'people_list_add_more_callback',
                'wrapper' => 'names-fieldset-wrapper',
            ),
        );
    }

    $form['submit'] = array(
        '#type' => 'submit',
        '#value' => 'Submit',
    );

    return $form;

}

function people_list_add_more_callback($form, $form_state) {
  return $form['names_fieldset'];
}

function people_list_form_add_name($form, &$form_state) {
    $form_state['num_names']++;
    $form_state['rebuild'] = TRUE;
}

function people_list_form_remove_name($form, &$form_state) {
    if ($form_state['num_names'] > 1) {
        $form_state['num_names']--;
    }
    $form_state['rebuild'] = TRUE;
}

function people_list_form_submit($form, &$form_state) {
    $names = array();
    foreach($form_state['values']['names_fieldset']['name'] as $k => $v) {
        $names[] = $v['name'];
    }
    variable_set('people_list', $names);
    drupal_set_message('Names updated');
}

Creating custom input form for a node using Ajax

1 Answers