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>
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")

|improve this answer|||||
  • 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.