Dowpdown shold displays the selected value on form submission
I have three items in the form: three dropdowns, one of which gets values from "year" through the database, and a dropdown menu that gets values from "month" through the database, and a third text box, which is a dropdown of the day. I want that when selecting a value from the dropdown and submitting the form, the selected value disappears from the dropdown textbox and the first value of the dropdown appears.
I want dowpdown to display the selected value when the form is opened.
Hope you can understand my problem and help me. below is the code which is written in html and JS also front end like python:
<label class="labels">Year 1:</label>
<select name='year1' id='year1' onchange ="chng_func(this.value,{{col_list}})" >
%for item in year_lst:
<option value="{{ item }}" selected=selected>{{ item }}</option>
%end
</select>
<label class="labels">Month 1:</label>
<select name = 'month1' id='month1' onchange="monthFunc()">
%for item in month_lst:
<option value="{{ item }}" >{{ item }}</option>
%end
</select>
<label class="labels">Day 1:</label>
<select name = 'day1' id='day1'>
<script>
monthFunc();
</script>
</select>
source to share
What templating engine do you use to render html? Jinja, Django, Mako? This will help us help you. But in general, you need to take the presented values and put them back in the html. This means that you need to write logic inside for loops to check if the presented value matches the repeated value of the loop. I don't know exactly what the syntax of this templating engine is, but it would look like this:
%for item in year_lst:
<option value="{{ item }}" %if item=submitted_item: selected=selected %end >{{ item }}</option>
%end
So, during iteration, you need to check which option to choose. Give me more information if you need more help.
@UPDATE
So we figured out that you are using the Bottle framework and I think you are using the SimpleTemplate Engine to render the html (this is obvious from the code snippet you posted).
Here's what you need to do to select the selected values for the year / month / day controls after the form is submitted. You can read about form processing in this section .
So let's consider that your form submit method is http POST:
<form method=POST ...>
</form>
In this case, you need to have the following server-side route handler to handle the presented values:
# this route will serve your form POST submission
@route('/your_route', method='POST')
def route_handler():
# here you're reading selected values from request
year1 = request.forms.get('year1')
month1 = request.forms.get('month1')
day1 = request.forms.get('day1')
# and here you're setting that values back to the template to write a logic html side
return template('your_template', year1=year1, month1=month1, day1=day1)
Finally, your html should look something like this:
<select name='year1' id='year1' onchange ="chng_func(this.value,{col_list}})" >
%for item in year_lst:
<option value="{{ item }}" {{ "selected=selected" if item = year1 else "" }}>{{ item }}</option>
%end
</select>
Let's see what makes this part: {{ "selected=selected" if item = year1 else "" }}
. This basically means that if our item loop value is equal to the presented year1 value , then output the text "selected = selected" in html that will select the selected year variant as selected. You can read about inline expressions here .
And you need to change your monthly and daily selections accordingly. What is this, let me know if you have any other questions.
source to share