Hide/Show Input Fields Base on Greater Than Digit

Hello,

I am trying to build a donation form. There is a section to send a certificate in memorial to someone if the donation is over $25. I don't want to show the certificate option, unless the donation is >=25.

I am trying to do a modified version of this post, and this post, but can't seem to figure it out.

The donation field is a text box with Field Name and Field ID both set to "donationamount" and it validates as a digit. The memorial fields are memorysame, memorystreet, memorycity, memoryctate and memoryzip.

Under Events, I added a "Function Call" with On: "Change Value" Of: "donationamount" and Function: "certificateshow"

I added a Load JavaScript on onLoad and added this code:

function certificateshow() {
if (jQuery('#donationamount').val() >= 25){
jQuery('#memoryname').show() &&
jQuery('#memorystreet').show() &&
jQuery('#memorycity').show() &&
jQuery('#memorystate').show() &&
jQuery('#memoryzip').show();
} else {
jQuery('#memoryname').hide() &&
jQuery('#memorystreet').hide() &&
jQuery('#memorycity').hide() &&
jQuery('#memorystate').hide() &&
jQuery('#memoryzip').hide();
}
}

This obviously doesn't work, but I'm not a strong coder, and need help accomplishing what I want.

Can someone point me in the right direction?

Thanks,
Melvins138

Hi Melvins138,

I don't think that you can use && like that - try ending each line with a semi-colon

jQuery('#memoryname').show();
jQuery('#memorystreet').show();
. . .

Bob

Hi Bob,

I think I have it figured out, and got it working on jsfiddle, but I can't seem to get it to transfer over to chronoforms.

Link to jsFiddle That Works If you type 24 and hit tab, nothing happens. Enter 25 hit tab, more fields open.

The HTML code is copied directly from CFv5 code, and I copied and pasted the JavaScript area into a "Load JavaScript" on the On Load area of "Set Up"

Maybe the problem has something to do with jQuery, but I am lost on a solution.

If you look at the jsfiddle, in the JavaScript area, it's set to jQuery 1.9.1.

I see jQuery is loaded when the my form page loads, in the header.

Is there something I need to put in "Load JavaScript"

Please help.

Thanks,
Melvins138

Hi Bob,

I hate to bump this, because I know you are very busy, but I can't seem to get this jQuery figured out.

I have read through many posts, and am drawing a blank. I have edited by Load JS to be more streamlined, but still nothing.

I used this code from another post, which worked fine at hiding the div container:

jQuery(document).ready(function (jQ) {
jQ('#donationamount).hide();
});

and tried to edit it for an if/else

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

if (jQ('#donationamount').val() >= 25)
jQ('#memoryCertificate').show();
else
jQ('#memoryCertificate').hide();
});

I've tried variations of this, to no luck. I tried to add the toggle function from my jsfiddle so it looks like:

jQuery(document).ready(function (jQ) {
    toggleFields();
    (jQ('#donationamount').change(function () {
        toggleFields();
    });
});
function toggleFields() {
if (jQ('#donationamount').val() >= 25)
jQ('#memoryCertificate').show();
else
jQ('#memoryCertificate').hide();
}

Basically, if you type 25 or more in the donationmount, then show div#memortCertificate anything less than 25, then keep it hidden.

Thanks in advance for any help.

Melvins138