0

Upon submitting my form, it also shows the first option value rather than the one just submitted. I'm creating a stock interface and want users to see their selected stock from the dropdown rather than the first when the information comes up. In other words, the correct information appears on the page upon submission but the dropdown field still shows the first dropdown option, not the one the user selected. I am writing this with the flask framework so some of the code appears as such.

        <form class="select_form" method="POST" action="{{ url_for('index') }}">
        <div class="select_ticker">
          <div class="ticker_options">
              <span class="input_selects">Please select</span>
                  <select name="symbol_select" class="symbol_select" id="ticker">
                    {% for symbol in symbols %}
                    <option>
                        {{symbol['symbol']}}
                    </option>
                    {% endfor %}
                  </select>
          </div>
          <button type="submit" class="btn">Go</button>
        </div>
      </form>
bradhar00
  • 15
  • 3
  • 1
    Not familiar with flask, but is there some sort of form object that is created upon submit? How do you handle the submitted data? You should be able to check that object and determine which option to select. – mykaf May 18 '21 at 15:53

1 Answers1

0

This is actually a html question.

<form class="select_form" method="POST" action="{{ url_for('index') }}">
    <div class="select_ticker">
      <div class="ticker_options">
          <span class="input_selects">Please select</span>
          <select name="symbol_select" class="symbol_select" id="ticker">
            {% for symbol in symbols %}
            <option {{'selected="selected"' if symbol['selected'] else ''}}>
                {{symbol['symbol']}}
            </option>
            {% endfor %}
          </select>
      </div>
      <button type="submit" class="btn">Go</button>
    </div>
  </form>

Add {{'selected="selected"' if symbol['selected'] else ''}} on <option>, and pass if it is selected in return

@app.route('/index', methods=['GET', 'POST'])
def home():
    symbols=[
        {"symbol": "1", "selected": False},
        {"symbol": "2", "selected": False},
        {"symbol": "3", "selected": False},
        {"symbol": "4", "selected": False},
    ]
    symbol_select = request.form.get('symbol_select')
    for sysmbol in symbols:
        if symbol['symbol'] == symbol_select:
            symbol['selected'] == True
            break
    return render_template("index.html", symbols=symbols)

Similar question can be seen here. And more info for option tag can be seen here.

Josh Liu
  • 374
  • 1
  • 2
  • 12
  • Thanks for the response. The issue is that I don't want it to be a default value but rather show in the selection box which one was selected. There are also about 300 select options and I'm trying to avoid hardcoding. Any ideas? – bradhar00 May 19 '21 at 14:54
  • @bradhar00 That is just sample code and I'm showing you how to preset the `selected` and the workflow of how to solve this problem rather than the hard code. You can always pass the `selected` into route and preset the dynamic `selected` which user selected. – Josh Liu May 19 '21 at 16:03