Hide or show div based on value of hidden input field on change

Question

Disclaimer: I do not really know how to use jquery (or do many other things).

I have a dropdown menu that populates from a database, and based on the dropdown selection fills a few hidden input fields. After choosing an option in the dropdown, this:

<input class="form-control" type="hidden" name="suporlochtml" id="suporlochtml"/>

changes to...

<input class="form-control" type="hidden" name="suporlochtml" id="suporlochtml" value="local"/>

... which is working as intended.

I want to be able to show or hide a div on the page based on the value of that hidden field. For now, the value could be either "superior" or "local"

After reading this: jQuery - Detect value change on hidden input field I'm under the impression that it requires extra code to detect a change to a hidden input field.

Based on that, here's what I'm trying:

<script>

function setUserID(myValue) {
     $('#suporlochtml').val(myValue)
         .trigger('change');
}

$('#suporlochtml').change(function(){
    if ($('#suporlochtml').val() == "local") {   
        $("#superiorcourt").hide();
    }
    else {
        $("#superiorcourt").show();
    }
});

</script>

I want to show this div when "superior" is the value in the hidden field:

<div class="superiorcourt" id="superiorcourt">
</div>

And I want to show this div when "local" is the value in the hidden field:

<div class="localcourt" id="localcourt">
</div>

Right now nothing happens when the dropdown (and therefore the hidden field value) changes. Both divs are still displayed.

Since I don't really know how to use jquery/javascript, I don't know if it's a syntax error or if this isn't possible. I am able to achieve the desired effect when I detect the change of the dropdown the user controls directly with some code involving this:

 $("select").change(function(){

but if I can figure out how to do it with that hidden field value it will save a ton of work.

Any suggestions are appreciated.

Rounin · Answer 1 · 2019-07-07T16:58:36.617

You can initially hide the two divs like this:

.superiorcourt,
.localcourt {
opacity: 0;
}

.superiorcourt.show,
.localcourt.show, {
opacity: 1;
}

You can grab the value from the input like this:

let suporlochtmlValue = document.querySelector('[name="suporlochtml"]').value;

Once you have the value you can add the class .show to the respective div:

document.getElementsByClassName(suporlochtmlValue + 'court').classList.add('show');

Working Example:

let suporlochtml = document.querySelector('[name="suporlochtml"]');

function showDiv() {
document.getElementsByClassName('superiorcourt')[0].classList.remove('show');        document.getElementsByClassName('localcourt')[0].classList.remove('show');
    document.getElementsByClassName(suporlochtml.value + 'court')[0].classList.add('show');
}

suporlochtml.addEventListener('change', showDiv, false);

form, div {
float: left;
margin-right: 12px;
}

div {
width: 100px;
height: 100px;
line-height: 50px;
text-align: center;
font-weight: bold;
color: rgb(255, 255, 255);
background-color: rgb(255, 0, 0);
}

.superiorcourt,
.localcourt {
opacity: 0;
}

.superiorcourt.show,
.localcourt.show {
opacity: 1;
}

<form>
<select name="suporlochtml">
<option value="initial">Initial</option>
<option value="local">Local</option>
<option value="superior">Superior</option>
</select>
</form>

<div class="superiorcourt">Superior<br />Court</div>
<div class="localcourt">Local<br />Court</div>

score 0 · Answer 2 · answered Jul 07 '19 at 16:33

Would need to see your dropdown related logic as well, because there is nothing fundamentally wrong with your code for showing/hiding the div, just made some minor improvements, see:

function setUserID(myValue) {
    $('#suporlochtml').val(myValue).trigger('change');
}

// just to mimic your dropdown
$('.justfordemo').on('click', function() {
    if ($('#suporlochtml').val() === 'local') {
        setUserID('superior');
    } else {
        setUserID('local');
    }
});

$('#suporlochtml').on('change', function() {
    if ($(this).val() === 'local') {   
        $("#superiorcourt").hide();
    } else {
        $("#superiorcourt").show();
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input class="form-control" type="hidden" name="suporlochtml" id="suporlochtml" />

<!-- just to mimic your dropdown -->
<button class="justfordemo" type="button">Toggle hidden value</button>

<div class="localcourt" id="localcourt">
  Local Court
</div>

<div class="superiorcourt" id="superiorcourt" style="display: none;">
  Superior Court
</div>

but maybe your logic for the dropdown is incorrect and does not set the value on the hidden input properly?

Hide or show div based on value of hidden input field on change

2 Answers2