jQuery Forum

I was a noob once too.

Here is an approach that might work:

// standard "all dom elements are loaded" and ready for action

1. $(document).ready(function() {
2.    
3.     $('input[name="delivery_method"]').click(function() {
4. 
   
5.         if($(this).val() == 'Delivery') {
6.             $("#delivery_address_div").show();
7.         } else {
8.             $("#delivery_address_div").hide();
9.         }
10.     });
11. });

I haven't tested this code but I think this approach should achieve what you're looking for.  Might also try this selector as well:

$('input[name="deliver_method"]:checked')...etc or try something like this too the boolean:

$(this).val() == 'Delivery' && $(this).is('checked').

I gave your script a try and it works well for hiding the address div. This seems a bit cleaner than the script I had for this, thanks!

I still need to figure out validation for this though. Here's my code so far:

1.   $(document).ready(function(){
2.            final_size_change(); //show / hide the custom size on start up.
3.            //new show-hide script
4.            $('input[name="delivery_method"]').click(function() {
5.                 if($(this).val() == 'Delivery') {
6.                      $("#delivery_address_div").show();
7.                 } else {
8.                      $("#delivery_address_div").hide();
9.                 }
10.             });
11.             $("#digital_copy_order_form").validate({
12.                 rules: {
13.                     custom_size: {
14.                         required: function() {
15.                             return $("#final_size :selected").val() == "Custom";
16.                         }
17.                     },
18.                     delivery_address: {
19.                         required: function() {
20.                             return $('input[name="delivery_method"]').val() == "Delivery";
21.                         }
22.                     }
23.                 },
24.                 messages: {
25.                     custom_size: {
26.                         required: "This field is required if you selected Custom Size above."
27.                     },
28.                     delivery_address: {
29.                         required: "This field is required if you selected Delivery above."
30.                     }
31.                 }
32.             });
33.   });

The bits about custom_size is for a select menu where if the user selects "custom" for the value, then the final_size text field is made required.

I want to do the same thing with delivery_address. Here I'm attempting to tell the validate script to check delivery_method and see if it's value is "Delivery", if it is... then make delivery_address a required field and use a specific error message if nothing gets entered.

Upon testing, the above script merely makes delivery_address required REGARDLESS of what's checked. So if a user opts to pick in-store pick up for delivery_method, the delivery_address field remains hidden but is still required... essentially blocking form submission.

I know what I have is wrong, probably something with syntax. What am I doing wrong?

-Chris