I have a dropdown list contain values, last value is called "Others" when its selected i want to show a new textbox under the field and if its not selected it should be hidden.

I have followed this tutorial: SPUtility

After following the tutorial step by step i get an error in the console:

Uncaught Unable to get a SPField named Suppliers

Since Suppliers column is already there and i mentioned it in the code in the right way, and i have created another column for the textbox called "Other Title".

This is the code:

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="/sites/devsite/Style%20Library/sputility.js"></script>
 $(document).ready(function ()
{ // Get a the choice field
var choiceField = SPUtility.GetSPField('Suppliers');
// Hide the target fields in form load
SPUtility.GetSPField('Other Title').Hide();
// create a function to show or hide a field based on the selected choice Field value
var ShowHideField = function() {
var selectedFieldValue = choiceField.GetValue();
// Hide the 'Other Title' field if the selected value is 'Other'
if(selectedFieldValue != 'Others') {
SPUtility.GetSPField('Other Title').Hide(); }
else { SPUtility.GetSPField('Other Title').Show(); } };
// attach the function to choice field
$( choiceField.Dropdown).on('change', ShowHideField); });

And here is still showing even when i select other value than "Others": Still showing

The type of the list is Classic Experience so its possible to achieve it ? What i am doing wrong ?

Thank you!

  • 1
    I believe the form you attached is in modern experience. You can set your list experience to classic from: List Settings-->Advance Settings-->List experience (Set to 'Classic experience'). Sep 20, 2019 at 8:05

1 Answer 1


Edit the New form page and insert a Content Editor Web part in this page, paste the JS code below in it:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
function StartFunction()   
   $('nobr:contains("Other Title")').closest('tr').hide();
    $("select[title='Suppliers']").change(function() {
    if ($("select[title='Suppliers']").val() != "Others")
        $('nobr:contains("Other Title")').closest('tr').hide();
        $('nobr:contains("Other Title")').closest('tr').show();

It works for Classic experience, your screenshot is in modern experience, the JS code will not work in modern view. It you want to edit the modern new form, you can customize using PowerApps.

  • Hello @Hellofiona_MSFT, i change it to classic experience but when i click on new item the Other Title still appear on pageload but when i change the values it disappear is it possible to make it disappear on pageload ?i.imgur.com/rLj8qW2.png Thank you!
    – SmithBZ
    Sep 20, 2019 at 8:28
  • 1
    Hi julien, i edit the script you can check it. Sep 20, 2019 at 9:32
  • Thank you very much ! @Hellofiona_MSFT
    – SmithBZ
    Sep 20, 2019 at 9:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.