Conditionally hide/require form column based on radio buttons

Question

I'm sure it's been asked a million times, but after hours of searching and messing around I have been unable to find a solution...Hopefully someone here can help me?

I have a SharePoint list that has a Yes/No radio buttons column with no default value, and a multiple line comments column.

When the user loads the form, the comments box should be hidden. If the user selects the "Yes" option, the comments box should remain hidden. When the user selects the "No" button, the comments box should appear and be mandatory, but if the user then selects "Yes" again, the box should disappear and no longer be mandatory.

I have been playing with this code, but have yet to get anything to work.

<script type="text/javascript">

  _spBodyOnLoadFunctionNames.push("hideFieldsOnStart");

  function hideFieldsOnStart() {
    var control = getTagFromIdentifierAndTitle("input","TextArea","Comments");
    control.parentNode.parentNode.parentNode.style.display="none";
    getTagFromIdentifierAndTitle ("input","RadioButtons","Materiality Assessment Completed").onchange = function() {ChangeEvent()};
  }

  function ChangeEvent() {
    var dropdown  = getTagFromIdentifierAndTitle("input","RadioButtons","Materiality Assessment Completed");
    var option = dropDown.options[dropDown.selectedIndex].text;
    var control = getTagFromIdentifierAndTitle ("input","TextArea","Comments");
    if(option == "No") {
      control.parentNode.parentNode.parentNode.style.display="";
    } else {
      control.parentNode.parentNode.parentNode.style.display="none";
    }
  }

  function getTagFromIdentifierAndTitle(tagName, identifier, title) {
    var len = identifier.length;
    var tags = document.getElementsByTagName(tagName);
    for (var i=0; i < tags.length; i++) {
      var tempString = tags[i].id;
      if (tags[i].title == title && (identifier == "" || tempString.indexOf(identifier) == tempString.length - len)) {
        return tags[i];
      }
    }
    returnnull;
  }
</script>

If anyone is able to help it would be greatly appreciated. We are using WSS 2007. I have access to SharePoint Designer 2007, but not InfoPath. Ideally I would like this to be completed through the use of a CEWP.

Thank you!

--

Code I got working thanks to SPUtility.js

<script src="/lib/jquery-1.11.1.min.js"></script>
<script src="/lib/sputility.min.js"></script>

<script>
$(document).ready(function(){

    var ynField = SPUtility.GetSPField('Materiality Assessment Completed');
    var ynFieldValue = ynField.GetValue();

    if(ynFieldValue == "No") {
        SPUtility.GetSPField('Comments').SetValue("");
        SPUtility.GetSPField('Comments').Show();
    }
    else {
        SPUtility.GetSPField('Comments').SetValue("N/A");
        SPUtility.GetSPField('Comments').Hide();
    }

    var id = SPUtility.GetSPField('Materiality Assessment Completed').Dropdown.id;

    $('#'+id).on('change', function() {
        var ynFieldValue = ynField.GetValue();
        if (ynFieldValue == "No") {
            SPUtility.GetSPField('Comments').SetValue("");
            SPUtility.GetSPField('Comments').Show();
        }
        else {
            SPUtility.GetSPField('Comments').SetValue("N/A");
            SPUtility.GetSPField('Comments').Hide();
        }
    });

});
</script> 

Answer 1

I think you might be better of doing some client side rendering. You can define PostRender functionality for hiding the field based on the value of the radio button field.

Other than the above, you may have a look at this link.