Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • June 27, 2017 at 5:30 pm #813525
    tjswarbs78

    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, 4 months ago by Ismael.
    June 29, 2017 at 6:10 am #814245
    Ismael

    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

    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

    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.