Hide/Show field in EditForm based on already existing dropdown value
-
14-02-2021 - |
Question
I'm totally new to SP and JS, so sorry in advance for lame question. I find situation similiar to mine here - Conditionally Hide/Show Field on Custom Edit Form but can't make it work.
I have an Edit form where dropdown field (Field A) is existed. There are two other fields (Field B and Field C) which I want to hide from form when Field A is set to specific value.
I can change Fields B and C visibility based on changing Field A using code below (this part works fine) but I also need Fields B and C hidden/shown without changing Field A but based on its current value - when EditForm just initially loads.
<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function () {
$("select[title='Field A']").change(function () {
console.log("selection changed", $("[title='Field A'] option:selected").text());
if ($("[title='Field A'] option:selected").text() != "X") {
$('nobr:contains("Field B")').closest('tr').hide();
$('nobr:contains("Field C")').closest('tr').hide();
}
else {
$('nobr:contains("Field B")').closest('tr').show();
$('nobr:contains("Field C")').closest('tr').show();
}
});
});
</script>
All I need here is Field B and C are hided immediately when form is initially loaded and Field A was already set !=X (without changing Field A).
If you can provide the full code I will highly appreciate it.
Solution
You could add css style to hide Filed B and Field C.
selector{
display:none
}
Or
<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">
$(document).ready(function () {
$('nobr:contains("Field B")').closest('tr').hide();
$('nobr:contains("Field C")').closest('tr').hide();
$("select[title='Field A']").change(function () {
console.log("selection changed", $("[title='Field A'] option:selected").text());
if ($("[title='Field A'] option:selected").text() != "X") {
$('nobr:contains("Field B")').closest('tr').hide();
$('nobr:contains("Field C")').closest('tr').hide();
}
else {
$('nobr:contains("Field B")').closest('tr').show();
$('nobr:contains("Field C")').closest('tr').show();
}
});
});
</script>
According to your code, hiding Field B and Filed A when Field A is not equal to X does not match your description.
Updated code:
<script type="text/javascript">
$(document).ready(function () {
showOrHide() ;
$("select[title='Field A']").change(function () {
showOrHide();
});
});
function showOrHide(){
if ($("[title='Field A'] option:selected").text() != "X") {
$('nobr:contains("Field B")').closest('tr').hide();
$('nobr:contains("Field C")').closest('tr').hide();
}
else {
$('nobr:contains("Field B")').closest('tr').show();
$('nobr:contains("Field C")').closest('tr').show();
}
}
</script>