Show/Hide in New form based on dropdown selection jQuery

Question

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>
<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); });
</script>

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

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

Thank you!

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">
_spBodyOnLoadFunctionNames.push("StartFunction");   
function StartFunction()   
{   
   $('nobr:contains("Other Title")').closest('tr').hide();
}  
$(document).ready(function(){
    $("select[title='Suppliers']").change(function() {
    if ($("select[title='Suppliers']").val() != "Others")
    {
        $('nobr:contains("Other Title")').closest('tr').hide();
    }
    else
    {
        $('nobr:contains("Other Title")').closest('tr').show();
    }
   });
});
</script>

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.