In drupal 7, there is a common page in Templates folder i.e., "page.tpl.php". In this page if we write javascript, it works in all pages. Now I need to write custom javascript for "drupal commerce kickstart" checkout page. For Example, If I want to use onchange event function to "Full name" field. Even though If I just use "alert(document.getElementById('edit-customer-profile-billing-addressbook').value);", it is not working any where of the pages written. I tried javascript code in below pages.

profiles/commerce_kickstart/themes/commerce_kickstart_theme/template.php profiles/commerce_kickstart/themes/commerce_kickstart_theme/templates/ {almost all pages} profiles/commerce_kickstart/modules/contrib/commerce/modules/checkout/ {almost all related pages}

So please help.. where should I write Javascript code to work in checkout page. Thanks in advance.

3 Answers 3


As St0ik mentioned, you'll want to use drupal_add_js to add the JavaScript to the page. The real question is, where do you want it to go?

If you want it to show up on every checkout page, use the generic checkout form alter:

// Show on every page of checkout.
function MYMODULE_form_commerce_checkout_form_alter(&$form, &$form_state) {
  drupal_add_js(drupal_get_path('module', 'mymodule') . '/checkout-script.js');

If you want it to only show up on certain pages within the checkout, you can use a more specific form alter to only add it to a certain page.

// Review before payment only.
function MYMODULE_form_commerce_checkout_form_review_alter(&$form, &$form_state) {
  drupal_add_js(drupal_get_path('module', 'mymodule') . '/checkout-script.js');


// First page of checkout.
function MYMODULE_form_commerce_checkout_form_checkout_alter(&$form, &$form_state) {
  drupal_add_js(drupal_get_path('module', 'mymodule') . '/checkout-script.js');

You'll use MYMODULE_form_commerce_checkout_form_PAGE_alter where PAGE is the wanted checkout step.


Best way to write javascript code to create separate js file. you can create js file in your module folder where you want.

after this you have to add this js to page where you want using drupal_add_js('path/to/your/file'.'checkout-script.js');

You can create a custom module, implement hook_init() and check that you are on the checkout pages

function mymodule_init() {
  // your checkout steps, might need to update this to fit your needs
  // make sure you have all the checkout steps you need the script
  if(arg(0) == 'checkout' && arg(2) == 'billing') {
    drupal_add_js(drupal_get_path('module', 'mymodule') . '/checkout-script.js');

You can learn more about drupal_add_js here https://api.drupal.org/api/drupal/includes!common.inc/function/drupal_add_js/7

Using hook_init is not ideal on this situation as it will run on every page request.

nvahalik's suggestion is way better.

  • While drupal_add_js is a good way to add this, you don't want to use hook_init() to insert the JS.
    – nvahalik
    Mar 8, 2016 at 19:15
  • Using the hooks you suggest is way better solution! I will edit my answer just to mention that using hook_init is not good on for this as it will run on every page request.
    – St0iK
    Mar 8, 2016 at 19:38

Use this hook.

function hook_commerce_checkout_page_info_alter(&$checkout_pages){
  drupal_add_js('path to ur module',mycustom.js);
  • 1
    In commerce_checkout.api.php this below code is not working.function hook_commerce_checkout_page_info_alter(&$checkout_pages) { $checkout_pages['review']['weight'] = 15; drupal_add_js('includes/',mycustom.js); }
    – J Sinha
    Apr 29, 2013 at 10:08
  • As any other hook that alters data, hook_commerce_checkout_page_info_alter() is not necessarily called when a checkout page is rendered. It is actually called when data about the checkout pages are necessary.
    – apaderno
    Apr 29, 2013 at 12:35
  • What should I do? The form is not recognizing anywhere in the pages? If I write code like this, then "x.lenth" alert message showing the value zero. var x = document.getElementsByTagName("input"); alert(x.length);
    – J Sinha
    Apr 29, 2013 at 12:58

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.