Hide/Show Input Based on Radio Option Selected

How do I get the following options to work with Perch tags?

Quote from ryan

Hey,

Perch changes the input ID's, so that's why it stops working. If you use the event target instead, it should get around it:

https://codepen.io/anon/pen/RvpxEr

Ryan, that is a great solution. Thanks. The only issue is that when form is submitted it would not include the output in the admin to show if yes or no was selected. Not really a big deal as they really only want the number.

Quote from drewm

I'll often use a data- attribute instead of an id for this sort of thing.

Drew,

Thanks for that idea as well. I will start utilizing that way more.

Quote from drewm

I'll often use a data- attribute instead of an id for this sort of thing.

Drew,

Can you show an example?

I have the following now that does not work.

<script>

function yesnoCheck(e) {

if (e.target.id == 'form1_yesCheck1' && e.target.checked) {

document.getElementById('ifYes').style.visibility = 'visible';

}

else

document.getElementById('ifYes').style.visibility = 'hidden';

}

</script>

Trying to target:

[data-input="yesCheck"]

Quote from drewm

Instead of

Code

1. e.target.id == 'form1_yesCheck1'

use

Code

1. e.target.getAttribute('data-input') == 'yesCheck1'

Drew,

Thanks for this very much! I will be using this way from now on.