By shoaib.nawaz on

Hello! to every one.
I am newbie to Drupal. I am using Drupal 5 for a project. I have to create a contact form, so I used WebForm module. I need to customize it so I did it according to my requirement. The scenario is that I have a select box with two options like "Prepaid" and "Postpaid". On the selection of appropriate option I have to show another selection box populated from database. If I create two selection boxes separately then how can I manage it using Java script on client side.

⋅ Categories: Drupal 5.x

Comments

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

I did something similar with webform. I have a couple of radio buttons where the last option is "other". When "other" is selected, a text field appears. I created two form elements (select and text field) and put the following code in a file called other.js:

$(document).ready(function() {
  $("#edit-submitted-favoritefood").change(function () {
    if ($("#edit-submitted-favoritefood").val() == 'other'){
      $("#webform-component-other").css("display","block");
    } else {
      $("#webform-component-other").css("display","none");			
    }
  });
});

This javascript uses the built-in jQuery library and either hides or shows the 'other' component depending on the value of the 'favoritefood'-selector. I uploaded it to a folder 'js' in my subtheme folder.

In template.php, I added the following code to make sure that other.js and the jQuery library are loaded on the form page:

if ( arg(0) == 'node' && arg(1) == 24 && ! arg(2) ) {
  drupal_add_js(path_to_subtheme() .'/js/other.js', 'theme');	
}

Note that '24' is node ID of the webform.

Hope this helps!

woc_art’s picture

woc_art commented

I'm having some trouble implementing the code you posted. I keep gettin errors and my page won't load.

I've changed the node id to my own but I think on the second line of the code to be placed in template.php I'm supposed to change something too. I've made various changes but I'm not doing something right. Can you please let me know what else I need to modify? It's my first time using Drupal

This is the error I'm getting if I don't change anything in the code:

Fatal error: Call to undefined function path_to_subtheme() in /home/woc87372/public_html/drupal57/themes/woc_wide_menu/template.php on line 3

Thanks!

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

I'm not 100% sure if this is the problem, but try this:
I use this code in the template.php of a subtheme. (The theme's path is sites/all/themes/[parenttheme]/[mytheme].) You seem to be using a normal theme, so you need to change path_to_subtheme() to path_to_theme().

woc_art’s picture

woc_art commented

Thank you,

That got rid of the error. However The text field appears by default now and if I click "No" it will dissapear but the label remains.

This is the code I used

$(document).ready(function() {
  $("#webform-component-shipdif").change(function () {
    if ($("#webform-component-shipdif").val() == 'no'){
      $("#edit-submitted-scontact").css("display","block");
	} else {
      $("#edit-submitted-scontact").css("display","none");
    }
  });
});

Also is it possible for a few text fields and labels to appear when I choose No?

Right now my form has question: "Ship to bill to address?" and if you choose No I would like another set of address fields to appear.

THanks!

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Answering this question would be easiest if you can post the link to your site, but I'll give it a try.
Right now, your code toggles the visibility of the element with id="edit-submitted-scontact". If you need to hide more than that element, you would have to find out if there is an element around all elements you ned to hide, and use that element's id in your js code. Alternatively, you can just add lines to the code: for each element you need to show/hide you duplicate lines 4 and 6 from the code above and put in the right id.

woc_art’s picture

woc_art commented

Hi there,

Thanks! That worked for multiple items, but they show by default and hide when either yes or no is clicked. Once it hides I can't show it again.

Here's the code I used:

$(document).ready(function() {
  $("#webform-component-shipdif").change(function () {
    if ($("#webform-component-shipdif").val() == 'no'){
      $("#webform-component-shipping").css("display","block");
	  $("#webform-component-scontact").css("display","block");
	} else {
      $("#webform-component-shipping").css("display","none");
	  $("#webform-component-scontact").css("display","none");
    }
  });
});

Thanks so much. I really appreciate it!

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Like I said before: Can you post a link? It is really hard to help you with this if I can't see it with my own eyes.

woc_art’s picture

woc_art commented

I've sent you an email with the link

Thanks!

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

OK, I found it. Thanks for the link.

The code I gave you works for me because I use a select-element (a dropdown select box). For radio buttons, the code is slightly different. Radio buttons do not have a form element around it which takes the value of the selected option. Instead, every radio button always has it's own value, but only one of them has the 'checked' attribute. So, that's what the javascript needs to look for: a checked input element with a certain name. In jQuery: $("input[@name='my-radio-button-name']:checked").

Also, You shouldn't need to use multiple lines to hide the textfield and label, because there is a single element around it called #webform-component-scontact. You can just hide and show that.

I think this is what your js code should look like:

$(document).ready(function() {
  $("input[@name='submitted[shipdif]']").change(function () {
    if ($("input[@name='submitted[shipdif]']:checked").val() == 'no'){
      $("#webform-component-scontact").css("display","block");
    } else {
      $("#webform-component-scontact").css("display","none");
    }
  });
});

I hope this solves your problems!

woc_art’s picture

woc_art commented

Thank you so much! That did it! I'm only having a small issue when I try to view the site in IE. When a certain select option is chosen the fields hide instead of show and vice versa. It's the other way round in IE. But works perfectly in Firefox.

I just have a couple of other questions.
1) Is it possible to have it hidden by default?

2) I'm having a problem with my textfields not being aligned to each other. I think it's a css issue but I'm not sure how to fix it. Right now they are all all jaggedy. I've created an issue for it but I don't think anyone knows how to fix it : http://drupal.org/node/255356

Is there any way I can return the favour? I'm really really grateful and I'd like to do something in return.

Thanks again!

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

1) Sure, you can just put #webform-component-scontact {display:none} in your css file to hide it by default.
2) There are many articles on the web about styling forms with css. Search Google for 'css form styling' for instance.

You don't have to do me favours personally. I appreciate your feedback and gratitude, this makes it a pleasure to help you. The only thing I want to ask of you, is to use your talents to contribute actively to Drupal. Help others, write modules, test, debug, post feature requests, spread the word, build great sites... Just do what you do best.

woc_art’s picture

woc_art commented

Thank you so much.

Could you possibly do me one last favour and take a look at the site with IE? I'm having some trouble with the javascript on it. It doesn't seem to respond or it takes two clicks to do so. And sometimes the wrong option shows when clicked.

The form fields affects are:

Is This a Repeat Order?:
Artwork Format:
Ship to Bill to address?:

Thank you again

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

I'm not sure what the problem is, but I know that jQuery sometimes throws errors when your doctype or your xhtml is not valid. The w3c validator shows some errors in your page like duplicate id's and incorrectly closed tags. Maybe you can try if fixing this solves the problem.

I also read some sites suggesting that IE may have a bug in handling this code. On http://jivebay.com/2007/05/30/handling-checkboxes-radio-buttons-and-sele... it is said that it works better to use 'click' instead of 'change'.

woc_art’s picture

woc_art commented

Thank you,

Changing the change to click worked perfectly! Thank you again for your help. Couldn't have done it without you!

m.e.’s picture

m.e. commented

Hi marcvangend,

I would like to use this on my webform with radio buttons ('grid' in webform) ... can you give me a hand with the javascript? I'm having trouble deciphering which parts of the code above are variables and/or values.

My form is for donations. The donor can choose a fixed amount from a set of radio buttons (e.g., $10, $50, and so on) - OR, s/he can type in a different amount if we haven't displayed the dollar amount s/he wants. There are 8 fixed radio buttons in the grid. "Other" would be the 9th. My 'grid' fieldname is set_amount. The textfield is called custom_amount.

I actually don't need the textfield to stay hidden till needed - that would be fine, but optional. The point is to have a text field associated with radio button #9 ... and then to validate the input from that textfield (for numeric) if it's what they chose.

Currently, on the production non-Drupal site, the code automatically clicks the "other" radio button on if they type an amount in the textbox. That would be nice to preserve, but not necessary. Here's the code we're using for that:

                <input type="radio" name="set_amount" value="100"> $100 
                <input type="radio" name="set_amount" value="50"> $50 
                <input type="radio" name="set_amount" value="10"> $10 
                <input type="radio" name="set_amount" value="-99"> Other: $ <INPUT TYPE="text" NAME="custom_amount" value="<? echo $custom_amount; ?>" onFocus="document.urlname.set_amount[3].checked = true">

Anyway, thanks in advance for any help.

manoloka’s picture

manoloka commented

marcvangend this whole thread help me a lot, thanks

It's working like charm :0)

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Thanks for the feedback, it's nice to know that my help actually helps :-)

daniel-san’s picture

daniel-san commented

It's great to see that this is possible with Webform. Could this be expanded to a larger list of selections that leads to another list of selections. I am creating a form that has 30+ possible items for Field A:

Example
Field A
Option 1
Option 2
Option 3
etc.

That would bring up Field B which would bring up several options depending on which Field A option was selected.
Example:
After selecting 'Option 2'
Field B
Option 2 - A
Option 2 - B
Option 2 - C
etc.

It seems as though your solution for bringing up a text box for "Other" could be implemented to bring up another list of selections.
Any ideas?

Dan

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Dan, I agree, this method could be used for bringing up other types of questions, or even to build complex structures of conditional questions. You only have to keep in mind that it's only javascript and css we're working with. This means that users could easily turn off javascript or use firebug to reveal form fields that are supposed to be hidden. In other words, they could fill out a form with contradictory answers (Do you have a cat? - No. | What color is it? - Black.) which might seriously mess up your results.

daniel-san’s picture

daniel-san commented

Thanks for the response. I have been working really hard to learn to build a multistep form that would run this kind of dependent fields, but I'm having a hard time at it.
I have been practicing with the form api documentation, but I'm really not sure how to make it happen. When I saw your solution, I thought maybe it would be a better way of solving the form issue. I'm just not so sure how to create it.

Do you have any resources that might help me learn the multistep form?

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Multistep (multi page) forms are a built in feature of the Webform Module, you can easily create them with the webform UI. When it comes to creating conditional fields with webform, all I know is already written in this thread. Sorry I can't tell you more. I'd say: start experimenting and if necessary, come back to the forum with more detailed questions.

daniel-san’s picture

daniel-san commented

Really cool that I did get it to work, but I'm having an issue in which it's displaying the second list by default when page comes up. Then if you select option A or B in the first field ("District"), the secondary field disappears. Then, choose "other" and the field comes back like it's supposed to. Here's the code I'm using:

$(document).ready(function() {
$("#edit-submitted-district").change(function () {
if ($("#edit-submitted-district").val() == 'Other'){
$("#webform-component-other").css("display","block");
} else {
$("#webform-component-other").css("display","none");
}
});
});

I'm using a Select list and not radio buttons. But when I've tried changing select types to radio buttons, I get the same result which is the "Other" textbox displaying by default when the page is called. Any ideas?

daniel-san’s picture

daniel-san commented

Well, I used the suggestion you'd made to using CSS to hide the field:

#webform-component-other {display:none;}

Worked

flavor’s picture

flavor commented

http://72.172.237.200/qualification-tool is the form.

I need this to work in 3 places on the form:

Are You currently claiming federal R&D tax credits
webform-component-are_you_currently_claiming_federal_rd_tax_credits

If yes Show:
webform-component-if_yes_do_you_conduct_a_scheduled_maximization_review

If no Hide:
webform-component-if_yes_do_you_conduct_a_scheduled_maximization_review

Is your company a "C" Corp,"S" Corp or Partnership?
webform-component-is_your_company_a_c_corp_s_corp_or_partnership

If Yes show:
webform-component-if_s_corp_how_many_shareholders__do_you_have
webform-component-is_s_corp_if_s_corp_how_many_shareholders_are_active
webform-component-if_s_corp_how_many_shareholders_are_passive

If No Hide:
webform-component-if_s_corp_how_many_shareholders__do_you_have
webform-component-is_s_corp_if_s_corp_how_many_shareholders_are_active
webform-component-if_s_corp_how_many_shareholders_are_passive

Does your Company pay income Tax?
webform-component-does_your_company_pay_income_taxes

If yes:
webform-component-if_you_do_check_all_appropriate_years

If no Hide:
webform-component-if_you_do_check_all_appropriate_years

I have added this to my template.php:

if ( arg(0) == 'node' && arg(1) == 8 && ! arg(2) ) {
drupal_add_js(path_to_theme() .'/js/other.js', 'theme');
}

8 is the webform node -

I created a /js folder in my theme folder

themes/174a_framework/js

and I have tried to get the javascript to work - but no luck at all - kinda pulling my hair out at this point because it looks so easy and promising...

Can someone help me to get this working?

http://www.ridgeworksinc.com - helping you participate in the Internet!

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Strange, I can't see why, but the other.js file is not added. Your if-statement with drupal_add_js() in it looks fine... Maybe you can check:
- if the drupal_add_js function was added to the right template.php (i have seen people adding it to the garland theme by accident)
- if the if-statement happens to be within another if{} or a function, so it isn't executed. You can easily see if the php code is called by adding print "yes"; before the if{}
- if you if-statement itself returns TRUE. The easiest way to do that is with the execute-php-block from the devel module.

kevster’s picture

kevster commented

Thats excellent, just what I was after, saved my skin!

Ive used with drupal 6 and webforms2, only had to change the following in template.php:

path_to_subtheme()

to

path_to_theme()

Drupal development | SEO optimised build

kevster’s picture

kevster commented

Thats excellent, just what I was after, saved my skin!

Ive used with drupal 6 and webforms2, only had to change the following in template.php:

path_to_subtheme to path_to_theme

Drupal development | SEO optimised build

FrancoisL’s picture

FrancoisL commented

Hi,

First thanks for this work. it helped me to build a strong form with various conditional fields.

Have a question. In fact when a conditional fields is becoming visible it should be mandatory to fill it. But when this filed is hidden it should not be mandatory (because it's impossible to fill this field). Have you any ideas/examples to do that. i think that should be done in javascript because a mandatory field is still mandatory when it is hidden.

François

muthuraman-s’s picture

muthuraman-s commented

Hi marcvangend,

Thanks For Your Support Its Works Great ,,

i have few issue in the webform ... .

1. on-click the select box the text field show & hide option works Great !!!
2. But On-change option the text-field in Not showing

Can you please Guide me to over come issue

Thanks In advance

Please Check the Following Code 


$(document).ready(function() {
  $("#edit-submitted-course-location").change(function () {
    if ($("#edit-submitted-course-location").val() == 'other(please Specify)'){
      $("#webform-component-other_location").css("display","block");
    } else {
      $("#webform-component-other_location").css("display","none");
    }
  });
});

In template.php i used code 


if ( arg(0) == 'node' && arg(1) == 26 && ! arg(2) ) {
  drupal_add_js(drupal_get_path('theme', 'themename') . '/js/other.js', 'theme');

}
gintass’s picture

gintass commented

This javascript is very helpful. Thank you very much.
My problem is that in my case this hidden field has to be mandatory or required. That means if condition is right and field appears, everything is working fine, but if condition is such that this field doesn't appear, form still cannot be submitted and it complains that mandatory field needs to be filled.

I guess, my question is how to make this field appear AND make it mandatory only if certain option was selected in another field.

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

That fact that the field is mandatory is controlled server side, in the form builder. You can't change that using javascript. I think you can try two things to make it work:
1) Validate the 'other' field with javascript before the form is posted.
2) While the 'other' field is hidden, put a value in it using javascript. Clear the value when it's displayed.

gintass’s picture

gintass commented

Thank you for your suggestions, but how to achieve this? I also found some other thread which has some scripts that should solve "mandatory fields" issue,
http://drupal.org/node/192280
I just have to figure out how to either modify their script or create a script based on your suggestions.

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Learn how jQuery works, try to understand my script, then you should be able to adjust it yourself. It would cost me too much time to do it for you, sorry.

daniorama’s picture

daniorama commented

Could I use this also for making calculations and change the values of the form in realtime? I'd like to create something similar to this: http://www.wyvern.de/adventures/drachenfest/de/node/445 it doesn't have to be a webform, could I just add the form elements in a normal node using php filter? Thanks!

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Sure, you can use jQuery for this kind of calculations, no problem. It doesn't matter how the form is generated - webform, form API, plain html... as long as the inputs have names and id's, jQuery won't mind.

However, keep in mind that javascript cannot substitute true form validation. Your javascript will run on the user's computer and somebody who knows javascript and/or http could mess with the scripts and the submitted values. You can never completely trust that the values received by your server's php script were actually calculated by your javascript.

Equ’s picture

Equ commented

Hi, guys. Thanks for this snippet, but I'm trying to do the same with checkboxes. Radio buttons work fine, but checkboxes don't work :(

here is my code 

$(document).ready(function() {
	$("input[@name='submitted[test][yes]']").click(function() {
		if
			($("input[@name='submitted[test][yes]']").is(':checked'))
		$("#webform-component-company_services").css("display","none");

		else
			$("#webform-component-company_services").css("display","none");
	});
});

Firefox says "$ is not defined". Any suggestions?

Equ’s picture

Equ commented

I found solution for myself.

<style>
#webform-component-company_services {display:none;}
</style>

<script type="text/javascript">

$(document).ready(function(){

$("input[type=checkbox]").click(function(){
   $("#edit-submitted-test-yes");

  if ( $("#edit-submitted-test-yes").is(":checked")) {
      $("#webform-component-company_services").show();
    }
  else if($("#edit-submitted-test-yes").not(":checked")) {
      $("#webform-component-company_services").hide();
    }
});

});
</script>

But Firefox keeps saying "$ is not defined" %)

Equ’s picture

Equ commented

Anyone?

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

jQuery is not loaded in every Drupal page by default. When you see '$ is not defined', check the source code to see if jquery.js is loaded. When you add a js file to a page using the drupal_add_js() function, jquery is automatically added as well.

bels’s picture

bels commented

Hi,

another possibility that was not yet discussed here and which i seem not get to work properly:

a select field with multiple selected values possible. (example)

The original code for a select box works, yet (logically) when more than one option is selected, the IF-condition is not true anymore.

I thought of something like this:

 $(document).ready(function() {
  $("#edit-submitted-xxx").change(function () {
    var str = $("#edit-submitted-xxx").val();
	if (str.search('yyy') >= 0 ){
      $("#webform-component-zzz").css("display","block");
    } else {
      $("#webform-component-zzz").css("display","none");			
    }
  });

The search() function should return the position of the found string (>=0) (in normal Javascript ?! :s ). If the searched bit it not found it returns -1.

Who can help out?

Or who knows the value "selected" of the #edit-submitted-xxx field when multiple selections are made? Is this a string? An array?

madnomad’s picture

madnomad commented

It's an array:

if (jQuery.inArray("yyy",$("#edit-submitted-xxx").val()) != -1) {...

LeAnne2’s picture

LeAnne2 commented

I am redesigning a site and have a form that I am making that has conditional fields. I’m trying to implement the JavaScript work around and am not getting it to work. I don’t know JavaScript so I could very well be doing something wrong. This is what I need part of the form to do:

I have a Selection dropdown with the choices: Homeowner, Builder, Architect, Designer

After that I have a section called: I’m Interested In:
which by default displays checkboxes with:
New Customer Packet
Existing Customer, Updated Literature
Have a Sales Rep Contact me

If you select Homeowner, the I’m Interested In section stays the same.

If you select Architect, Builder, or Designer the I’m Interested section changes to checkboxes with:
Commercial Projects
Residential Projects
New Customer Packet
Existing Customer, Updated Literature
Product Presentation
Have a Sales Rep Contact me

I made a form element for each I’m Interested Section.

This is what I have the JavaScript code as:

$(document).ready(function() {
  $("#edit-submitted-best_described_as").change(function () {
    if ($("#edit-submitted-best_described_as").val() == 'architect' 'builder' 'designer'){
      $("#webform-component-architect_im_interested_in").css("display","block");
    } else {
      $("#webform-component-architect_im_interested_in").css("display","none"); 
    }
  });
});

In the template.php file I put:

 if ( arg(0) == 'node' && arg(1) == 16 && ! arg(2) ) {
  drupal_add_js(path_to_theme() .'/js/architect.js', 'theme'); 
}

I can’t post a link to this form because the site is just a test site, not public yet, but here is link to the current website so you can see what I am trying to do: http://www.qualitystoneveneer.com/Default.aspx?Page=RequestCatalog
Thanks much for any help.

beckyjohnson’s picture

beckyjohnson commented

I put this on my template php but I received and error:
I don't really know how to troubleshoot this part myself. I've tried attaching js files to my drupal site with drupal_add_js but it has never worked out.

if ( arg(0) == 'node' && arg(1) == 17 && ! arg(2) ) {
  drupal_add_js(path_to_theme() .'other.js', 'theme');
}

17 is the # of my form and my theme is a custom theme built off zen. I don't know if you would consider it a sub theme though because it lives in a custom folder like this: all/themes/custom/mytheme and the regular zen theme is just all/themes/zen. Also I have my js file in my theme file and not segregated into a special js folder within my theme.

Also, I was kind of confused about how to find out what the value of my
radio button. I looked at my form using CSS edit, which I use on my Mac and I
got this: wimax_forum-member-Yes and
wimax-forum-member-person1@wimaxforum.org,-person2@wimaxforum.org.
(I think it did that because I put two email values in the field. Certain
people need to be emailed when someone picks 'no')

My form is here:
http://www.wimaxroaming.org/wricode/wri-code-application-form if that
helps.

I hope someone is still commenting on this thread that can help.

Thanks,
Becky

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

I can see in your page that the javascript is not added correctly, so you better fix that first. I recommend that you try the instructions on http://drupal.org/node/342183, it looks like a better method than mine.

beckyjohnson’s picture

beckyjohnson commented

I will read the link you provided but how is it added incorrectly? I don't understand.
Becky

[I read the page]-- It mostly makes sense but when I copied the php to my template I had to do it this way, with out the beginning <?php other wise it gave me an error. There was an unexpected < on line 160

function phptemplate_webform_form_17 ($form) {
 drupal_add_js(path_to_theme() . '/scripts/other.js');
 return theme('webform_form', $form);
}
?>

So finally then, I have no php error my jquery doesn't work. The legal field that I want to show depending on whether or not the user picks yes or no on "Are you a wimax forum member?" is gone completely.

In fact, I have to turn the template.php code off for now because people are allowed to submit to this form currently and having the legal field show all the time is better than nothing. Here is my Jquery again though for reference. I hope we can work out why it is broken:

$(document).ready(function() {
  $("input[@name='submitted[wimax_forum-member-Yes]']").click(function () {
    if ($("input[@name='submitted[wimax-forum-member-batya@wimaxforum.org,-chirag.patel@wimaxforum.org]']:checked").val() == 'no'){
      $("#webform-component-legal").css("display","block");
 } else {
   $("#webform-component-legal").css("display","none"); 
   }
  });
});

Becky

beckyjohnson’s picture

beckyjohnson commented

I have a legal field that I want to appear and disappear based on what is checked but, I'm just reporting to say that that field is now gone. After I added the template.php code and the js and other js in the webform tpl file, it left...I don't know why but even after disabling the code, it is still gone...
[it's fixed!] and the template code and js and tpl form are all updated. I just need to figure out the jquery now.
Becky

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Becky, make sure to pay attention to the difference in Drupal versions. The phptemplate_webform_form_17 syntax is meant for Drupal 5, but your site is running Drupal 6, as you probably know. There are some significant differences between those versions; the places where you can use drupal_add_js is a good example.

beckyjohnson’s picture

beckyjohnson commented

Ohh ok. So where do I go to find out what do to for D6? It seemed like on the tutorial I read about how to add js into a webform, that they were saying that the syntax for this particular thing was the same in D5 and D6. It wasn't clear....

Becky

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

I had a second look at that page and I must agree, the instructions could be much clearer. Well, whatever you did, I can see that other.js is now loaded, so you must have done it right :-)

So now you have to fix your jQuery. I always test things like this using Firefox and Firebug. For instance, it's really easy to test if your jQuery selectors are correct: Open firebug on your webform page, go to the console panel, enter one of your jQuery selectors in the command line (at the bottom, after the ' >>>' ) and hit enter.

I just followed the steps above with $("input[@name='submitted[wimax_forum-member-Yes]']") and this is what was returned: Object length=0 prevObject=Object jquery=1.2.6. The 'Object length=0' part is what matters: it shows that there isn't a single element in your page which matches this selector, so the click event that is bound to it, will never fire.

However when you enter $('#edit-submitted-wimax-forum-member-Yes') in the console command line, you get Object length=1 as reply, so that is a selector that probably will work. I advice you to cut your js in little pieces and try out every piece to make sure it's correct. This will really help debugging your script.

m.e.’s picture

m.e. commented

marcvangend, I'm reading through this thread to see if I can apply some of your good advice to my webform, and it hits me that if I understood even a little about the basics of using jQuery in Drupal, I'd be less lost. When you tell Becky to validate each little piece of her jQuery code .... where is she putting that code to begin with? Is it in in the area where webform allows additional processing? I don't expect a tutorial here, but if you could point me in the right direction it would help. I've successfully integrated a few drupal_add_js() and contributedmodule_add_js() effects, but only after a fair amount of weeping and gnashing of teeth. I've found the documentation about javascript and jquery (and various related contributed modules) to be circular, incomplete, outdated, and frustrating -- just for starters. (You advised someone else to repay you by contributing her/his strengths back to the community ... I've been told writing documentation is mine, but you can't document what you don't know!)

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

The validating of every single line of javascript is best don in the console panel of the Firebug plugin in the Firefox browser.

If you want to know how to add js to a specific webform, look here: http://drupal.org/node/342183.

I hope that helps, if not, keep asking.

m.e.’s picture

m.e. commented

OK, that looks promising, but (for instance) the example in #3 -- if I were integrating that code, where exactly would it go?

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

You mean the code in step three on http://drupal.org/node/342183? That would be the code that goes into the file located at /scripts/SCRIPT_NAME.js, which is loaded in the drupal_add_js function in step 2.

m.e.’s picture

m.e. commented

Yes, that's what I meant. I think my confusion is the way "javascript" and "jQuery" are being used without clear distinctions. The page is about pulling javascript into a webform, and it talks about creating a file with the javascript extension and having a way of referencing that javascript from Drupal, and then suddenly we jump to "using jQuery to .." The connection (the jQuery code = the javascript code) was not not clear to me. So I guess for me that raises another question: what if I have a canned javascript I want to use in webform or some other page? Can that become the .js file, even though it's not jQuery?

Thanks for your patience.

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Yes, everywhere you can use jQuery, you can use javascript. jQuery is, put simply, a toolbox full of useful javascript functions (a "javascript library") that you can use when writing javascript. This toolbox can help you write javascript quicker, with less code, with less room for errors and less risk of cross-browser problems, but you don't have to use it. jQuery is not made by the Drupal developers, but it is included in Drupal. If you want to know more about jQuery, have a look at http://jquery.com/.

amb_raph’s picture

amb_raph commented

I'm using webform. I want to Create form that contains the following dependent component.

I want to select a state, which is dependent on the country selected.
example:

Field 1) Select Country (the various country will apear in a list box)
Germany
France
Japan
etc

Field 2) Select State (the various states will appear in a list box, depending on the country selected in Field 1)
i.e (If Germany is selected above, states in Germany will be display in this list box)
(if France is selected, States in France will be displayed in this list box)
etc.

Please It's urgent I'll appreciate all Quick Response.
Thanks

shivapriya’s picture

shivapriya commented

is there anyway i can do the same thing while creating content using CCK ?

marcvangend’s picture

marcvangend
he/him
Primary language Dutch
Location Amsterdam
commented

Yes, use the Conditional Fields module, http://drupal.org/project/conditional_fields.