This project has moved. For the latest updates, please go here.

Show or Hide list form fields based on another field's value.

Sep 2, 2013 at 2:21 PM
Hi,
I was wandering if there is a simply solution for selecting which fields show (or hide) based on another field's value.
Example: if Category = "User" don't show fields like "Mailbox description", "Users list".
Coordinator
Sep 2, 2013 at 11:53 PM
Yes, definitely!

Have you tried something like this?
if (SPUtility.GetSPField('Category').GetValue() === 'User') {
    SPUtility.GetSPField('Mailbox description').Hide();
    SPUtility.GetSPField('Users list').Hide();
}
Make sure to check out the installation page if you haven't already.
Sep 3, 2013 at 7:18 AM
Great!!!

It works as expected.

Thank you Kit, this is very very useful!

Daniele
Sep 26, 2013 at 1:22 PM
Edited Sep 26, 2013 at 3:15 PM
Kit I'm sorry, but I'm facing a problem with dispform.aspx: it seems that the IF statement doesn't work. The first statements work fine, after IF don't.
I show you the code:
<script type="text/javascript" src="../../Javascript/prototype.js"></script>
<script type="text/javascript" src="../../Javascript/SPUtility.js"></script>

<script type="text/javascript">
Event.observe(window,'load',function(){

SPUtility.GetSPField('Title').Hide();
SPUtility.GetSPField('Assigned Owner').Hide();
SPUtility.GetSPField('Target Audiences').Hide();
SPUtility.GetSPField('Exempt from Policy').Hide();
SPUtility.GetSPField('Original Expiration Date').Hide();
SPUtility.GetSPField('Expiration Date').Hide();

});

if (SPUtility.GetSPField('Category').GetValue() === 'User') {
    SPUtility.GetSPField('Mailbox description').Hide();
    SPUtility.GetSPField('Users List').Hide();
    SPUtility.GetSPField('Send As option').Hide();
    SPUtility.GetSPField('External Surname').Hide();
    SPUtility.GetSPField('External Name').Hide();
    SPUtility.GetSPField('External email').Hide();
    SPUtility.GetSPField('Start Date').Hide();
    SPUtility.GetSPField('End Date').Hide();

};

</script>
Coordinator
Sep 27, 2013 at 2:16 AM
Daniele,
What type of field is Category? Is it a multi-select choice field (shows up as checkboxes)?
Thanks,
Kit
Sep 27, 2013 at 6:51 AM
Dear Kit,
no.....it's a simple "Single Line of Text". with default parameters (Required NO, 255 chars, Text).
Daniele
Coordinator
Sep 27, 2013 at 7:47 AM
I just noticed... you probably want your code to run after the page is loaded. Your if block is outside the load event.
<script type="text/javascript" src="../../Javascript/prototype.js"></script>
<script type="text/javascript" src="../../Javascript/SPUtility.js"></script>

<script type="text/javascript">
Event.observe(window,'load',function(){

    SPUtility.GetSPField('Title').Hide();
    SPUtility.GetSPField('Assigned Owner').Hide();
    SPUtility.GetSPField('Target Audiences').Hide();
    SPUtility.GetSPField('Exempt from Policy').Hide();
    SPUtility.GetSPField('Original Expiration Date').Hide();
    SPUtility.GetSPField('Expiration Date').Hide();

    if (SPUtility.GetSPField('Category').GetValue() === 'User') {
        SPUtility.GetSPField('Mailbox description').Hide();
        SPUtility.GetSPField('Users List').Hide();
        SPUtility.GetSPField('Send As option').Hide();
        SPUtility.GetSPField('External Surname').Hide();
        SPUtility.GetSPField('External Name').Hide();
        SPUtility.GetSPField('External email').Hide();
        SPUtility.GetSPField('Start Date').Hide();
        SPUtility.GetSPField('End Date').Hide();
    }

});
</script>
Sep 27, 2013 at 8:02 AM
Kit you were right.... but it doesn't work anyway!

I tried removing the IF statement (in case I miswrote the code), and it works: all fields were hidden.

With current IF I receive an error:
'this.textbox' is null or isn't an object
SPUtility.js Line: 443
Code: 0    Characther: 4
Coordinator
Sep 27, 2013 at 8:12 AM
Woops! It sounds like that could be an issue... next step I'd like to reproduce the issue.

Can you tell me what version of SharePoint (2007, 2010, 2013) you are using? Also, can you tell me the version number that shows up after "Version:" at the top of SPUtility.js?
Sep 27, 2013 at 8:14 AM
Sure!
I'm using SP 2007 and SPUtility.js is version 0.8.2.

Thanks.
Coordinator
Sep 29, 2013 at 6:09 AM
Daniele,
I'm having trouble reproducing the issue. Is this a normal SharePoint list? Do you have other javascript running on the page?
Thanks,
Kit
Sep 30, 2013 at 7:01 AM
Dear Kit,
the Sharepoint is a "normal" custom list with "normal" fields. But - yes - there's some javascript code running behind dispform.aspx. Under the form I have the CEWP with javascript calling sputility.js for these hiding needs, and under there's another CEWP with javascript needed for hiding the New, Edit and Delete buttons.
This java is like this:
_spBodyOnLoadFunctionNames.push("HideNewItem");

//hide the new item menu

function HideNewItem()

{
      var tables = document.getElementsByTagName("a");
      for(var i=0; i< tables.length; i++)
      {             
         if((tables[i].title.toLowerCase()=="new item"))
         {
            var newElem = tables[i];
            newElem.parentElement.parentElement.style.display="none";
         }
      }             
}
Coordinator
Sep 30, 2013 at 2:31 PM
Ohhh I think I see the issue. You have your code running on DispForm (not NewForm or EditForm) and you want to get the value of the Category field to show/hide other fields.

I think the problem right now is SPUtility.js doesn't support GetValue on DispForm (yet?).

As a workaround, can you try this:
<script type="text/javascript" src="../../Javascript/prototype.js"></script>
<script type="text/javascript" src="../../Javascript/SPUtility.js"></script>

<script type="text/javascript">
Event.observe(window,'load',function(){

    SPUtility.GetSPField('Title').Hide();
    SPUtility.GetSPField('Assigned Owner').Hide();
    SPUtility.GetSPField('Target Audiences').Hide();
    SPUtility.GetSPField('Exempt from Policy').Hide();
    SPUtility.GetSPField('Original Expiration Date').Hide();
    SPUtility.GetSPField('Expiration Date').Hide();

    if (SPUtility.GetSPField('Category').LabelRow.down(0).next('td').getTextContent().strip() === 'User') {
        SPUtility.GetSPField('Mailbox description').Hide();
        SPUtility.GetSPField('Users List').Hide();
        SPUtility.GetSPField('Send As option').Hide();
        SPUtility.GetSPField('External Surname').Hide();
        SPUtility.GetSPField('External Name').Hide();
        SPUtility.GetSPField('External email').Hide();
        SPUtility.GetSPField('Start Date').Hide();
        SPUtility.GetSPField('End Date').Hide();
    }

});
</script>
Note: The only line I've changed is the IF statement.

Let me know if that works!
Thanks,
Kit
Coordinator
Sep 30, 2013 at 2:36 PM
Also, I've created a new feature here so I don't lose track.
Sep 30, 2013 at 2:38 PM
Kit, you're a genius!
Now it works as expected!!
Thank you.

Daniele
Nov 12, 2014 at 9:13 AM
Hi Kit

I try to do the same Thing but it doesn't work. The fields don't hide. Maybe you can help me, here is my code:
<script src="/csa/SiteCollectionDocuments/jquery-1.11.1.min.js" type="text/javascript"></script> 
<script src="/csa/SiteCollectionDocuments/sputility.min.js" type="text/javascript"></script> 
<script type="text/javascript">
Event.observe(window,'load',function(){

     var eventbroschure = SPUtility.GetSPField('Eventbroschüre 105x148 mm');
     var lieferterminevent = SPUtility.GetSPField('Liefertermin Eventbroschüre');
     var stuckzahlevent = SPUtility.GetSPField('Stückzahl Eventbroschüre');
     var plakat = SPUtility.GetSPField('Plakat');
     var lieferterminplakat = SPUtility.GetSPField('Liefertermin Plakat');
     var format700 = SPUtility.GetSPField('Format 700x1000mm');
     var sujet700 = SPUtility.GetSPField('Sujet 700x1000mm');
     var stuckzahl700 = SPUtility.GetSPField('Stückzahl 700x1000mm');
     var A1 = SPUtility.GetSPField('Format A1');  
     var formatA1 = SPUtility.GetSPField('Format (A1)');   
     var sujetA1 = SPUtility.GetSPField('Sujet (A1)');  
     var stuckzahlA1 = SPUtility.GetSPField('Stückzahl (A1)');  
     var A2 = SPUtility.GetSPField('Format A2');  
     var formatA2 = SPUtility.GetSPField('Format (A2)');   
     var sujetA2 = SPUtility.GetSPField('Sujet (A2)');  
     var stuckzahlA2 = SPUtility.GetSPField('Stückzahl (A2)');
     var A3 = SPUtility.GetSPField('Format A3');  
     var formatA3 = SPUtility.GetSPField('Format (A3)');   
     var sujetA3 = SPUtility.GetSPField('Sujet (A3)');  
     var stuckzahlA3 = SPUtility.GetSPField('Stückzahl (A3)');    
     var A4 = SPUtility.GetSPField('Format A4');  
     var formatA4 = SPUtility.GetSPField('Format (A4)');   
     var sujetA4 = SPUtility.GetSPField('Sujet (A4)');  
     var stuckzahlA4 = SPUtility.GetSPField('Stückzahl (A4)');
     var gutschein = SPUtility.GetSPField('Gutschein');  
     var liefertermingutschein = SPUtility.GetSPField('Liefertermin Gutschein');
     var seitengutschein = SPUtility.GetSPField('Seiten Gutschein');
     var sujetgutschein = SPUtility.GetSPField('Sujet Gutschein');
     var stuckzahlgutschein = SPUtility.GetSPField('Stückzahl Gutschein');    
     var flyer = SPUtility.GetSPField('Flyer');  
     var formatflyer = SPUtility.GetSPField('Format Flyer');
     var seitenflyer = SPUtility.GetSPField('Seiten Flyer');
     var lieferterminflyer = SPUtility.GetSPField('Liefertermin Flyer');
     var sujetflyer = SPUtility.GetSPField('Sujet Flyer');                             
     var stuckzahlflyer = SPUtility.GetSPField('Stückzahl Flyer');  
     var talon = SPUtility.GetSPField('Talon');
     var liefertermintalon = SPUtility.GetSPField('Liefertermin Talon');
     var sujettalon = SPUtility.GetSPField('Sujet Talon');
     var stuckzahltalon = SPUtility.GetSPField('Stückzahl Talon');
     var detailstalon = SPUtility.GetSPField('Details');
     var inserat = SPUtility.GetSPField('Inserat');
     var liefertermininserat = SPUtility.GetSPField('Liefertermin Inserat');
     var formatinserat = SPUtility.GetSPField('Format Inserat');
     var sujetinserat = SPUtility.GetSPField('Sujet Inserat');
     var farbeinserat = SPUtility.GetSPField('Farbe');   
     var adscreen = SPUtility.GetSPField('AD Screen'); 
     var lieferterminadscreen = SPUtility.GetSPField('Liefertermin AD Screen'); 
     var sujetadscreen = SPUtility.GetSPField('Sujet AD Screen'); 
     var roulette = SPUtility.GetSPField('Roulette Display');
     var lieferterminroulette = SPUtility.GetSPField('Liefertermin Roulette Display');
     var sujetroulette = SPUtility.GetSPField('Sujet Roulette Display');
     var medienmitteilung = SPUtility.GetSPField('Medienmitteilung');
     var eventsundversandtermine = SPUtility.GetSPField('Events und Versandtermine');
     var radiospots = SPUtility.GetSPField('Radiospots');
     var eventsangebot = SPUtility.GetSPField('Events/Angebot, Liefertermin');
     var qrcode = SPUtility.GetSPField('QR Code');
     var werbemittel = SPUtility.GetSPField('Werbemittel');
     var ziellink = SPUtility.GetSPField('Ziellink');
     var website = SPUtility.GetSPField('SC Website (intern)');
     var onlinemarketing = SPUtility.GetSPField('Online Marketing (extern)');
     var magazinzeitung = SPUtility.GetSPField('Magazin/Zeitung');
     var vorgangsstatus = SPUtility.GetSPField('Vorgangsstatus');
     var faelligkeitsdatum = SPUtility.GetSPField('Fälligkeitsdatum');
     var briefingcheck = SPUtility.GetSPField('Briefing Check SCS');
     var zugewiesenan = SPUtility.GetSPField('Zugewiesen an');
          
           if(eventbroschure.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') 
            {
            lieferterminevent.Hide();
            stuckzahlevent.Hide();
            }
       
   
          if(plakat.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            lieferterminplakat.Hide();
                                       }
       
        if(format700.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            sujet700.Hide();
            stuckzahl700.Hide();
        }
      
         if(A2.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            formatA2.Hide();
            sujetA2.Hide();
            stuckzahlA2.Hide();
        }
               if(A1.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            formatA1.Hide();
            sujetA1.Hide();
            stuckzahlA1.Hide();
        }

        
         if(A3.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            formatA3.Hide();
            sujetA3.Hide();
            stuckzahlA3.Hide();
        }
       
        if(A4.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            formatA4.Hide();
            sujetA4.Hide();
            stuckzahlA4.Hide();
        }
       
        if(gutschein.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            liefertermingutschein.Hide();
            seitengutschein.Hide();
            sujetgutschein.Hide();
            stuckzahlgutschein.Hide();        }
       
         if(flyer.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            formatflyer.Hide();
            lieferterminflyer.Hide();
            seitenflyer.Hide();
            sujetflyer.Hide(); 
            stuckzahlflyer.Hide();       }
       
        if(talon.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            liefertermintalon.Hide();
            sujettalon.Hide();
            stuckzahltalon.Hide();
            detailstalon.Hide(); 
                                     }
      
         if(inserat.GetValue() === 'nein') {
            liefertermininserat.Hide();
            magazinzeitung.Hide();
            formatinserat.Hide();
            sujetinserat.Hide();
            farbeinserat.Hide(); 
                                     }
       
         if(adscreen.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            lieferterminadscreen.Hide();
            sujetadscreen.Hide();
                                                 }
      
         if(roulette.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            lieferterminroulette.Hide();
            sujetroulette.Hide();
                                                 }
       
         if(medienmitteilung.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            eventsundversandtermine.Hide();
                                                  }
        
         if(radiospots.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            eventsangebot.Hide();
                                                  }
         if(qrcode.LabelRow.down(0).next('td').getTextContent().strip() === 'nein') {
            werbemittel.Hide();
            ziellink.Hide();
                                                  }
        

});

</script>
Thanky you!
Melanie
Coordinator
Nov 23, 2014 at 4:53 PM
Melanie,
Sorry for the late reply, been very busy. Is the value that is displayed in your field really "nein". It might be "Nein" and isn't working because the case is different.
Thanks,
Kit
Dec 2, 2014 at 1:34 PM
Hi Kit
No worries - thank you for your response!
Yes, the value is "nein" and not "Nein"... I really don't know what I'm doing wrong.
Thanks,
Melanie
Feb 12, 2015 at 11:26 AM
Edited Feb 12, 2015 at 11:27 AM
Hey Kit

This:
if (SPUtility.GetSPField('Category').LabelRow.down(0).next('td').getTextContent().strip() === 'User') {
doesn't seem to work for field type Radio button.
The Debugger doesn't accept "down".

Can you help me out here?

Thanks in advance!
Coordinator
Feb 13, 2015 at 2:48 AM
Hey Melanie,
I am sorry, I think I must have mixed up the code.

Try this:
SPUtility.GetSPField('Radio Buttons').LabelRow.children().next().text().trim();

Thanks,
Kit
Feb 13, 2015 at 6:45 AM
Perfect! Now it works! Thank you.

How does it work with multiselect checkboxes? If I have selected two values, the IF-statement doesn't work.

Thanks for your response,
Melanie
Coordinator
Feb 13, 2015 at 2:10 PM
Assuming we're still on DispForm here....
var value = SPUtility.GetSPField('Checkboxes').LabelRow.children().next().text().trim(); 
// value is something like "Alpha; Charlie; Delta; Echo"
// where Alpha is one of the checkbox choices separated by "; "
if (value.indexOf('Delta') !== -1) {
    // was found!
} else {
    // not found...
}
Feb 26, 2015 at 6:19 AM
Works perfectly, your a Genius!

Thanks
Feb 26, 2015 at 10:17 AM
Edited Feb 26, 2015 at 10:19 AM
Hi there,

I am trying to hide fields in a SP2013 Edit Form on a standard custom list based on a value in another field on the same form, but before getting to that stage I thought I would test if I could simply hide a field in the Edit Form.

I have had no success in being able to hide the field. I checked that my install was working correctly with the "Hello World" test, but the EditForm will not hide my field called "Week Ending"

Any insights..

<script src="/SiteAssets/SPUTILITY/jquery-1.11.2.js"></script>
<script src="/SiteAssets/SPUTILITY/sputility.min.js"></script>
<script>
<script type="text/javascript"> // wait for the window to load Event.observe(window).load(function () { SPUtility.GetSPField('Week Ending').Hide(); }); </script> ====================================================

Appreciate any help or thoughts as I am learning as I go and have got stuck at this point.

Thanks in advance.
Coordinator
Feb 26, 2015 at 2:14 PM
RobK78,
Can you please move this to a new discussion?
Thanks,
Kit