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?

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

3 Answers 3

Reset to default
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>
Improve this answer
4
  • 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. Commented Jan 15, 2016 at 13:00
  • Try it now? It looks like I switched a couple fields accidentally. Edits made. Commented Jan 15, 2016 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... Commented Jan 18, 2016 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 Commented Jan 22, 2016 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);

});

Improve this answer
19
  • 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). Commented Jan 14, 2016 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. Commented Jan 14, 2016 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. Commented Jan 15, 2016 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> Commented Jan 15, 2016 at 10:09
  • The JQuery version is fine, I cannot say about the reference path. Please check in Console and Sources. Commented Jan 15, 2016 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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.