I am having a requirement to hide the list of questions need to hide based on drop down selected in SharePoint 2013 survey list. Can anyone provide solution to achieve the requirement.
Thanks in advance.
SharePoint Stack Exchange is a question and answer site for SharePoint enthusiasts. It only takes a minute to sign up.
Sign up to join this communityI am having a requirement to hide the list of questions need to hide based on drop down selected in SharePoint 2013 survey list. Can anyone provide solution to achieve the requirement.
Thanks in advance.
You can use JavaScript
For example:
There is a drop down field named "TestChoice" with "Test1" and "Test2" choices. If the "Test1" is selected, hide "test2" text question. If the "Test2" is selected, hide "test1" text question
Here is the demo:
<script src="https://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
var title ="TestChoice";
var currentValue = $("select[title='"+ title +"']").val();
if(currentValue != ""){
if(currentValue == "Test1"){
// hide question title
$(".ms-formlabel:contains('test2')").closest("tr").hide();
//hide question
$('input[title="test2"]').closest("tr").hide();
//show
$(".ms-formlabel:contains('test1')").closest("tr").show();
$('input[title="test1"]').closest("tr").show();
} else if(currentValue == "Test2"){
// hide question title
$(".ms-formlabel:contains('test1')").closest("tr").hide();
//hide question
$('input[title="test1"]').closest("tr").hide();
//show
$(".ms-formlabel:contains('test2')").closest("tr").show();
$('input[title="test2"]').closest("tr").show();
}
}
//the change event of the drop down list
$("select[title='"+ title +"']").change(function(){
//get the current selected value
var selected = $(this).val();
if(selected == "Test1"){
// hide question title
$(".ms-formlabel:contains('test2')").closest("tr").hide();
//hide question
$('input[title="test2"]').closest("tr").hide();
//show
$(".ms-formlabel:contains('test1')").closest("tr").show();
$('input[title="test1"]').closest("tr").show();
} else if(selected == "Test2"){
// hide question title
$(".ms-formlabel:contains('test1')").closest("tr").hide();
//hide question
$('input[title="test1"]').closest("tr").hide();
//show
$(".ms-formlabel:contains('test2')").closest("tr").show();
$('input[title="test2"]').closest("tr").show();
}
});
});
</script>
Update:
To hide/show a Choice field,
First, use F12 to get the id of one of choice value element.
Then, use the script to hide/show this Choice field.
// hide the Choice field
$("input[id='ctl00_ctl41_g_79ea20a5_47f5_42f7_9ccb_72d2f5ae2047_ctl00_ctl02_ctl04_ctl00_ctl00_ctl04_ctl00_ctl00']").closest('table').hide();
//display the Choice field
$("input[id='ctl00_ctl41_g_79ea20a5_47f5_42f7_9ccb_72d2f5ae2047_ctl00_ctl02_ctl04_ctl00_ctl00_ctl04_ctl00_ctl00']").closest('table').show();
You can use the scripts using a Script Editor web part in the new form and edit form (NewForm.aspx and EditFprm.aspx). Edit the page and add a Script Editor web part, enter the code into it.