Нужна форма, чтобы иметь правильные параметры, доступные при загрузке страницы - PullRequest
Новая
       0

Нужна форма, чтобы иметь правильные параметры, доступные при загрузке страницы

0 голосов
/ 06 июня 2018

Я разрабатываю форму в своем приложении rails.Существует проблема при использовании функции скрытия / показа.Сейчас он настроен на отображение соответствующих текстовых полей: onchange.Как сделать так, чтобы при загрузке страницы просмотра отображались соответствующие текстовые поля?Если для категории есть параметр, скажем «Другой», и пользователь загружается в форму.Другие параметры не загружаются вместе с ним.Им нужно будет щелкнуть что-нибудь еще и еще раз щелкнуть Другое, чтобы загрузить текстовые поля.

application.css 

function showMe(e) {
var strdisplay = e.options[e.selectedIndex].value;
var e = document.getElementById("Other");
var x = document.getElementById("Pcba");

if(strdisplay != "Other") {
    e.style.display = "none";
} else {
    e.style.display = "block";
}
if(strdisplay != "PCBA") {
    x.style.display = "none";
} else {
    x.style.display = "block";
}

}

ПРОСМОТР 

<div class="form-group">
              <label>Category</label>
              <%= f.select(:category, [["Select...","Select..."],["PCBA","PCBA"], ["Other","Other"]], {}, { :class => 'form-control', :onchange => "showMe(this)", :onload => "showMe(this)", :default => 'Select...'})%>
            </div>
              <div class="form-group" id="Other" style="display: none">
                    <label>Quantity</label>
                    <%= f.number_field :quantity, class: "form-control", placeholder: "Enter Quantity", required: true  %>
              </div>

                <div id="Pcba" class="form-group" style="display: none">
                  <label>Serial Number</label>
                  <%= f.text_field :serial, class: "form-control", placeholder: "Enter Serial", required: true %>
                  <br>
                  <label>Software Revisions</label>
                  <%= f.text_field :serial, class: "form-control", placeholder: "Enter Serial", required: true %>
                </div>

1 Ответ

0 голосов
/ 11 июня 2018

Я добавил console.log в вашу функцию showMe, чтобы убедиться, что он не вызывался при загрузке страницы (если вы не используете консоль для отладки, это очень полезно!).Я не верю, что загрузка вашего выбора что-то делала.

Это код, который я написал, чтобы проверить, как решить вашу проблему: 

<html>
  <head>
    <script>
      function showMe(e) {
        console.log('showMe called');
        var strdisplay = e.options[e.selectedIndex].value;
        var e = document.getElementById("Other");
        var x = document.getElementById("Pcba");

        if(strdisplay != "Other") {
          e.style.display = "none";
        } else {
          e.style.display = "block";
        }
        if(strdisplay != "PCBA") {
          x.style.display = "none";
        } else {
          x.style.display = "block";
        }
      }
      window.onload = function() {
        showMe(document.getElementById('category'));
      };
    </script>
  </head>
  <body>
    <div class="form-group">
      <label>Category</label>
        <select id="category" onchange="showMe(this)" onload="showMe(this)">
          <option>Select...</option>
          <option selected>PCBA</option>
          <option>Other</option>
        </select>
      </div>
      <div class="form-group" id="Other" style="display: none">
        <label>Quantity</label>
        <input id="quantity" />
      </div>
      <div id="Pcba" class="form-group" style="display: none">
        <label>Serial Number</label>
        <input id="serial" />
        <br>
        <label>Software Revisions</label>
        <input id="serial" />
      </div>
    </div>
  </body>
</html>

Я использую окно.onload для вызова функции showMe при загрузке страницы.Поскольку он ожидает передачи вашего элемента select, я использую document.getElementById, чтобы получить элемент и передать его в функцию showMe.Вы можете сделать и то и другое с помощью jQuery.

Дайте мне знать, если это работает!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...