Changing CSS ID when more than one webform is used per page

As far as I know, Drupal core should auto-increment elements that use the same ID, preventing them from conflicting (or having any useful purpose for CSS styling).

Though just looking at it now, it seems that Webform doesn't run through this function for it's assigned IDs (see http://api.lullabot.com/form_clean_id). So to fix this, we should probably run all of the component wrappers through this function to ensure they are unique.

i.e.

    '#prefix' => '<div class="webform-component-'. $component['type'] .'" id="webform-component-'. $component['form_key'] .'">',
    '#suffix' => '</div>',

Should be:

    '#prefix' => '<div class="webform-component-'. $component['type'] .'" id="' . form_clean_id('webform-component-'. $component['form_key']) . '">',
    '#suffix' => '</div>',

Though I'm not sure this would fix all the duplicate IDs. What's the general markup that seems to be causing duplicates for you? There's a similar issue at #666390: Webform does not W3C conform (duplicate IDs for elements with the same form key).

You can fix that by changing the 'Field Key' to something else under 'Advanced Settings' on the webform component page. That is where the webform component ID comes from.

Hi quick,

Sorry to open an old issue but I think I'm running into what you mentioned in #1.
My form IDs are unique but not the component IDs.

In webform_hooks.php I've changed this;

function _webform_render_component($component, $value = NULL) {
  $form_item = array(
    '#type' => 'textfield',
    '#title' => $component['name'],
    '#required' => $component['mandatory'],
    '#weight' => $component['weight'],
    '#description'   => _webform_filter_descriptions($component['extra']['description']),
    '#default_value' => $component['value'],
    '#prefix' => '<div class="webform-component-' . $component['type'] . '" id="' . form_clean_id('webform-component-'. $component['form_key']) . '">',
    '#suffix' => '</div>',
  );

  if (isset($value)) {
    $form_item['#default_value'] = $value[0];
  }

  return $form_item;
}

Flushed caches and such but it doesn't seem to have any effect?

I'm adding the webform to a node via template.php like so;

$vars['addedform'] = node_view(node_load(array('nid'=>923)),FALSE,FALSE,FALSE);

For debugging purposes I emptied the complete webform_hooks.php file but got no errors. Is this even used still?
Might be tired and overlooking things...

Cheers

This issue has largely been fixed already by #666390: Webform does not W3C conform (duplicate IDs for elements with the same form key).

For debugging purposes I emptied the complete webform_hooks.php file but got no errors. Is this even used still?

That file is never used, it's used for documentation.

What are you needing that's not done?

Hi quick,

Well I am including a webform into nodes of a certain type. Therefore in a view of these nodes a single webform is loaded multiple times on a page. The single webform has a unique ID everytime it's included into the node but the components all have the same IDs causing trouble with compliancy and jQuery functionality.

Hope I have explained well...

Cheers

Facing this issue myself on a page where I have the same form output twice. All the ID's used in the form get incremented ("--2") except for the email field wrapping div within the form.

I've tried every option I could think of to try to randomize that ID using hook_form_alter with a PHP rand affixed to the ID. Nothing has worked for me so far.

Why oh why does Webform need to give its wrapping divs an ID anyway??

Below is the form output. My problem is the id "webform-component-sparkmail-email-field" added to the div that wraps around the input field.

<form class="webform-client-form" enctype="multipart/form-data" action="/dev/sparkvan/form/newsletter-register-form" method="post" id="webform-client-form-21--2" accept-charset="UTF-8"><div><div class="form-item webform-component webform-component-textfield" id="webform-component-sparkmail-email-field">
  <label for="edit-submitted-sparkmail-email-field--2">SPARKMAIL SIGNUP <span class="form-required" title="This field is required.">*</span></label>
 <input type="text" id="edit-submitted-sparkmail-email-field--2" name="submitted[sparkmail_email_field]" value="" size="60" maxlength="128" class="form-text required" />
</div>
<input type="hidden" name="details[sid]" value="" />
<input type="hidden" name="details[page_num]" value="1" />
<input type="hidden" name="details[page_count]" value="1" />
<input type="hidden" name="details[finished]" value="0" />
<input type="hidden" name="form_build_id" value="form-KD9JS5C8R9IsbAZF7u8P7dkLt8SbYh31Icl94DIPnUs" />
<input type="hidden" name="form_id" value="webform_client_form_21" />
<div class="form-actions form-wrapper" id="edit-actions--2"><input type="submit" id="edit-submit--2" name="op" value="Go!" class="form-submit" /></div></div></form>

Why oh why does Webform need to give its wrapping divs an ID anyway??

If you want to remove the ID, you can do so by overriding theme_webform_element().

Have you seen the module webform-classes http://drupal.org/project/webform-classes

I have very similar kind of issue #8
In my project we were showing webform in panel through page manager. Webform id is suffixed with --2
and due to that I am facing issue in some other webform based modules such as webform_conditional .

Here is the form tag id which is suffixed by --2

<form id="webform-client-form-2246--2" class="webform-client-form"

Can you submit patch for the same.

Hi guys. The remaining issues described on this page (from #7 onwards) are simply functionality that MUST be intact in order to pass W3C validation. If you display the form multiple times per page, each copy needs different IDs. If you want to target an element multiple times per page, use a class on that element instead. For 3.x you can use the webform_classes module mentioned above. Webform 4.x includes this functionality built-in.