3

I'm trying to add a custom JavaScript file to the forms to create or edit a node.

I've tried mythemename_preprocess_page(), hook_form_alter() and theme_content_type_node_form(). They seem to pick up the page I am on, not the form in Drupal's Overlay with the form in it.

Obviously I want the JavaScript code to fire only when I'm actually on the form. So just putting it in a onReady function in a JavaScript file loaded on every page won't suffice.

This is the code I am using on the template.php file.

function zeilschepen_form_alter(&$form, &$form_state, $form_id) {
  switch ($form_id) {
    case 'node-accommodation-form':
      $form['#after_build'][] = 'zeilschepen_after_build';
      break;

    case 'views_exposed_form':
      if (isset($form['field_country_value'])) {
        $form['field_country_value']['#attributes'] = array('placeholder' => array(t('Land...')));
      }
      break;
  }
}

function zeilschepen_after_build($form, &$form_state) {
  $theme_path = drupal_get_path('theme', variable_get('theme_default', NULL));
  drupal_add_js ("$theme_path/js/test.js");
  return $form;
}

This is the content of the test.js file.

(function ($, Drupal, window, document, undefined) {
  Drupal.behaviors.test = {
    alert('test');
  }
})(jQuery, Drupal, this, this.document);

How can I correctly add JavaScript code in a node form?

7
  • Alas... I've tried the method you linked. I've tried it in my template.php and did an echo $form_id. It echo's the forms on my page but not the form_id of the overlaying node form Aug 11, 2015 at 8:01
  • are you using attached?
    – Mołot
    Aug 11, 2015 at 8:03
  • I'm not seeing the correct $form_id to begin with. So there's no use making a switch for a $form_id that doesn't exist. Aug 11, 2015 at 8:07
  • first, don't use echo, use watchdog or dpm. Second, use hook with form id in hook name.
    – Mołot
    Aug 11, 2015 at 8:09
  • I've edited my post to show the setup in my template.php. I want to add some js in my node-accommodation-form. I'm using echo's just to see if something is actually happening in there. I never get to see the 123 nor getting an error because $path doesn't exist in the after_build function. Aug 11, 2015 at 8:11

3 Answers 3

8

This:

node-accommodation-form

Is the HTML ID of the form, found in $form['#id'] (confusing I know). You need the internal ID, which is

node_accommodation_form

As in:

function zeilschepen_form_alter(&$form, &$form_state, $form_id){
  switch ($form_id) {
    case 'node_accommodation_form':

Using #attached, as mentioned in comments, is far preferable to drupal_add_js() when you get to that part.

As an aside, you may find coming back to your code later on a bit easier if you separate out your form alters like so:

function MYMODULE_form_node_accommodation_form_alter(&$form, &$form_state, $form_id) {
  // Logic specific to the accommodation node form, no need to check form ID.
}

Also, as noted in another answer, theme hooks are only run when the theme is actually in use. So if you're using the admin theme for your node edit forms, your code will never run. If that's the case, you need to move the logic to a module.

0
-1

You need to use hook_form_alter(&$form, &$form_state, $form_id) function. place this function in the template.php and print the $form_id, So now you can get the ID of the add/edit form.

Now you must use drupal_add_js function to load that Javascript file.

function THEME_form_alter(&$form, &$form_state, $form_id){
      if($form_id == "YOUR_FORM_ID")
                drupal_add_js(drupal_get_path('theme', 'mytheme') . '/JS_DIRECTORY/mytheme.js');

This code loads mytheme.js from JS_DIRECTORY of your theme folder.

2
  • It should be #attached form property, not drupal_add_js
    – Mołot
    Aug 11, 2015 at 7:42
  • @Mołot that's right
    – M a m a D
    Aug 11, 2015 at 7:45
-1

I think hook_form_alter() will help you. Try this:

   function yourmodule_form_alter(&$form, &$form_state, $form_id){
     if($form_id == "your form id") {
       drupal_add_js('your js file');
     }
    }
7
  • It should be #attached form property, not drupal_add_js
    – Mołot
    Aug 11, 2015 at 7:42
  • @Mołot its right..
    – Abin
    Aug 11, 2015 at 7:47
  • It's not a module, though. I've tried it in my template.php and did an echo $form_id. It echo's the forms on my page but not the form_id of the overlaying node form. Aug 11, 2015 at 7:52
  • you can use it in your template file..
    – Abin
    Aug 11, 2015 at 7:53
  • See my edit above your comment. Aug 11, 2015 at 7:53

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.