Показать скрытый div на основе любого значения, содержащегося в поле ввода в модальной форме

Question

Я потратил последние 4 часа на поиски ответа в Google и SO. Ответ ЗДЕСЬ был ближе всего к тому, что я искал, но в моем случае <div class="fhlbinfo"> не отображается или не скрывается в зависимости от значения поля ввода в <div class="fhlbyes">, когда модальный форма загружается, поэтому я явно что-то упускаю. Я проверил на опечатки и не нашел.

<div class="form-group">

  <div class="fhlbyes">
    <label>FHLB Loan</label>

    <input style="background-color: RGB(208,206,206)" type="text" name="fhlbloan" placeholder="Yes/No" value="<?php echo $fetch['fhlbloan'];?>" class="form-control" />
  </div>

</div>

<script src="js/jquery-3.4.1.min.js">
  $(function() {
    if ($(".fhlbyes input[value == 'Yes']")) {
      $('.fhlbinfo').show();
    } else {
      $('.fhlbinfo').hide();
    }
  })
</script>

<div class="form-group">
  <div class="fhlbinfo" style="display: none">

    <label>Keyed on Servicing Module</label>

    <input type="text" name="srvcmodule" placeholder="Yes/No" value="<?php echo $fetch['srvcmodule'];?>" class="form-control" />
  </div>
</div>

Answer 1

Если я вас правильно понял, изменения никогда не произойдут, потому что вы не сообщаете коду, когда выполнять эту функцию, поэтому я добавил слушатель события keyup, чтобы изменить свойство display в fhlbinfo, как только оно заметит требуемое входное значение (Да )

Я также считаю, что это не произойдет при загрузке DOM, потому что вы сказали, что хотите, чтобы естественное состояние fhlbinfo было скрыто независимо от значения вашего ввода, и единственный способ изменить это -установка значения ввода внутри скрипта.

Есть два способа, о которых я могу думать прямо сейчас ...

Либо вы удаляете display:none, и вы сохраняете значение по умолчанию "Да" в этом случае естественное состояние fhlbinfo не скрыто, и оно соответствует значению по умолчанию.

Либо вы удаляете значение по умолчанию «Да» и сохраняете атрибут disply:none для div fhlbinfo, в этом случае состояние по умолчанию of fhlbinfo скрыт и соответствует значению ввода (кроме yes)

Оба эти способа помогают вам получить состояние fhlbinfo выровнен со значением ввода по умолчанию при загрузке DOM, и когда дело доходит до будущих изменений (после загрузки DOM), прослушиватель событий keyup будет прослушивать изменения и устанавливать состояние fhlbinfo в соответствии с условным оператором, указанным внутри его функции (показывать, когда значение input = Yes в вашем случае)

Я РЕКОМЕНДУЮ ИСПОЛЬЗОВАТЬ ВТОРОЙ СПОСОБ, ПОТОМУ ЧТО ВЫ ИСПОЛЬЗУЕТЕ МЕСТОРОЖДЕНИЯ

в обоих случаях используйте код JS, указанный ниже

$(".fhlbyes input").ready(function() {
  if ($(".fhlbyes input").val() == 'Yes') {
    $('.fhlbinfo').show();
  } else {
    $('.fhlbinfo').hide();
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">

  <div class="fhlbyes">
    <label>FHLB Loan</label>

    <input style="background-color: RGB(208,206,206)" type="text" name="fhlbloan" placeholder="Yes/No" value="Yes" class="form-control" />
  </div>

</div>

<div class="form-group">
  <div class="fhlbinfo">

    <label>Keyed on Servicing Module</label>

    <input type="text" name="srvcmodule" placeholder="Yes/No" value="Your value>" class="form-control" />
  </div>
</div>

Answer 2

Используйте только простые = вместо == для сравнения атрибута значения вашего поля ввода. Затем проверьте, сколько подходящих элементов DOM найдено.

Кроме того, не рекомендуется включать файл javascript и в этот же тег писать свой персональный код javascript (https://html.spec.whatwg.org/#the -script- элемент )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">

  <div class="fhlbyes">
    <label>FHLB Loan</label>

    <input style="background-color: RGB(208,206,206)" type="text" name="fhlbloan" placeholder="Yes/No" value="Yes" class="form-control" />
  </div>

</div>

<script>
  $(function() {
    if ($(".fhlbyes input[value='Yes']").length > 0) {
      $('.fhlbinfo').show();
    } else {
      $('.fhlbinfo').hide();
    }
  })
</script>

<div class="form-group">
  <div class="fhlbinfo" style="display: none">

    <label>Keyed on Servicing Module</label>

    <input type="text" name="srvcmodule" placeholder="Yes/No" class="form-control" />
  </div>
</div>