Show or Hide SharePoint List Form Fields based on Another Field’s Value using jQuery
What: Show or Hide a SharePoint list form field based on another field’s value.
How: Use Query script to show/hide the dependent field from the list form based on the current field’s value.
jQuery to Show or Hide Fields based on another Field Value:
//Place this code just below the place holder "PlaceHolderMain" in Custom List Form.
<script type="text/javascript" src="/_layouts/1033/jquery-1.4.4.min.js"></script> //Or Get refer it from "https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"
<script type="text/javascript">
$(document).ready(function()
{
//alert('jQuery Works');
//Hide Reason fields initially
$("textarea[title$='Question2Reason']").parent('span').parent('td').parent('tr').hide();
//Associate a function with Drop down change event
$("select[title$='Question 2:']").change(function()
{
if($(this).val()=='Yes')
{
$("textarea[title$='Question2Reason']").parent('span').parent('td').parent('tr').show();
}
else
{
$("textarea[title$='Question2Reason']").parent('span').parent('td').parent('tr').hide();
}
});
});
</script>
and the output: No value selected
Reason filed visible on selecting the drop-down value as: Yes
Reason filed is hidden on selecting the drop down value as: No
Instead, hide, If you want to Disable/Enable Fields, Use this code:
if($(this).val()=='Yes')
{
$("textarea[title$='Question2Reason']").attr('disabled', false);
}
else
{
$("textarea[title$='Question2Reason']").attr('disabled', true);
}
Related post: Disable “Save” Button Until User Selects “I Agree”
i tryed with this code
$(document).ready(function()
{
//alert(‘jQuery Works’);
//Hide Reason fields initially
$(“textarea[title$=’Вођа тима – одобрење’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();
//Associate a function with Drop down change event
$(“select[title$=’Обрађивач – одобрење’]”).change(function()
{
if($(this).val()==’Да’)
{
$(“textarea[title$=’Вођа тима – одобрење’]”).parent(‘span’).parent(‘td’).parent(‘tr’).show();
}
else
{
$(“textarea[title$=’Вођа тима – одобрење’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();
}
});
});
that hide another dropdown fieled but my code is not working. why?
Hai, i want to disable the email-recipient (person or sharepoint group ) column based on user selection yes or no…..i
f user select yes then it should display otherwise not.
src=”/SiteAssets/home-jquery/jquery1.4.4.min.js”
$(document).ready(function()
{
//alert(‘jQuery Works’);
//Hide Reason fields initially
$(“textarea[title$=’Assign to’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();
//Associate a function with Drop down change event
$(“select[title$=’IfAssign’]”).change(function()
{
if($(this).val()==’Yes’)
{
$(“textarea[title$=’Assign to’]”).parent(‘span’).parent(‘td’).parent(‘tr’).show();
}
else
{
$(“textarea[title$=’Aassign to’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();
}
});
});
please give me your suggestion please….
Use the code from: https://www.sharepointdiary.com/2013/09/disable-people-picker-lookup-fields-in-list-forms.html to hide People Picker Fields.
Helllo,
I tried with your code, but its won’t workign for me.
Can you tell me, from where did you take “Question2Reason” value?
Verify jQuery is working on your environment first by placing some javascript alerts. In the above code, It binds a function on Drop-down’s change event.
Yes, jQuery is working on my environment. I tried yours Disable “Save” Button Until User Selects “I Agree”.
Its working as it is. But its not working in my case.
I have one dropdown field “Project Status(Dropdown)” with New, Closed, Hold, Killed.
The another column is close date (Date and Time column). So when i select Closed or Hold or Killed only the close date to be show other wise its to be hide.
I implemented same your code but its not working.
********************************************************
My Code is:
((I put same your source “src=”/_layouts/1033/jquery-1.4.4.min.js”in Script))
$(document).ready(function()
{
$(“textarea[title$=’Close Date’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();
$(“select[title$=’Project Status’]”).change(function()
{
if($(this).val()==’Closed’)
{
$(“textarea[title$=’Close Date’]”).parent(‘span’).parent(‘td’).parent(‘tr’).show();
}
else
{
$(“textarea[title$=’Close Date’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();
}
});
});
****************************************
CAN YOU PLEASE HELP ME ON THIS.IT IS VERY URGENT.
To hide Date Time field, You should use: $(“input[title$=’Close Date’]”).parent(‘span’).parent(‘td’).parent(‘tr’).hide();