Conditional fields on forms via JavaScript - Support | Kriesi.at

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
June 27, 2017 at 5:30 pm #813525
tjswarbs78
Participant
Hello lovely support people,

I’m here again with another codey question and any help would be appreciated.

I have a standard contact form that i would like to add some “conditional” fields to.
The idea was to create the fields and use some JS to play with them.
The fields would be hidden by default until an option is selected then one field will become visible.

I’ve managed to get things working over on jsfiddle

I’m using wp_enqueue_script to load the script through my child theme but I get some errors…

Uncaught TypeError: $ is not a function.

Now, I’m guessing the original JS is wrong or not compatibly with theme JS or something…
Any ideas or hints as to what I’m doing wrong?

Thank

TJ
- This topic was modified 7 years, 5 months ago by Ismael.
June 29, 2017 at 6:10 am #814245
Ismael
Moderator
Hey tjswarbs78,

Thank you for using Enfold.

Please replace the code with the following.
```
(function($) {
    $('#avia_10_1').hide(); 
    $('#avia_9_1').change(function(){
        if($('#avia_9_1').val() == 'Yes') {
            $('#avia_10_1').show(); 
        } else {
            $('#avia_10_1').hide(); 
        } 
    });
        $('#avia_11_1').hide(); 
    $('#avia_9_1').change(function(){
        if($('#avia_9_1').val() == 'No') {
            $('#avia_11_1').show(); 
        } else {
            $('#avia_11_1').hide(); 
        } 
    });
})(jQuery);
```
Best regards,
Ismael
June 29, 2017 at 5:52 pm #814611
tjswarbs78
Participant
Hey Ismael
I did this before i saw you’re reply…
```
jQuery(document).ready(function($) {
 "use strict";
    $("#element_avia_10_1").hide() ;
    $("#avia_9_1").change(function() {
        if($("#avia_9_1").val() === "Yes") {
            $("#element_avia_10_1").show();
        } else {
            $("#element_avia_10_1").hide();
        }
    });
        $("#element_avia_11_1").hide();
    $("#avia_9_1").change(function(){
        if($("#avia_9_1").val() === "No") {
            $("#element_avia_11_1").show();
        } else {
            $("#element_avia_11_1").hide();
        }
    });
});
```
I’m guessing it does the same thing as the fields work as needed.

Many thanks

TJ
June 30, 2017 at 6:57 am #814822

Ismael
Moderator

Hi,

Great! Glad you solved it. Let us know if you need anything else.

Best regards,
Ismael
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

The topic ‘Conditional fields on forms via JavaScript’ is closed to new replies.