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.

Improve this question
2
  • 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. Commented Oct 5, 2016 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. Commented Oct 5, 2016 at 21:36

1 Answer 1

Reset to default
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

Improve this answer
9
  • 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? Commented Oct 7, 2016 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] ? Commented Oct 7, 2016 at 22:50
  • basically if [Test Header] is showing, I would want it to be able to show/hide [Col3]. Does that make sense? Commented Oct 8, 2016 at 17:19
  • 1
    what's the type of [Test Header] ? Commented Oct 8, 2016 at 19:06
  • Its a choice field Commented Oct 9, 2016 at 1:58

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.