Home › Blogs › calebtr's blog

changing elements with jQuery when Drupal dynamically assigns ids

Fri, 2010-02-12 14:29 — calebtr

I find myself really enjoying jQuery these days because it provides an easy cross-platform shorthand for things that I like to do to make the user experience better.

Our form to answer reference questions is a regular Drupal node form, but I want to change the 'Submit' button to be more descriptive, depending if the librarian is answering a question, requesting clarification, saving a draft, or whatever.

Our form looks something like this, just imagine a submit button at the bottom labeled 'Send answer'.

I ran into a problem with setting the button value because Drupal dynamically assigns ids to DOM elements, including for forms. For example, Drupal renders a regular submit button as:

<input type="submit" name="op" id="edit-submit" value="Save"  class="form-submit" />

jQuery can handle setting the button value easily:

$(document).ready(function(){
  $("input[name='field_message_type[value]']").click(function(){
    switch ($(this).val()) {
      case 'Draft':
        $('#edit-submit').val('Save draft');
        break;
    };
  });
});

I cut this short for brevity's sake, if this were a real function, I'd provide a case for each selection.

Now, if there is more than one form on the page, Drupal will give each form a slightly different id, such as:

<input type="submit" name="op" id="edit-submit-1" value="Search"  class="form-submit" />

This wouldn't be a problem if the page rendered consistently for all users, but as it happens, we display different blocks for different users, some with forms in them, such as the 'search' block.

So it is a problem! We can't depend on Drupal always assigning the same id to a form element.

Besides, if anyone else wants to use this module, there is no way we can guarantee Drupal will provide a consistent id to our elements on their sites. No way that I could find, at least, so there has to be another way.

I tried changing the id element through Drupal's hook_form_alter() function, but that added an extra id element instead of changing it.

I considered changing the module weight of my module to allow my module to execute last, but my guess is that the problem here is that the default dynamic element IDs are being assigned by Drupal's core form-rendering functions.

So with a hat tip to Wim Leers, I ended up using hook_form_alter to add a class element to the button, thereby being able to call and set the button value from jQuery for anyone using the module.

Here is what I did in hook_form_alter:

<?php
function question_answer_form_alter (&$form, $form_state, $form_id) {
  if ($form_id == 'question_answer_message_node_form') {
    drupal_add_js(drupal_get_path('module', 'question_answer')
      . '/question_answer.js');
    $form['buttons']['submit']['#attributes']['class'] 
      .= 'question-answer-submit';
  }
}
?>

There is a whole lot more to that function in the module, but again for brevity I am just displaying the relevant parts.

Here is the jQuery:

$(document).ready(function(){
  $("input[name='field_message_type[value]']").click(function(){
    switch ($(this).val()) {
      case 'Draft':
        $('#edit-field-referral-email-0-email-wrapper').fadeOut(1000);
        $('.question-answer-submit').val('Save draft');
        break;
    };
  });
});

And zoom, we have a less confusing button to press.

Comments

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <h3> <h4> <h5> <h6> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote>
  • Lines and paragraphs break automatically.
  • You may post code using <code>...</code> (generic) or <?php ... ?> (highlighted PHP) tags.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Use [toc list: ol; title: Table of Contents; minlevel: 2; maxlevel: 3; attachments: yes;] to insert a mediawiki style collapsible table of contents. All the arguments are optional.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
  _   ____    ____    _       _  __  _  __
 (_) | __ )  |  _ \  | |     | |/ / | |/ /
 | | |  _ \  | |_) | | |     | ' /  | ' / 
 | | | |_) | |  __/  | |___  | . \  | . \ 
 |_| |____/  |_|     |_____| |_|\_\ |_|\_\
Enter the code depicted in ASCII art style.