Ajax forms are very cool because it allows your site users to interact with website without the need to refresh whole page. Drupal 7 comes with a powerful ajax api which is very easy to implement.
In this tutorial, we will learn to create a simple ajax form that does nothing but take values from user and then print it on form submit.
First step is to create a form function
/** * Form implementation */ function custom_ajax_form($form, $form_state) { $form = array(); $form['#prefix'] = '<div id="custom-ajax-form">'; //wrapper that will be replaced in ajax callback $form['#suffix'] = '</div>'; $form['title'] = array( '#type' => 'textfield', '#title' => t('Title'), '#required' => TRUE ); $form['text'] = array( '#type' => 'textfield', '#title' => t('Some field'), '#required' => TRUE ); $form['submit'] = array( '#type' => 'submit', '#value' => t('Submit'), '#ajax' => array( 'callback' => 'custom_ajax_callback', 'wrapper' => 'custom-ajax-form' ) ); return $form; }
After this lets implement ajax callback function
function custom_ajax_callback($form, $form_state) { return $form; // returning form will refresh the complete form }
and now lets look into form validation and submit functions
/** * Form validation */ function custom_ajax_form_validate($form, $form_state) { //do the validations here } /** * Form submit */ function custom_ajax_form_submit($form, &$form_state) { drupal_set_message('<pre>' . print_r($form_state['values'], 1) . '</pre>'); //insert into database or you whatever is required $form_state['input'] = array(); //remove user inputted values from form fields $form_state['rebuild'] = TRUE; //rebuild form }