Hide / Show text box based on radio button in SharePoint 365

Question

I am new at coding in SharePoint. I have created a form which has multiple radio buttons. I want to hide or show text box based on radio button selection.

1) Field Name: Is this an urgent request

2) Radio button Option: Yes/No

3) Field Name: Justification for urgency

If the user selects Yes, I want the field 3) to be shown else hidden. I have added the below code in script editor and is working perfect.

Now the question is, I have another field with same Yes/No option and how to expand the code for this:

4) Field Name: Is this critical client

5) Radio button Option: Yes/No

6) Field Name: Brief description of client

If the user selects Yes, I want the field 6) to be shown else hidden. Code that is working perfect for 1) to 3)

<script src="//code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){  
    $("span[title='Yes']>input").change(function(){
        if($(this).is(":checked")){
            $("nobr:contains('Justification for urgency')").closest('tr').show();

        }    
    });
    $("span[title='No']>input").change(function(){
        if($(this).is(":checked")){
            $("nobr:contains('Justification for urgency')").closest('tr').hide();

        }else{
            $("nobr:contains('Justification for urgency')").closest('tr').hide();

        } 
    });
});
</script>

Also, is there a way if we make the hidden text box as mandatory, and while hiding, can it add a text as "NA" and hide.

Answer 1

If you have control over the HTML, I'd suggest you to create relationship between elements using attributes and class binding. Example:

 $('.yes_no_radio').change(function(){ var targetClass = $(this).data('bind-to'); var targets = $('.' + targetClass); //or $(this).closest('form').find('.' + targetClass) //convert to int then bool targets.toggle(.;+this;value); });

 .hide { display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <label> Yes <input type="radio" class="yes_no_radio" data-bind-to="some_class" value="1" name="yes_no"> </label> <label> No <input type="radio" class="yes_no_radio" data-bind-to="some_class" value="0" name="yes_no"> </label> <div> <div> FIELD A </div> <div class="some_class hide"> FIELD B </div> <div> FIELD C </div> <div class="some_class hide"> FIELD D </div>

Answer 2

Use Jquery attribute selector to bind events to controls.

Sample script.

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
        <script type="text/javascript">
            $(function () {
                var tr = $("nobr:contains('Is this an urgent request')").closest('tr');
                $('span[title="Yes"]>input', tr).change(function () {
                    if ($(this).is(":checked")) {
                        $("nobr:contains('Justification for urgency')").closest('tr').show();

                    }
                })
                $('span[title="No"]>input', tr).change(function () {
                    if ($(this).is(":checked")) {
                        $("nobr:contains('Justification for urgency')").closest('tr').hide();

                    }
                })
                var tr2 = $("nobr:contains('Is this critical client')").closest('tr');
                $('span[title="Yes"]>input', tr2).change(function () {
                    if ($(this).is(":checked")) {
                        $("nobr:contains('Brief description of client')").closest('tr').show();

                    }
                })
                $('span[title="No"]>input', tr2).change(function () {
                    if ($(this).is(":checked")) {
                        $("nobr:contains('Brief description of client')").closest('tr').hide();

                    }
                })
            });

    </script>

Update:

<script type="text/javascript">
    $(function () {
        var tr = $("nobr:contains('Is this an urgent request')").closest('tr');
        $('span[title="Yes"]>input', tr).change(function () {
            if ($(this).is(":checked")) {                    
                $('input[title="Justification for urgency"]', $("nobr:contains('Justification for urgency')").closest('tr')).attr("disabled", false);
                $("nobr:contains('Justification for urgency')").closest('tr').show();

            }
        })
        $('span[title="No"]>input', tr).change(function () {
            if ($(this).is(":checked")) {
                //disable control
                $('input[title="Justification for urgency"]', $("nobr:contains('Justification for urgency')").closest('tr')).attr("disabled", true);
                //set text as NA
                $('input[title="Justification for urgency"]', $("nobr:contains('Justification for urgency')").closest('tr')).text("NA");
                $("nobr:contains('Justification for urgency')").closest('tr').hide();

            }
        })
        var tr2 = $("nobr:contains('Is this critical client')").closest('tr');
        $('span[title="Yes"]>input', tr2).change(function () {
            if ($(this).is(":checked")) {
                $('input[title="Brief description of client"]', $("nobr:contains('Brief description of client')").closest('tr')).attr("disabled", false);
                $("nobr:contains('Brief description of client')").closest('tr').show();

            }
        })
        $('span[title="No"]>input', tr2).change(function () {
            if ($(this).is(":checked")) {
                $('input[title="Brief description of client"]', $("nobr:contains('Brief description of client')").closest('tr')).attr("disabled", true);
                $("nobr:contains('Brief description of client')").closest('tr').hide();


            }
        })
    });

</script>