Ajax
Hi.
Saw the video "Using the #ajax attribute for dynamic form building" and tried to do an "Add one" button.
For some reason each time I press the "Add" button a few fields are added, including another set of 'add' and 'submit' buttons
Debugger shows the values that I expect, but I must be getting something wrong.
Any ideas?
Code is also pasted (with code coloring) @ http://www.phpriot.com/88875
<?php
function input_menu() {
variable_set('c', 1);
$items['input/examples/more'] = array(
'title' => 'More elements and attributes',
'description' => 'More complex example with additional form elements and attributes.',
'page callback' => 'drupal_get_form',
'page arguments' => array('input_more_form'),
'access callback' => TRUE,
'weight' => 1,
);
return $items;
}
function input_more_form($form, &$form_state) {
$form['first_name'][0] = array(
'#title' => t('first name'),
'#type' => 'textfield',
'#required' => TRUE,
);
$form['last_name'][0] = array(
'#title' => t('last name'),
'#type' => 'textfield',
'#required' => TRUE,
);
// Setting an empty element with a wrapper to be populated.
$form['addithere'] = array(
'#type' => 'markup',
'#prefix' => '
',
'#suffix' => '
',
);
// Added AJAX callback.
$form['add_button'] = array(
'#type' => 'button',
'#value' => 'add one yo',
'#ajax' => array(
'callback' => 'input_os_verify_ajax_callback',
'wrapper' => 'div_wrapper_put_it_here'),
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Submit'),
);
return $form;
}
/**
* AJAX callback for OS verification.
*/
function input_os_verify_ajax_callback($form, $form_state) {
$c = variable_get('c');
$form['last_name'][$c] = array(
'#title' => t('last name'),
'#type' => 'textfield',
'#required' => TRUE,
'#value' => 'fichs'
);
$form['first_name'][$c] = array(
'#title' => t('first name'),
'#type' => 'textfield',
'#required' => TRUE,
);
$c+=1;
variable_set('c', $c);
//}
return $form;
}
ok... after a lot of time, finally figured out that even if function
input_os_verify_ajax_callback
only returns $forms, the ajax wrapper is containing a full copy of the form so everything is appearing twice. I must be doing something very stupid here...
<?php
function input_os_verify_ajax_callback($form, $form_state) {
return $form;
}
/**
* Implements hook_menu().
*/
function input_menu() {
variable_set('c', 1);
$items['input/examples/more'] = array(
'title' => 'More elements and attributes',
'description' => 'More complex example with additional form elements and attributes.',
'page callback' => 'drupal_get_form',
'page arguments' => array('input_more_form'),
'access callback' => TRUE,
'weight' => 1,
);
return $items;
}
function input_more_form($form, &$form_state) {
$form['first_name'][0] = array(
'#title' => t('first name'),
'#type' => 'textfield',
'#required' => TRUE,
'#value' => "1a",
);
$form['last_name'][0] = array(
'#title' => t('last name'),
'#type' => 'textfield',
'#required' => TRUE,
'#value' => "1b",
);
// Setting an empty element with a wrapper to be populated.
$form['addithere'] = array(
'#type' => 'markup',
'#prefix' => '
',
'#suffix' => '
',
);
// Added AJAX callback.
$form['add_button'] = array(
'#type' => 'button',
'#value' => 'add one yo',
'#ajax' => array(
'callback' => 'input_os_verify_ajax_callback',
'wrapper' => 'div_wrapper_put_it_here'),
);
$form['submit'] = array(
'#type' => 'submit',
'#value' => t('Submit'),
);
return $form;
}
Almost there!
Found out the problem and now there is just a very small one left.
In the following code, how can I return the commented values as well?
I need to add 2 fields, not just one.
Thanks.
function input_os_verify_ajax_callback($form, $form_state) {
$c = variable_get('c');
$form['last_name'][$c] = array(
'#title' => t('last name'),
'#type' => 'textfield',
'#required' => TRUE,
'#value' => 'adding1a' . $c,
);
/*
$form['first_name'][$c] = array(
'#title' => t('first name'),
'#type' => 'textfield',
'#required' => TRUE,
'#value' => 'adding1b' .$c,
);
*/
$i=$c;
$c+=1;
variable_set('c', $c);
return $form['last_name'][$i];
}
Thread resolved!
Awesome, great work, Shay!
Thanks Chris. This however led to another problem - following function returns a value, but on multiple calls to the function (each time a button is pressed), only the last value is displayed on the screen, so I guess the value it returns is not actually being added to the $form.
function input_os_verify_ajax_callback($form, $form_state) {
...
return $form['family'][$i];
}
Any suggestions?
(i reckon i can do a variable_set/get for all the newly created values and do a loop to add them to the $form every time the function is called, but there has to be a better solution, no?)
I put values and they are shown more than once. Is this function not supposed to be called only once per page?
function input_more_form($form, &$form_state) {
$form['first_name'][0] = array(
'#title' => t('first name'),
'#type' => 'textfield',
'#required' => TRUE,
'#value' => "1a",
);
$form['last_name'][0] = array(
'#title' => t('last name'),
'#type' => 'textfield',
'#required' => TRUE,
'#value' => "1b",
);