By SinhaM on

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.

⋅ Categories: Drupal 7.x

Comments

chetan-singhal’s picture

chetan-singhal commented

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

after this you have to add this js to page where you want using
drupal_add_js($path.'test.js');

if you wrote custom module then you can add this on on page callback method.

you can more read about drupal_add_js

chetan

jaypan’s picture

jaypan
Location Victoria, BC
commented

You can also add the javascript as part of the ['#attached']['js'] array for the render array for the page. This method lets your javascript be overridden further down the line.

Contact me to contract me for D7 -> D10/11 migrations.

chetan-singhal’s picture

chetan-singhal commented

['#attached']['js'] can be use with only form.
if your page has simple callback then you cannot use this.

chetan

jaypan’s picture

jaypan
Location Victoria, BC
commented

That is incorrect. ['#attached']['js'] can be used with any render array anywhere in the site. I never use drupal_add_js() in Drupal 7.

For example:

function my_module_menu()
{
  $menu['example_page'] = array
  (
    'title' => 'example',
    'page callback' => 'my_module_page',
    'access callback' => TRUE,
  );

  return $menu;
}

function my_module_page()
{
  $page['contents'] = array
  (
    '#markup' => t('This is the markup on my page'),
    '#prefix' => '<p>',
    '#suffix' => '</p>',
  );
  $page['#attached']['js'][] = array
  (
    'type' => 'inline',
    'data' => 'alert(t("javascript is loaded"))',
  );
  return $page;
}

The above will create a menu path, /example_page and when that page is loaded, the text "Javascript is loaded" will be shown to the user in an alert box.

Contact me to contract me for D7 -> D10/11 migrations.