Contact form 7 issue with jquery - hidingshowing fields

This question already has answers here: $ not defined using jQuery in WordPress (3 answers) Closed 8 years ago.

I've followed a tutorial regarding how to hide/show Contact Form 7 fields using jQuery.

I have used this before and it worked wonders. However, on a new site for some reason it isn't working. The page in question is here.

The fields hide okay but don't show when a field conditioned to show is clicked! Can anyone please help me to resolve this issue? Here's the code:

HTML Code:

<p>You are an employee or official representative of a charity or community group (i.e. you are not a third party raising funds on their behalf (required):<br />
    [select* criteria-question-1 label_first include_blank "Yes" "No"]
</p>

<p>The fundraising will benefit people in the Southampton and/or Hampshire area (required):<br />
    [select* criteria-question-2 label_first id:form include_blank "Yes" "No]
</p>

<div class="hide" id="hide1">
    <p>Name of organisation (required):<br />
        [text* org-name placeholder "Enter organisation name here"]
    </p>
</div>

jQuery

$( document ).ready( function() {

    //Hide the field initially
    $( "#hide1" ).hide();

    //Show the text field only when the third option is chosen - this doesn't
    $( '#form' ).change( function() {
        if( $( "#form" ).val() == "Yes" ) {
            $("#hide1").show();
        }
        else {
            $( "#hide1" ).hide();
        }
    } );
} );

This question already has answers here: $ not defined using jQuery in WordPress (3 answers) Closed 8 years ago.

I've followed a tutorial regarding how to hide/show Contact Form 7 fields using jQuery.

I have used this before and it worked wonders. However, on a new site for some reason it isn't working. The page in question is here.

The fields hide okay but don't show when a field conditioned to show is clicked! Can anyone please help me to resolve this issue? Here's the code:

HTML Code:

<p>You are an employee or official representative of a charity or community group (i.e. you are not a third party raising funds on their behalf (required):<br />
    [select* criteria-question-1 label_first include_blank "Yes" "No"]
</p>

<p>The fundraising will benefit people in the Southampton and/or Hampshire area (required):<br />
    [select* criteria-question-2 label_first id:form include_blank "Yes" "No]
</p>

<div class="hide" id="hide1">
    <p>Name of organisation (required):<br />
        [text* org-name placeholder "Enter organisation name here"]
    </p>
</div>

jQuery

$( document ).ready( function() {

    //Hide the field initially
    $( "#hide1" ).hide();

    //Show the text field only when the third option is chosen - this doesn't
    $( '#form' ).change( function() {
        if( $( "#form" ).val() == "Yes" ) {
            $("#hide1").show();
        }
        else {
            $( "#hide1" ).hide();
        }
    } );
} );

• jquery
• plugin-contact-form-7

Share Improve this question edited Jul 28, 2019 at 19:12 Glorfindel 60933 gold badges1010 silver badges1818 bronze badges asked Jun 3, 2016 at 21:09 charlieg007charlieg007 1111 silver badge11 bronze badge 0

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

The issue very well may be noConflict. By default whenever WordPress enqueues jquery it runs in a noConflict mode which means that it doesn't provide an alias for jQuery where the default is $ as you have in your question.

See this Dev Resource comment:

When you enqueue script that is dependent on jQuery, note that the jQuery in WordPress runs in noConflict mode, which means you cannot use the common $ alias. You must use the full jQuery instead. Alternately, place your code using the $ shortcut inside a noConflict wrapper.
- bcworkz

Which means you need to replace your $( document ).ready() with:

jQuery( document ).ready( function( $ ) {

---

In addition, according to your comment it looks like that ( by viewing the page source ) that you are adding in your script before JQuery is defined. If you're using the normal wp_enqueu_script() ( which you should be using / learning to use ) you need to define jquery into the $deps array:

wp_enqueue_script(
    'my-irrelevant-handle',                                  // Script handle to identify your script
    get_stylesheet_directory_uri() . /my-script-path.js,     // Path to your script relative to style.css
    array( 'jquery' ),                                       // Tells WordPress to add this script after JQuery has been added
    '',                                                      // Optional version number
    true                                                     // Load this into the footer for speed purposes
);

This looks like a good enqueuing tutorial.