Display div when inline style none

Issue

I have a submit button that uses Gravity Forms to conditionally show or hide the button.

When the button is shown the code looks like: <button class="button gform_button" id="gform_submit_button_1" style="">

When the button is not shown the code looks like: <button class="button gform_button" id="gform_submit_button_1" style="display: none;">

So, what I wanted to do was display a div when the button is not displayed or has the inline style display: none.

I thought I could do something like this:

function myFunction() {
    var x = document.getElementById('gform_submit_button_1');
    if (x.style.display = 'none') {
        document.getElementById("div1").style.display = "block";
    } else {
        document.getElementById("div1").style.display = "none";
    }
}

<div id="div1">This is a hidden div that we can show with JavaScript</div>

This shows div1 when the page loads, but when style="" the div does not hide. When the condition is true and style="" the page does not refresh, which is probably the issue. Is there a way to tweak things so that when style="" div1 is not shown?

Thanks,
Josh

Solution

Alternatively, you could also simply add a Gravity Form HTML field with your alternative div inside. Then use conditional logic to show it when the submit button is hidden.

Answered By – Rochelle

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0