CODEWITHSUNDEEP
htmljquerywordpressgravity-forms-plugingravityforms
Mitch McQuinn
Mitch McQuinn

Reputation: 37

WordPress / Gravity Forms - Show/hide a div based on value of a number field

I'm looking to conditionally display a div based on a number field in a gravity form. The number field changes depending on the number of items checked in a checkbox field. When you check any one checkbox then the number field returns "1", and if you select any two then it will return "2", etc...(See this video for a demonstration)

In my testing I've found that I can get the value of the number field no problem, but for some reason my IF statement isn't working right and I can't narrow down the issue... What should happen in this example is that the content should disappear only when the number field returns "2".

Here is the HTML that the gravity form produces for the number field:

<div class="ginput_container ginput_container_number">
     <input name="input_5" id="input_13_5" type="text" value="" class="medium" tabindex="5" readonly="readonly" aria-invalid="false">
</div>

Here is the HTML for the conditional display content that I've place elsewhere on the page:

<div class="conditional-div">
    Content to hide if total field value is equal to 2
</div>

Here is the jQuery I'm working with:

jQuery(function ($) {
    var total = $(':input[name=input_5]');
    var total_value = total.val();
    if (total_value === "2")
        jQuery(".conditional-div").hide();
    else
        jQuery(".conditional-div").show();
});

Any help with this would be greatly appreciated! I'm great with CSS, HTML, and PHP, but jQuery is not my strong suit. 😛

Upvotes: 2

Views: 1575

Answers (1)

Mitch McQuinn
Mitch McQuinn

Reputation: 37

HUZZAH!🎉🎉🎉 After some more testing I figured it out!

The problem wasn't with my IF statement, it was that there was nothing registering the change to the field to trigger the IF statement. Also, I apparently didn't need that extra variable in there... ANYWAY, this is what worked:

jQuery(function ($) {
    var total = $(':input[name=input_5]');
    total.change(function() {
    if (total.val() === "2")
        jQuery(".conditional-div").hide();
    else
        jQuery(".conditional-div").show();
    });
});

Upvotes: 1

Related Questions