Make Commerce Checkout Form Submit via Ajax

Question

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.

EDIT:

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:

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'.

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.