0

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>   
0

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.

  • Also, as a best practice, use ExecuteOrDelayUntilScriptLoaded instead of document.ready when you're customizing Sharepoint forms. – GVIrish Feb 13 '18 at 17:42
  • THANK YOU! I really appreciate the guidance and the help. Thank you again! – CGK Hancock Feb 15 '18 at 15:42

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.