Dynamic change the max of a form field based on a selected item of the form (CS50 PSET8 Finances)

Question

I have a form that the options for a dropdown menu are fed to it from a list of dicts. Each dict has a ["symbol"] and a ["shares"] item. The dropdown options are looped through with a for loop.

I am trying to make it so when I select an option from my dropdown menu, the maximum imput of the following form field is updated to the corresponding ["shares"] value.

What I have so far is below. I know my function is incorrect but My problem is I don't really know how to use document.getElementById to access the specific item from my list of dicts and get the "shares" value.

    <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>

I tried following the instructions of the comment below. I am not sure I can create inside the loop like this or what another option would be in case I can't.

I appreciate any feedback.

Answer 1

Good UX! This function

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

has great promise; just one problem. The value of an option according to MDN doc is:

value

The content of this attribute represents the value to be submitted with the form, should this option be selected. If this attribute is omitted, the value is taken from the text content of the option element.

Essentially it will simply give the symbol back.

Perhaps explore the HTML user-defined attribute data-* . Again from MDN doc

HTML5 is designed with extensibility in mind for data that should be associated with a particular element but need not have any defined meaning. data-* attributes allow us to store extra information on standard, semantic HTML elements without other hacks such as non-standard attributes, extra properties on DOM, or Node.setUserData().

Add the shares as a user-defined attribute on each option and the java script will have access to everything it needs. Something like:

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

It can then be accessed in the javascript with the dataset property, something like: HTMLelement.dataset.shares

The second script is problematic: the javascript doesn't have access to the python variables.