0

I have a column titled "Operations" with 2 radio button options, "Show" and "Hide". When users click the "Show" button I want the text box, column name "Was Hidden", to show up. When they click the "Hide" button I want the text box to go away. I have this so far which doesn't work.

<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('H3.ms-standardheader:contains("Was Hidden")').closest("tr").hide();//Hide the text box
if($('span[title="Show"]').closest("td").find('input[type="radio"]').is(':checked'))
{
$('H3.ms-standardheader:contains("Was Hidden")').closest("tr").show();
}
else if($('span[title="Hide"]').closest("td").find('input[type="radio"]').is(':checked'))
{
$('H3.ms-standardheader:contains("Was Hidden")').closest("tr").hide();
}
});
</script>
2

First problem I see is that you are incorrectly selecting your elements. None of them are H3 elements, so that was your primary issue. Their classes had h3' in them, so I can see the confusion. Anyways - heres some code that works.

<script type="text/javascript" language="javascript">
    $(document).ready(function(){
        var $text = $('input[title="Was Hidden"]').closest("tr");
        var $buttons = $('input[id^="Operations"]');

        $text.toggle($buttons.filter('[value="Show"]').is(':checked'));

        $buttons.change(function(){
            var $self = $(this);
            $text.toggle($self.is('[value="Show"]'));
        });
    });
</script>

I'm having the text box either be shown or hidden off the bat by the proper radio button, but if you require it to always be hidden, remove the $text.toggle.. and make it $text.hide() instead

0

Why code?

Use CSS pseudo selectors to check if the first option is checked and add content after the label

input[type="radio"]:nth-child(1):checked+label:after{ 
  color:green;
  content:'Was Hidden';
} 
  • I'm still new to this whole coding thing. I'm going through existing code we have and trying to recreate the functionality. If there are easier/faster ways to do something like this that would be great. Sadly I don't know where in NewForm.aspx to put the code you posted. – user61460 Jan 26 '17 at 22:49
0

Messed around some more and got it to work. Had to add the line with "Operations".

<script type="text/javascript" language="javascript">
$(document).ready(function()
{
    $('H3.ms-standardheader:contains("Was Hidden")').closest("tr").hide();//Hide the text box
    $('H3.ms-standardheader:contains("Operations")').closest("tr").find('input[type="radio"]').change(function()
    {
        if($('span[title="Show"]').closest("td").find('input[type="radio"]').is(':checked'))
        {
            $('H3.ms-standardheader:contains("Was Hidden")').closest("tr").show();
        }
            else if($('span[title="Hide"]').closest("td").find('input[type="radio"]').is(':checked'))
        {
            $('H3.ms-standardheader:contains("Was Hidden")').closest("tr").hide();
        }
    });
});
</script>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.