Adding Javascript to Webform Page?
bayers - November 7, 2008 - 22:55
I work at a university and we're in the process of implementing drupal to handle many of our webpages to hopefully reduce cost. It's working great for 95% of what we do.
We are using Webforms to create a smallish form for staff.
I have a problem were we want to dynamically populate a dropdown without a refresh based on what is picked in another dropdown.
So if dropdown 1 had fruit, vegetables, grain
Depending on what is selected in dropdown 1, dropdown 2 might be dynamically populated with apples, bannanas, oranges; or potatos, cabbage, onions; or wheat, oats, you get the picture.
With HTML, this would be done with javascript.
Is something like this possible with drupal webforms? Where do I start looking?
I'm stuck with exactly the
I'm stuck with exactly the same problems. I searched and researched, no success yet:( Tried all similar modules like http://drupal.org/project/FixedDataDropdown , http://drupal.org/project/hierarchical_select , etc. all in vain:(
--------------------------
Anjhero
Blog: http://anjhero.wordpress.com
I just did what is being
Edit: This is all from Drupal 5, modify as needed for D6.
I just did what is being asked. In my case, I wanted a fieldset to expand if a checkbox was selected. It's actually pretty simple: all you need to do is add a theme function to template.php.
function phptemplate_webform_form_713 ($form) {drupal_add_js(path_to_subtheme() . '/webform/webform-mail-followup.js');
return theme('webform_form', $form);
}
Replace 713 with the node id of the form you want to change, or change the function to phptemplate_webform_form($form) for all webforms. This will add the JS to the page, and then call the normal theme function as if your function was never called. The path_to_subtheme() function is used with Zen; modify the path to the JS as needed.
For reference, my JS looks like this:
$(document).ready(function () {
$('#edit-submitted-contact-me-newsletter-signup').click(function () {
if ($('#webform-component-contact_information').is('.collapsed')) {
Drupal.toggleFieldset('#webform-component-contact_information');
}
});
$('#edit-submitted-contact-me-contact-me').click(function () {
if ($('#webform-component-contact_information').is('.collapsed')) {
Drupal.toggleFieldset('#webform-component-contact_information');
}
});
});
In your case, I would suggest having multiple dropdowns for "dropdown 2". Use the JS to hide or show the appropriate dropdown. That way, if JS is disabled, users can still successfully fill in the form.
Here's some JS which does something very similar from the #336102: New component: nodelink component I'm working on:
$(document).ready(function() {
if ($("input[name='extra[node_source]'][value=0]").attr('checked')) {
$('#edit-extra-choose-links-wrapper').hide();
}
if ($("input[name='extra[node_source]'][value=1]").attr('checked')) {
$('#edit-extra-content-types-wrapper').hide();
}
$("input[name='extra[node_source]'][value=0]").click(function() {
$('#edit-extra-choose-links-wrapper').hide();
$('#edit-extra-content-types-wrapper').show();
});
$("input[name='extra[node_source]'][value=1]").click(function() {
$('#edit-extra-content-types-wrapper').hide();
$('#edit-extra-choose-links-wrapper').show();
});
});
HTH,
--Andrew
I've added the content of
I've added the content of this post to the handbook: http://drupal.org/node/342183
--Andrew