I think its a simple question, but I havent find an answer yet.

I want to make the Commerce Checkout Form Submit as an Ajax Form Submit. I have searched for a while but I havent found something useful.

There is a module Asaf which can add Ajax Submit to every Drupal Form, but I havent find the important locations in code.

There is also a Drupal Page AJAX Forms in Drupal 7, so I have tried a form_alter on the commerce_checkout_form_checkout and added an Ajax Callback, but the page still reloads.

I have written this code in a custom module to test the ajax submit with an own function:

if($form_id == 'commerce_checkout_form_checkout'){
  $form['#ajax'] = array();
  $form['#ajax']['method'] = 'replace';
  $form['#ajax']['effect'] = 'fade';
  $form['#ajax']['callback'] = 'test_function';

function test_function(){
  drupal_set_message('test', 'error');

But no message is displayed and no ajax call is done.

Perhaps somebody cant put me on the right turn.


So I have learned that i have to add the ['#ajax] to a specific button or submit element, and not to the whole form. The commerce_checkout_form_checkout has a buttons array with the continue button in it, so i have added the functionality to this button array:

    [#type] => submit
    [#value] => Kaufen
    [#attributes] => Array
        [class] => Array
                [0] => checkout-continue
[#suffix] => 
[#validate] => Array
        [0] => commerce_checkout_form_validate
        [1] => commerce_stock_checkout_form_validate
[#submit] => Array
        [#ajax] => Array
                [prevent] => click
                [callback] => test_function


But if I hit the submit button, the page still reloads and doesnt jump into my 'test_function'.


1 Answer 1


I see two problems with your code:

  1. #ajax should be set on one of button, checkbox, checkboxes, image button, password, radio, radios, select, submit, tableselect, textarea, text_format, textfield. You are setting it directly on form, not on form submit element, so it cannot work.

  2. You should also set ['#ajax']['prevent'] if your form gets reloaded. In theory:

Description: A JavaScript event to prevent when 'event' is triggered. Defaults to 'click' for #ajax on #type 'submit', 'button', and 'image_button'.

In practice, it often fails to work as expected and I found it safer to set it explicitly.

In the button's array, be sure your #ajax definition is on the same level [#type] => submit is. Don't put it under #submit or any other button's sub-array.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.