SharePoint 2013 Custom New Form ASPX not hiding fields on load

Question

I created a custom form that displays questions based on Drop Down Selection. In this case if the user selects Ad from the Drop Down a few questions are hidden or shown. This functionality is working correctly.

The issue I am running into is when the Form initially loads: all the hidden fields are displayed until a drop down selection is chosen. I attempted to use sputility, but the SPUtility is not working with my custom form. Anybody have any suggestions on how to resolve?

Below is my current code.

<script src="https://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript"></script><script type="text/javascript">
$(document).ready(function(){
//Show/hide columns based on Drop Down Selection
$("select[title='Project Type']").change(function() {
if ($("select[title='Project Type']").val() != "Ad")
{
$('nobr:contains("Vendor Contact")').closest('tr').hide();
$('nobr:contains("Sponsorship")').closest('tr').hide();
$('nobr:contains("Level")').closest('tr').hide();
}
else
{
$('nobr:contains("Vendor Contact")').closest('tr').show();
$('nobr:contains("Sponsorship")').closest('tr').show();
$('nobr:contains("Level")').closest('tr').show();
}
  if ($("select[title='Project Type']").val() != "Focused On")
{
$('nobr:contains("Focus")').closest('tr').hide();
}
else
{
$('nobr:contains("Focus")').closest('tr').show();
}
 if ($("select[title='Project Type']").val() != "Pitch")
{
$('nobr:contains("Pitch Company")').closest('tr').hide();
}
else
{
$('nobr:contains("Pitch Company")').closest('tr').show();
}
 if ($("select[title='Project Type']").val() != "Other")
{
$('nobr:contains("If Other")').closest('tr').hide();
}
else
{
$('nobr:contains("If Other")').closest('tr').show();
}

});
});
</script>   

Answer 1

The reason it's not hiding anything on load, is because your logic for showing/hiding rows is set only to run when the Project Type dropdown changes. To have it run as soon as the page loads you need to execute your show/hide logic before or after your .change event wiring:

$(document).ready(function(){
    //Show/hide columns based on Drop Down Selection on page load
    ShowHideFields();
    $("select[title='Project Type']").change(function() {
        ShowHideFields();//only runs on dropdown change
    });
});

function ShowHideFields() {
        if ($("select[title='Project Type']").val() != "Ad") {
            $('nobr:contains("Vendor Contact")').closest('tr').hide();
            $('nobr:contains("Sponsorship")').closest('tr').hide();
            $('nobr:contains("Level")').closest('tr').hide();
        }
        else {
            $('nobr:contains("Vendor Contact")').closest('tr').show();
            $('nobr:contains("Sponsorship")').closest('tr').show();
            $('nobr:contains("Level")').closest('tr').show();
        }
        if ($("select[title='Project Type']").val() != "Focused On") {
            $('nobr:contains("Focus")').closest('tr').hide();
        }
        else {
            $('nobr:contains("Focus")').closest('tr').show();
        }
         if ($("select[title='Project Type']").val() != "Pitch") {
            $('nobr:contains("Pitch Company")').closest('tr').hide();
        }
        else {
            $('nobr:contains("Pitch Company")').closest('tr').show();
        }
        if ($("select[title='Project Type']").val() != "Other") {
            $('nobr:contains("If Other")').closest('tr').hide()
        }
        else {
            $('nobr:contains("If Other")').closest('tr').show();
        }
}

Also, if you don't want to have users see the hidden fields before the document.ready executes, hide the content by default using CSS, then show it if the conditions are met on load in your javascript. That way people never see stuff they're not supposed to see.

The fastest way to do this is to modify the form directly. So you could go to the desired rows in your form(s) and make it:

<tr style="display:none">

Or you can do it by adding the id tag to the desired rows, then setting those id's to display:none in a css block.