1

I have a content type with all the columns that I need. I am trying to use JQuery in order to hide or show the appropriate fields based on a dropdown field called "Category". By default, all fields except the category field should be hidden. after the user chooses an option from the dropdown menu, the appropriate fields will show. If the user changes category, the new fields will show, and the fields not relevant to the current category will be hidden.

With the following code, all fields show up in the page. I can't make them hide:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(document).ready(function () 
{   
$('nobr:contains("Computer Name")').closest("tr").hide();
$('nobr:contains("Contact Phone#")').closest("tr").hide();
$('nobr:contains("Printer IP")').closest("tr").hide();
$('nobr:contains("Issue/Description")').closest("tr").hide();
$('nobr:contains("DoD ID#")').closest("tr").hide();
$('nobr:contains("Justification")').closest("tr").hide();
$('nobr:contains("Port Type")').closest("tr").hide();
$('nobr:contains("Printer Model")').closest("tr").hide();
$('nobr:contains("Program Name")').closest("tr").hide();
$('nobr:contains("Room#")').closest("tr").hide();
$('nobr:contains("Building#")').closest("tr").hide();

$("select[title='Category']").change(function() {

    if("select[title='Category']").val() == "Computer Issue")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("Computer Name")').closest("tr").show();
    $('nobr:contains("Issue/Description")').closest("tr").show();

    }
    else if("select[title='Category']").val() == "Printer Issue / Installation")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("Printer Model")').closest("tr").show();
    $('nobr:contains("Printer IP")').closest("tr").show();
    $('nobr:contains("Computer Name")').closest("tr").show();
    $('nobr:contains("Issue/Description")').closest("tr").show();

    }
    else if("select[title='Category']").val() == "Program Instalation")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("Program Name")').closest("tr").show();
    $('nobr:contains("Computer Name")').closest("tr").show();
    $('nobr:contains("Justification")').closest("tr").show();
    }
    else if("select[title='Category']").val() == "Account Issue")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("DoD ID#")').closest("tr").show();
    $('nobr:contains("Issue/Description")').closest("tr").show();
    }
    else if("select[title='Category']").val() == "Network Access")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("Port Type")').closest("tr").show();
    $('nobr:contains("Justification")').closest("tr").show();
    }

});
</script>

My next try managed to get all fields to be hidden by default, but when I select an option from the dropdown menu, nothing happens:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(document).ready(function () 
{   

$('nobr:contains("Computer Name")').closest("tr").hide();
$('nobr:contains("Contact Phone#")').closest("tr").hide();
$('nobr:contains("Printer IP")').closest("tr").hide();
$('nobr:contains("Issue/Description")').closest("tr").hide();
$('nobr:contains("DoD ID#")').closest("tr").hide();
$('nobr:contains("Justification")').closest("tr").hide();
$('nobr:contains("Port Type")').closest("tr").hide();
$('nobr:contains("Printer Model")').closest("tr").hide();
$('nobr:contains("Program Name")').closest("tr").hide();
$('nobr:contains("Room#")').closest("tr").hide();
$('nobr:contains("Building#")').closest("tr").hide();

});
</script>

<script type="text/javascript">

$(document).ready(function () 
{  
 $("select[title='Category']").change(function() {

    if("select[title='Category']").val() == "Computer Issue")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("Computer Name")').closest("tr").show();
    $('nobr:contains("Issue/Description")').closest("tr").show();

    }
    else if("select[title='Category']").val() == "Printer Issue / Installation")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("Printer Model")').closest("tr").show();
    $('nobr:contains("Printer IP")').closest("tr").show();
    $('nobr:contains("Computer Name")').closest("tr").show();
    $('nobr:contains("Issue/Description")').closest("tr").show();

    }
    else if("select[title='Category']").val() == "Program Instalation")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("Program Name")').closest("tr").show();
    $('nobr:contains("Computer Name")').closest("tr").show();
    $('nobr:contains("Justification")').closest("tr").show();
    }
    else if("select[title='Category']").val() == "Account Issue")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("DoD ID#")').closest("tr").show();
    $('nobr:contains("Issue/Description")').closest("tr").show();
    }
    else if("select[title='Category']").val() == "Network Access")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("Port Type")').closest("tr").show();
    $('nobr:contains("Justification")').closest("tr").show();
    }
});
</script>

closed as off-topic by Christoffer, Dikesh Gandhi, Gaurravs, Gautam Sheth, Aakash Maurya Apr 11 '18 at 8:51

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Programming questions not specific to SharePoint are off-topic here, but can be asked on Stack Overflow." – Christoffer, Dikesh Gandhi, Gaurravs, Gautam Sheth, Aakash Maurya
If this question can be reworded to fit the rules in the help center, please edit the question.

0

I think there are some missing parentheses at your second code block. Try this key word.

Here is your code block, but not tested.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">

$(document).ready(function () 
{   

$('nobr:contains("Computer Name")').closest("tr").hide();
$('nobr:contains("Contact Phone#")').closest("tr").hide();
$('nobr:contains("Printer IP")').closest("tr").hide();
$('nobr:contains("Issue/Description")').closest("tr").hide();
$('nobr:contains("DoD ID#")').closest("tr").hide();
$('nobr:contains("Justification")').closest("tr").hide();
$('nobr:contains("Port Type")').closest("tr").hide();
$('nobr:contains("Printer Model")').closest("tr").hide();
$('nobr:contains("Program Name")').closest("tr").hide();
$('nobr:contains("Room#")').closest("tr").hide();
$('nobr:contains("Building#")').closest("tr").hide();

});
</script>

<script type="text/javascript">

$(document).ready(function () 
{  
 $("select[title='Category']").change(function() {

    if($(this).val() == "Computer Issue")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("Computer Name")').closest("tr").show();
    $('nobr:contains("Issue/Description")').closest("tr").show();

    }
    else if($(this).val() == "Printer Issue / Installation")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("Printer Model")').closest("tr").show();
    $('nobr:contains("Printer IP")').closest("tr").show();
    $('nobr:contains("Computer Name")').closest("tr").show();
    $('nobr:contains("Issue/Description")').closest("tr").show();

    }
    else if($(this).val() == "Program Instalation")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("Program Name")').closest("tr").show();
    $('nobr:contains("Computer Name")').closest("tr").show();
    $('nobr:contains("Justification")').closest("tr").show();
    }
    else if($(this).val() == "Account Issue")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("DoD ID#")').closest("tr").show();
    $('nobr:contains("Issue/Description")').closest("tr").show();
    }
    else if($(this).val() == "Network Access")
    { 
    $('nobr:contains("Building#")').closest("tr").show();
    $('nobr:contains("Room#")').closest("tr").show();      
        $('nobr:contains("Contact Phone#")').closest("tr").show();
    $('nobr:contains("Port Type")').closest("tr").show();
    $('nobr:contains("Justification")').closest("tr").show();
    }
});

Also if you do not want to use this key word, your if statements should be like this

if($("select[title='Category']").val() == "Computer Issue")

  • same issue. when I make a selection from the dropdown, nothing shows up. all fields stay hidden – maximo brito Apr 11 '18 at 16:11

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