--- title: "Using Ajax in Forms · Appnovation" url: "https://www.appnovation.com/insights/using-ajax-forms" description: "How to use Drupal's AJAX framework to refresh only part of a page, such as dynamic form fields, without a full page reload." --- Article # Using Ajax in Forms [![](https://cdn.sanity.io/images/ey850001/production/0aa360d810c9dc10aeb0072b8ce3cc8cd3e65aa5-68x68.jpg?w=68&auto=format) fyu fyu Developer](/people/fyu-fyu.md) Dec 17, 2014 3 min read ![Using Ajax in Forms](https://cdn.sanity.io/images/ey850001/production/3e407c809c2eb9a3153c6856142bdcc3ca074e2b-1400x400.jpg?w=1400&auto=format) Have you ever needed to refresh only part of a page on a specific event, such as a button click? The best way to do this is using Ajax. Drupal provides an Ajax framework that allows you to partly update a page’s HTML. It is commonly used in forms. For example, on a field change, update this part of the page, or on a button click, update that part of the page. Many form elements have the #ajax property that allows you to use Ajax in the form. The #ajax property accepts an array as value with the following parameters: #ajax\[‘callback’\]: The callback function that is called when an event is triggered on the form element. #ajax\[‘path’\]: The menu path to be used for the request. It defaults to ‘system/ajax’ and invokes the function ajax\_form\_callback() that calls the callback function defined in #ajax\[‘callback’\]. #ajax\[‘wrapper’\]: The ID of the element to be replaced by the content returned by the callback function. #ajax\[‘effect’\]: The jQuery effect that would be produced when replacing the replacing the specified element. Valid options are ‘none’ (which is the default option), ‘slide’, or ‘fade’. #ajax\[‘speed’\]: The speed of the jQuery effect. Valid options are ‘slow’ (which is the default option), ‘fast’, or a number in milliseconds. #ajax\[‘event’\]: The JavaScript event on which the callback function is invoked. It is only needed if overriding the default behavior of the form widget is necessary. #ajax\[‘prevent’\]: A JavaScript event that will be prevented on the specified event trigger. The default event prevented is the click on buttons. #ajax\[‘method’\]: The jQuery method that is used to apply the changes on the target element. #ajax\[‘progress’\]: The image that represents the progress of getting a response from the server, can be a throbber or a progress bar. Here is an example of using Ajax in a custom form: function example\_form($form, &$form\_state) { $form = array(); $form\['selection'\] = array( '#type' => 'select', '#title' => t('Selection'), '#options' => array( 'selection1' => 'Selection 1', 'selection2' => 'Selection 2', 'selection3' => 'Selection 3', ), '#empty\_value' => '', '#ajax' => array( 'callback' => 'example\_selection\_callback', 'wrapper' => 'message\_id', ), ); $form\['message'\] = array( '#type' => 'item', '#markup' => t('You have not made a selection yet.'), ); return $form; } The function example\_selection\_callback is invoked when the selection of the element $form\[‘selection’\] is changed and would replace the element $form\[‘message’\] which contains the ID ‘message\_id’. function example\_selection\_callback($form, &$form\_state) { $ajax = array( '#type' => 'ajax', '#commands' => array(), ); $message = !empty($form\_state\['values'\]\['selection'\]) ? t("I choose") . ' ' . $form\_state\['values'\]\['selection'\] : t('You have not made a selection.'); $ajax\['#commands'\]\[\] = ajax\_command\_html('#message\_id', $message); return $ajax; } This is the function callback for the form element ‘selection’. Whenever the selection is changed, the form element ‘message’ would be updated with the appropriate message. Notice that Ajax helper functions are used in the commands array. In this example, ajax\_command\_html() is used in order to replace the HTML inside of #message\_id without having to refresh the whole page. For a complete list of Ajax commands, please visit [Ajax framework commands (opens in new window)](https://api.drupal.org/api/drupal/includes%21ajax.inc/group/ajax_commands/7). [![](https://cdn.sanity.io/images/ey850001/production/0aa360d810c9dc10aeb0072b8ce3cc8cd3e65aa5-68x68.jpg?w=68&auto=format) fyu fyu Developer · Appnovation](/people/fyu-fyu.md) ## Keep reading [![What is Sovereign AI](https://cdn.sanity.io/images/ey850001/production/a5889abdd5e80376912546622e046e3fbef234b4-2496x1664.png?w=640&auto=format)](/insights/what-is-open-source-sovereign-ai.md) Article · 7 min AI ### [What Is Open Source, Sovereign AI?](/insights/what-is-open-source-sovereign-ai.md) Every company is encouraging more AI, and almost every AI bill is climbing. Sovereign AI is about two kinds of control: over your data and over your costs. Here's why open source sits at its foundation. [Iain MacNeil](/people/iain-macneil.md) Article [![AI-first experience design](https://cdn.sanity.io/images/ey850001/production/8bbc2418e87924ef10f36115478a2e10d5bed95e-1584x624.jpg?w=640&auto=format)](/insights/how-build-ai-first-experience-without-throwing-out-everything-youve-already-built.md) Article · 6 min AI Sep 10, 2026 ### [How to Build an AI-First Experience Without Throwing Out Everything You've Already Built](/insights/how-build-ai-first-experience-without-throwing-out-everything-youve-already-built.md) Users now expect a direct answer, not a list of links to click through. Here's how organizations can layer an AI-First experience onto their existing website or app, in weeks rather than years. [Andrew Douglas](/people/andrew-douglas.md) Article [![What Becomes Possible When AI Can Read All the Data](https://cdn.sanity.io/images/ey850001/production/c28ab0bd26753421ee42937e13adc7a7f19b47f0-1296x510.jpg?w=640&auto=format)](/insights/what-becomes-possible-when-ai-can-read-all-data.md) Article · 4 min AI Sep 09, 2026 ### [What Becomes Possible When AI Can Read All the Data](/insights/what-becomes-possible-when-ai-can-read-all-data.md) Most of the world's data has never been analyzed, only sampled. AI changes that. How AI-ready data platforms unlock questions no one could ask before. [Appnovation](/people/appnovation.md) Article ## Get the thinking, *before everyone else.* One considered email a month. New essays, field notes from live engagements, and the occasional strong opinion. No noise.