Блог

Главная - Вопросы по программированию - Скрыть HTML-форму, пока не будет выполнено действие

Скрыть HTML-форму, пока не будет выполнено действие

#javascript #html #css #forms

#javascript #HTML #css #формы

Вопрос:

Я использую флажок, чтобы скрыть / отобразить форму.

Приведенный ниже код делает это правильно, но мне нужно, чтобы форма сначала была скрыта и отображалась только после того, как установлен флажок.

РЕДАКТИРОВАТЬ: как и было запрошено, сообщение содержит полный HTML. Я отладил удаление всех других css / хрустящих форм / расширений шаблонов и т. Д. безрезультатно.

html :

 <!DOCTYPE html>

{% load static %}
{% load crispy_forms_tags %}

  {% block body_block %}
  <link rel="stylesheet" href="{% static 'css/regressionBuilder.css' %}">

  <script type="text/javascript">
  function enableRegressionBuilder(){
    var checkBox = document.getElementById("buildPIT");
    if (checkBox.checked == true){
            document.getElementById("regressionBuilder").style.display="block";
          }
        else{
            document.getElementById("regressionBuilder").style.display="none";
      }
    }
  </script>


    <div class="custom-control custom-switch">
      <input type="checkbox" class="custom-control-input" id="buildPIT" onChange="enableRegressionBuilder();">
      <label class="custom-control-label" for="buildPIT">Build PIT</label>
    </div>


      <form class="form" id="regressionBuilder" method="post">
        {% csrf_token %}

        {{ form2|crispy }}

        <input class = "btn btn-primary" type="submit" name="buildRegression" value="CALCULATE" >
      </form>


  {% endblock %}

Это работает, но css предполагается, что следующее изначально скрывает форму, чего не происходит:

 #regressionBuilder {
  display:none;
}

Комментарии:

1. Можете ли вы обновить вопрос, включив в него полный пример, демонстрирующий проблему?

2. это может быть неприятно, потому что по какой-то причине ваш флажок возвращает always true, поэтому ваш JS переопределяет исходный css. Или ваш css не включен.

3.проверено Не связано с проблемой: является логическим свойством. Вам не нужно сравнивать его с другими логическими значениями. if(checkBox.checked){ было бы достаточно. Кроме того, ваша else операция должна заключаться .style.display="" в возврате по умолчанию к определению css.

4. Логика этого кода кажется правильной, можете ли вы показать нам HTML, который вы используете?

5. @AristeidisKaravas спасибо, но нет, я деактивировал JS и все равно display:none не скрывает форму (или любой input элемент, если на то пошло)

Ответ №1:

Вы можете проверить этот рабочий пример, который похож на ваш код.

 function showForm(){
    var checkBox = document.getElementById("checkbox");
    if (checkBox.checked == true){
     document.getElementById("form1").style.display="block";
    }
   else{
     document.getElementById("form1").style.display="none";
      }
    }  
 #form1 {
  display: none;
}  
 <h3>Hide/Show</h3>
<input type="checkbox" onclick="showForm()" id="checkbox"/>
<div id="form1">
  Form
</div>

Ответ №2:

Ваша логика работает, проблема может быть в вашем файле css, возможно, селектор с более высокой специфичностью переопределяет ваше правило css.

вот немного другая версия вашего кода, которая работает нормально.

 showForm = () => {
    checkbox.checked
        ? form1.style.display="block"
        : form1.style.display="none";
}  
 #form1 { display:none; }  
 <input type="checkbox" id="checkbox" onclick="showForm()">
<form action="" id="form1"> The Form </form>

Ответ №3:

Я думаю, у вас есть что-то, что переопределяет ваш display: none класс. На самом деле вам не нужен javascript, если вы просто поместите свою форму в тот же контейнер div, что и флажок.

 input#buildPIT ~ form#regressionBuilder {
  display: none  
}

#buildPIT:checked ~ #regressionBuilder {
  display: block;
}  
 <div class="custom-control custom-switch">
  <input type="checkbox" class="custom-control-input" id="buildPIT">
  <label class="custom-control-label" for="buildPIT">Build PIT</label>

  <form class="form" id="regressionBuilder" method="post">
    <input class = "btn btn-primary" type="submit" name="buildRegression" value="CALCULATE" >
  </form>
</div>