Sunday 3 July 2011

Javascript to hide a field in newform.apx based on value in choice field

Javascript to hide a field in newform.apx based on value in choice field :
Like if you have to 2 fields in SharePoint list in that 1st one is choice field & your requirement is that if you select some value in choice field based on that another field should hide then just use below java script in your newform.aspx of SharePoint custom list with SharePoint designer :

 <script language="javascript" type="text/javascript">
_spBodyOnLoadFunctionNames.push("selectedFIR");

function selectedFIR()
{
var rdbtnarray = getTagFromIdentifierAndTitle("input","RadioButtons","<Choice Field>")
 for (var x=0;x<rdbtnarray.length;x++)
  {
  if (rdbtnarray[x].value !== "ctl00")
   {
   rdbtnarray[x].parentElement.onclick = function()
    {
    var firdate = findacontrol("<Field to be hide>");
    firdate.parentNode.parentNode.style.display = "";
    }
   }
  else
   {
   rdbtnarray[x].parentElement.onclick = function()
    {
    var firdate = findacontrol("<Field to be hide>");
    firdate.parentNode.parentNode.style.display ="none";
    }
   }
  }
}
   function getTagFromIdentifierAndTitle(tagName, identifier, title, option) {
        var len = identifier.length;
        var tags = document.getElementsByTagName(tagName);
        for (var i = 0; i < tags.length; i++) {
            var idString = tags[i].id;
            var nameString = tags[i].name;
            // get selected radio button value only
            if (option == "value" && tags[i].type == "radio" && (identifier == "RadioButtons" && nameString.indexOf(identifier) == nameString.length - len)) {
                var tagParentHTML = tags[i].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.innerHTML;
                if (tagParentHTML.indexOf('FieldInternalName="' + title + '"') > -1) {
                    var radioButtons = document.getElementsByName(nameString);
                    var radioValue = "";
                    for (var x = 0; x < radioButtons.length; x++) {
                        if (radioButtons[x].checked) {
                            radioValue = radioButtons[x].parentElement.title;
                            break;
                        }
                    }
                    var o = document.createElement("INPUT");
                    o.type = "hidden";
                    o.value = radioValue;
                    return o;
                }
            }
            // get radio buttons group
            if (tags[i].type == "radio" && (identifier == "RadioButtons" && nameString.indexOf(identifier) == nameString.length - len)) {
                var tagParentHTML = tags[i].parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.innerHTML;
                if (tagParentHTML.indexOf('FieldInternalName="' + title + '"') > -1) {
                    return document.getElementsByName(nameString);
                }
            }
            // all other input or select type
            else if (tags[i].title == title && (identifier == "" || idString.indexOf(identifier) == idString.length - len)) {
                return tags[i];
            }
        }
        return null;
    }
    function findacontrol(FieldName) {
        var arr = document.getElementsByTagName("!");
        // get all comments
        for (var i = 0; i < arr.length; i++) {
            // now match the field name
            if (arr[i].innerHTML.indexOf('FieldInternalName=\"' + FieldName + '\"') > -1) {
                return arr[i];
            }
        }
    }
</script>

Replace <Choice Field > according the name of your choice field & <Field to be hide> to field name that you want to hide .