locked
Hide Field on NewForm based on Dropdown selected item using ECWP RRS feed

  • Question

  • I have a form in which I have a field which I want to show & Hide based on my Dropdown Value..
    I have followed this link solution and it is not working for me  http://social.msdn.microsoft.com/Forums/en/sharepointcustomization/thread/f02078de-3edb-4f22-8352-e290d656d590

    When I use the below code, I get JavaScript Error:'myRow.style' is null or not an object .

    Then, I moved these two lines of code:

    control = findacontrol("Priority");
    myRow = control.parentNode.parentNode;

    above this line:

    myDropDown.attachEvent("onchange", hideMaBit);  

    I don't get any errors. But, it is not working at all.

    Any help appreciated.

     

    <script type="text/javascript">
    hideFields();
    var myDropDown, control, myRow;
    function hideFields(){
        try{
            myDropDown = findMaBiach("Category","select");
            alert(myDropDown.value);
            myDropDown.attachEvent("onchange", hideMaBit);     
            control = findacontrol("Priority");
            myRow = control.parentNode.parentNode;
            myRow.style.display="none";   
        }
        catch(e){}
    }
     
    function findacontrol(FieldName) {
        var arr = document.getElementsByTagName("!");
        for (var i=0;i < arr.length-1; i++ ){
            if (arr[i].innerHTML.indexOf(FieldName) > 0){ 
            alert(arr[i].id) 
                return arr[i];               
            }
        }
    }
     
    function hideMaBit(){
        if(window.event.srcElement.value=="(1) Category1"){myRow.style.display = "block";}
        else{myRow.style.display = "none";}
    }
     
    function findMaBiach(title,type){
    	var Biach = document.getElementsByTagName(type);
    	for(i=0; i<Biach.length;i++){
    		if(Biach[i].title.indexOf(title)>-1){
    			return Biach[i];
    		}
    	}
    }
    
    </script>
    
    
    Sunday, June 13, 2010 5:04 PM

All replies

  • You need to replace "hideFields();" with " _spBodyOnLoadFunctionNames.push("hideFields");" to make above code work. I tested with following example, it worked okay.

    I created a customlist with following fields:

    Category, choice column with values: category1, category2

    Priority, text column.

    In the New Item creation Form - NewForm.aspx, I want to implement this:
    1. When user choose "category1" in the dropdown for Category column, show the Priority column.
    2. When user choose "category2" in the dropdown for Category column, hide the Priority column.

    Step 1, Browse to the NewForm.aspx page, http://servername/Lists/customlist/NewForm.aspx.

    Step 2, Add &ToolPaneView=2 to the end of the url of above form page in browser's address bar to change it to Edit Mode.

    Step 3, Add a Content Editor Web Part to the page.

    Step 4, For the Content Editor Web Part, click edit ->Modify Shared Web Part.

    Step 5, Click Source Editor button and paste following code into the code window.


    ------------------
    <script type="text/javascript">
    _spBodyOnLoadFunctionNames.push("hideFields");

    var myDropDown, control, myRow;
    function hideFields(){
            try{
                    myDropDown = findMaBiach("category","select");
                    alert(myDropDown.value);
                    myDropDown.attachEvent("onchange", hideMaBit);         
                    control = findacontrol("priority");
                    myRow = control.parentNode.parentNode;
                    myRow.style.display="none";    
            }
            catch(e){}
    }
     
    function findacontrol(FieldName) {
            var arr = document.getElementsByTagName("!");
            for (var i=0;i < arr.length-1; i++ ){
                    if (arr[i].innerHTML.indexOf(FieldName) > 0){
                    alert(arr[i].id)
                            return arr[i];                            
                    }
            }
    }
     
    function hideMaBit(){
            if(window.event.srcElement.value=="category1")
                  {myRow.style.display = "block";}
            else{myRow.style.display = "none";}
    }
     
    function findMaBiach(title,type){
     var Biach = document.getElementsByTagName(type);
     for(i=0; i<Biach.length;i++){
      if(Biach[i].title.indexOf(title)>-1){
       return Biach[i];
      }
     }
    }

    </script>
    -----------------

    Step 6, click Save.

    Step 7, click OK for the Content Editor Web Part ToolPane to exit the Edit mode of the page.

    Now if you toggle the select of category1 and category2 for the dropdown menu of Category column, you can see Priority column get hidden and shown.

     

    • Marked as answer by Stanfford Liu Monday, June 21, 2010 1:31 AM
    • Unmarked as answer by Mike Walsh FIN Wednesday, July 20, 2011 6:39 AM
    Friday, June 18, 2010 9:15 PM
  • Hi Jing Wa,

    I have same problem as Ed sharif.

    I test your solution, but when I go to NewForm.aspx page, I encounter with this Java script error:

    ‘myRow.style’ is null or not an object

    Can you help me Why this message appear?

    Thanx.

    Friday, May 13, 2011 8:10 PM
  • Hi Jing Wa,

    I followed the above steps which you've mentioned, at the time of saving the javascript in the Content Editor web part i am getting "Cannot save your changes" error message. Also i tried to use the same jscript in sharepoint designer in newform.aspx of the list, there the fields are getting hidden/shown on changing dropdown values for few seconds but the page is automatically getting refreshed and all the changes are getting revert back, plz help!!

    Regards,

    Suboor.

    Wednesday, July 20, 2011 5:25 AM