1

I am currently using the following jquery code to help hide fields based on values from another field:

<script rc="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $("select[title='Col1']").change(function() {
        if ($("select[title='Col1']").val() == "Option 1")
        {
            $('nobr:contains("Test Header")').closest('tr').hide();
            $('nobr:contains("Date")').closest('tr').hide();
        }
        else
        {
            $('nobr:contains("Test Header")').closest('tr').show();
            $('nobr:contains("Date")').closest('tr').show();
        }
    });
    });
</script>

What I need now is how to get this applied if the default value is 'Option 1'. For example: If the New Form opens and Col1 says 'Option 1' I would want Test Header and Date columns to be hidden.

I also need this on the Edit Form. So whatever was chosen in the New Form, the same hidden or not-hidden fields should carry over to the Edit Form.

  • 1
    Is the code you're using not working? If so, what is it doing that wrong, or are you getting an error? After formatting your code, it looks like you have an extra }); at the end. – Erin L Oct 5 '16 at 19:56
  • Erin, it is currently working, except when the form opens with a default value that should cause the action. It is also not working on the edit form unless the value is reselected. What M.Qassas posted below works great for what I am looking for. – Caleb Fortner Oct 5 '16 at 21:36
2

In this case, you should check in your code at load what's the current value of select[title='Col1']").val() as the following

if ($("select[title='Col1']").val() != "Option 1")
{
$('nobr:contains("Date")').closest('tr').hide();
$('nobr:contains("Test Header")').closest('tr').hide();
}
else
{
$('nobr:contains("Date")').closest('tr').show();
$('nobr:contains("Test Header")').closest('tr').show();
}

So the final code Should be

$(document).ready(function(){
if ($("select[title='Col1']").val() != "Option 1")
{
$('nobr:contains("Date")').closest('tr').hide();
$('nobr:contains("Test Header")').closest('tr').hide();
}
else
{
$('nobr:contains("Date")').closest('tr').show();
$('nobr:contains("Test Header")').closest('tr').show();
}

//Show/hide columns based on Drop Down Selection
$("select[title='Col1']").change(function() {
if ($("select[title='Col1']").val() != "Option 1")
{
$('nobr:contains("Date")').closest('tr').hide();
$('nobr:contains("Test Header")').closest('tr').hide();
}
else
{
$('nobr:contains("Date")').closest('tr').show();
$('nobr:contains("Test Header")').closest('tr').show();
}
});
});

For step by step guide with images check Show / Hide fields based on choice field selection using JQuery in SharePoint

  • I am trying to make it so [Col1] will show/hide [Date] and [Test Header], but then I would want [Test Header] to show/hide [Col3]. So basically [Col1] would be the first condition then [Test Header] the second. How would I embed that into this code? – Caleb Fortner Oct 7 '16 at 22:07
  • Hi @CalebFortner Is [Test Header] will be hidden with the first condition ? if yes , how it will do this I would want [Test Header] to show/hide [Col3] ? – Mohamed El-Qassas MVP Oct 7 '16 at 22:50
  • basically if [Test Header] is showing, I would want it to be able to show/hide [Col3]. Does that make sense? – Caleb Fortner Oct 8 '16 at 17:19
  • 1
    what's the type of [Test Header] ? – Mohamed El-Qassas MVP Oct 8 '16 at 19:06
  • Its a choice field – Caleb Fortner Oct 9 '16 at 1:58

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.