0

When adding a document I want to show or hide colums based on a dropdown selection. In this case, the value of "Document type" is leading.

If a Travel Document (Column name "Travel Documents") is selected another column ("Employee") should become visible.

Therefore I've created following code with help from StackExchange:

<script src="/Shared%20Documents/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">

// Execute the following JavaScript after the page has fully loaded, when it's ".ready"
$(document).ready(function(){

//Define which columns to show/hide by default
$('nobr:contains("Employee")').closest('tr').hide();

//Show/hide columns based on Drop Down Selection 
$("select[title='Document type']").change(function() {
if ($("select[title='Document type']").val() == "Travel Documents") {
$('nobr:contains("Employee")').closest('tr').show();
else if($("select[title='Document type']").val() != "Travel Documents"){
$('nobr:contains("Employee")').closest('tr').hide();
}
});
});
</script>

For some reason it does not work at all and the Employee dropdown is Always shown. When I delete the next part:

else if($("select[title='Document type']").val() != "Travel Documents"){
$('nobr:contains("Employee")').closest('tr').hide();

the Employee dropdown is hidden, but I can't get it back with selecting the right Document type.

What am I doing wrong?

  • which SharePoint Version you are using ? The HTML code for 2010 and 2013 is different and the above approach does not works in SP2013 – Akarsh Gupta Jan 13 '16 at 13:11
  • So if Travel Document is selected in the Document Type column, the Employee column should appear. Else, it should be hidden? – Kaylee Chatham Jan 13 '16 at 15:42
  • @Akarsh Gupta: I'm using 2013, so that's probably were the problem lies... – Luna08 Jan 14 '16 at 7:39
  • @Kaylee Chatham: You are correct. – Luna08 Jan 14 '16 at 7:40
0

This is what I use, and it works. I've adjusted the code for your columns. You can also add additional columns that should be hidden, unless Travel Documents is selected, as well.

<script language="javascript" type="text/javascript" src="JQUERY REFERENCE URL"></script>
<script type="text/javascript">

function CheckDropdown(Drop_Column,Hide_Column)
{
var DropDownColumn=$("select[title='"+Drop_Column+"']");

//Value that should be selected in the drop down
if ($("select[title='"+Drop_Column+"']option:selected").text() == "Travel Document")
{
HideColumn(Hide_Column,"False");
} 
else
{
HideColumn(Hide_Column,"True");

} 

}
function HideColumn(Column,IsHide)
{    
    if(IsHide=="True")
    {  
        $('nobr:contains("'+Column+'")').closest('tr').hide();
    }
    else
    { 
        $('nobr:contains("'+Column+'")').closest('tr').show();
    }
}

$(document).ready(function(){

//  Hide fields that are used for the selected item. 
    var DocTypeField = $("select[title='Document Type']");

    CheckDropdown("Document Type", "Employee Name")
//  CheckDropdown("Document Type", "Other Column")
//  etc.


// DocumentType Field change event - show fields for travel docs
    DocTypeField.change(function() {
        var val = $(this).find("option:selected").text();// Text of DocType field

            if (val == "Travel Document")
            {
                HideColumn("Employee Name","False");
//              HideColumn("Other Column","False");
//              ect.
            } 
            else
            {
                HideColumn("Employee Name","True");
//              HideColumn("Other Column","True");
//              etc.
            }
            });

});



</script> 
  • It seems to me the DocTypeField.change function is not working. As a simple test I've added an alert behind var val = $(this).find("option:selected").text(); and I never get the alert. Therefore it seems it stops there somewhere. – Luna08 Jan 15 '16 at 13:00
  • Try it now? It looks like I switched a couple fields accidentally. Edits made. – Kaylee Chatham Jan 15 '16 at 15:06
  • For some reason it still won't work. It seems the DocTypeField.change(function() { still doesn't work. up until this code it seems to work, nothing is triggered after it. Just for me to understand the code better: How does this code work: DropDownColumn=$("select[title='"+Drop_Column+"']"); How does it know to look at the "Document type" column? Is it via the "+Drop_Column+"? Maybe some more understanding will help me getting the last bits... – Luna08 Jan 18 '16 at 14:58
  • I think I now where it goes wrong, unfortunately I don't have the solution. With this code: var test2=$("select[title='"+Drop_Column+"']option:selected").text(); alert(test2); it should return the value in the dropdown, however it shows an empty field. It already shows the alert before the page has been loaded completely (before I actually see the dropdowns). I've added the code after the $(document).ready(function(){, so I don't see why it does what it does... $(window).load(function() { doesn't work neither – Luna08 Jan 22 '16 at 7:25
0

I will suggest to use SPUtility.js. See the below code, Not tested it but it should work you can modify it according to your column name. Please do not forget to include SPUtility.js as reference on your code.

$(document).ready(function () {
// Get a single select dropdown field
var TravelDocField = SPUtility.GetSPField('Travel Documents');

// create a function to show or hide Employee based on Travel Document's value
var showOrHideField = function() {
    var TravelDocFieldValue = TravelDocField.GetValue();
    // Hide the City field if the selected value is Other
    if(TravelDocFieldValue === 'Other') {
        SPUtility.HideSPField('Employee Name');
    }
    else {
        SPUtility.ShowSPField('Employee Name');
    }
};

// run at startup (for New form)
showOrHideField();

// make sure if the user changes the value we handle it
$(TravelDocField.Dropdown).on('change', showOrHideField);

});

  • Thank you for your answer, however I don't get it to work for some reason. I've changed the code to match my column, however some things don't make sense to me (my lack of experience I assume). I think the TravelDocField should be "Document type" (name of the column in which I can select "Travel Documents". However I don't see where the code then looks at the "Travel Documents" value? Employee name should be Employee (as this is the column name containing the names of the employees). – Luna08 Jan 14 '16 at 7:44
  • I'm guessing it has something to do with SPUtility not loading. As I try this code: $(window).load(function () SPUtility.HideSPField('Employee'); }); It won't hide the column either. If I replace it with a simple alert(); it will show the alert. Minimal Download Strategy has been deactivated as I understood this may cause issues with SPUtility. – Luna08 Jan 14 '16 at 10:26
  • Can you please check in develepor's tool by pressing F12, then go to sources and check is SPUtilty is loaded or not. Also Check your console for any errors. As i have used this approach for lots of places and it works good. – Akarsh Gupta Jan 15 '16 at 9:44
  • I will check, again thank you for your help. Does it matter which version of jquery I use? At the moment I have a folder files which includes jquery-1.3.2.min.js, my reference url is <script language="javascript" src="../../files/jquery-1.3.2.min.js" type="text/javascript"></script> – Luna08 Jan 15 '16 at 10:09
  • The JQuery version is fine, I cannot say about the reference path. Please check in Console and Sources. – Akarsh Gupta Jan 15 '16 at 10:13
0

@Akarsh I have it working now with this code:

$(document).ready(function(){
CheckDropdown("Document Type", "Employee")
});


$(document).ready(function(){
$(":input[title='Document Type']").change(function(e){
var val = $(this).val();
if (val == "10")
        {
            HideColumn("Employee","False");
        } 
else
        {
            HideColumn("Employee","True");
        }

});

$('#Document Type').trigger('change');
});


function HideColumn(Column,IsHide)
{    
if(IsHide=="True")
{  
    $('nobr:contains("'+Column+'")').closest('tr').hide();
}
else
{ 
    $('nobr:contains("'+Column+'")').closest('tr').show();
}
}   


function CheckDropdown(Drop_Column,Hide_Column)
{
var DropDownColumn=$("select[title='"+Drop_Column+"']");

//Value that should be selected in the drop down
if ($("select[title='"+Drop_Column+"']option:selected").text() == "10")
{
HideColumn(Hide_Column,"False");
} 
else
{
HideColumn(Hide_Column,"True");
} 
}

</script> 

As you can see I've used several examples and mixed them a little, I will check your code again.

The problem seems to be caused by activating "Require that this column contains information" causes the .change function not to work. At this point I have no idea why, however I'm sure the answer can be found on StackExchange somewhere :)

Thank you for all your help

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.