none
How to hide a column base on other field value

    Question

  • (1) I have two column ins a custom list. I need to display or hide the second field based on the first column's value. How can I accomplish that?

    (2) The first column is a dropdown. I need to reload the form after it value changed. However, I cannot find the postback event for the column. Do I need to replace it with a asp.net dropdown field?  

    I will appreciate your help.

    Monday, July 06, 2009 6:13 PM

Answers

  • Hi,
    Simply use javascript to do this.

    you can find column id by using the function below:

    function getTagFromIdentifierAndTitleNew(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('FieldName="'+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('FieldName="'+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;
    }
    


    call the above function to retreive id:

    var ctrlAppDomainName =getTagFromIdentifierAndTitleNew('select','pass proper value','pass proper value');

    now you can apply your hide / show logic.



    --- Arup R(MCTS) Success does not Matter.
    Tuesday, July 07, 2009 11:20 AM

All replies

  • eg10013:

    I assume that you want to do this on the NewForm or EditForm pages?  Try searching this forum for "cascading" for many similar questions.

    M.
    Marc D Anderson - Sympraxis Consulting LLC - Marc D Anderson's Blog
    Monday, July 06, 2009 7:20 PM
  • Hi,
    Simply use javascript to do this.

    you can find column id by using the function below:

    function getTagFromIdentifierAndTitleNew(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('FieldName="'+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('FieldName="'+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;
    }
    


    call the above function to retreive id:

    var ctrlAppDomainName =getTagFromIdentifierAndTitleNew('select','pass proper value','pass proper value');

    now you can apply your hide / show logic.



    --- Arup R(MCTS) Success does not Matter.
    Tuesday, July 07, 2009 11:20 AM