Dynami c изменяет максимальное значение поля формы в зависимости от выбранного элемента формы (CS50 PSET8 Finances) - PullRequest
Новая
       72

Dynami c изменяет максимальное значение поля формы в зависимости от выбранного элемента формы (CS50 PSET8 Finances)

0 голосов
/ 01 августа 2020

У меня есть форма, в которой параметры раскрывающегося меню вводятся в нее из списка dicts. Каждый dict имеет ["символ"] и ["общий доступ"] элемент. Параметры раскрывающегося списка зацикливаются с помощью for l oop.

Я пытаюсь сделать это так, чтобы, когда я выбираю параметр из раскрывающегося меню, максимальное значение следующего поля формы обновляется до соответствующего ["доли"] стоимость.

То, что у меня есть, ниже. Я знаю, что моя функция неверна, но моя проблема в том, что я действительно не знаю, как использовать document.getElementById для доступа к указанному c элементу из моего списка dicts и получения значения «share». 

    <script type="text/javascript">
    function updateMax() {
  var select = document.getElementById('symbol').innerText; // symbol selected
  const article = document.querySelector('select.val');  // finding article with symbol
  var maxi = article.dataset.shares; // getting maximum value
  var field = document.getElementById('shares');

     field.max = maxi

}
    </script>
    <form action="/sell" method="post">
        <div class="form-group">
            <select name="symbol" id="symbol" onchange="updateMax()">
                <option disabled selected value="">Symbol</option>
                  {% for row in portfolio %}
                     <article>
                       id="{{ row["symbol"] }}"
                       shares="{{ row["shares"] }}"
                     </article>
                <option value="row.symbol">{{ row["symbol"] }}</option>
                 {% endfor %}

            </select>
        </div>
        <div class="form-group">
            <input id="shares" autocomplete="off" min="0" max="" name="shares" placeholder="Shares" type="number">
        </div>
        <button class="btn btn-primary" type="submit">Sell</button>
    </form>

Я пробовал следовать инструкциям в комментарии ниже. Я не уверен, что смогу создать внутри l oop, как этот, или какой другой вариант был бы, если я не смогу.

Я ценю любую обратную связь.

1 Ответ

0 голосов
/ 02 августа 2020

Хороший UX! Эта функция 

 function updateMax() {
     var select = document.getElementById('symbol');
     var field = document.getElementById('shares');
     field.max = select.options[select.selectedIndex].value; }

имеет большие перспективы; только одна проблема. value варианта согласно MDN do c:

значение

Содержимое этого атрибута представляет значение, которое будет отправлено с формой, если будет выбран этот параметр. Если этот атрибут опущен, значение берется из текстового содержимого элемента option.

По сути, он просто вернет symbol.

Возможно, изучите HTML определенный пользователем атрибут data-*. Опять же, из MDN do c

HTML5 разработан с учетом расширяемости данных, которые должны быть связаны с конкретным элементом, но не должны иметь какого-либо определенного значения. Атрибуты data- * позволяют нам хранить дополнительную информацию о стандартных, semanti c HTML элементах без других взломов, таких как нестандартные атрибуты, дополнительные свойства в DOM или Node.setUserData ().

Добавьте общие ресурсы в качестве определяемого пользователем атрибута для каждой опции, и сценарий java получит доступ ко всему, что ему нужно. Что-то вроде: 

<option data-shares="{{ row["shares"] }}" value="row.symbol">{{ row["symbol"] }}</option>

Затем к нему можно получить доступ в javascript с помощью свойства dataset, например: HTMLelement.dataset.shares

Второй сценарий проблематичен c: javascript не имеет доступа к переменным python.

...