Populating dependent dropdown list using Python and Flask - javascript

I have a web app with a form which takes two inputs, a file name and a sprint number.
The first one, which takes the file name, is a dynamically populated list which retrieves the list of CSV files in a specific directory and populates the form list accordingly.
Each of those CSV files has some duplicate sprint numbers in them (like 2012, 2027 etc). After selecting from the first drop down, I want the second drop down list to populate with a list of all the unique sprint numbers from the chosen CSV file name. These unique sprint numbers could probably be generated using a python script, and then results must somehow be used to populate the second drop down list.
See picture for a better idea.
Webpage view
Does anyone know how to approach this?
<form action="{{ url_for('output_burndown_chart') }}" method="post">
<label for="file_name">File Name:</label><br>
<!-- <input type="text" name="file_name"><br><br> -->
<select id="file_name" name="file_name">
{% for i in dir_files %}
<option value="{{ i }}">{{ i }}</option>
{% endfor %}
</select>
<br>
<br>
<label for="sprint_number">Sprint Number:</label><br>
<input type="text" name="sprint_number"><br><br>
<input type="submit">
</form>
#app.route('/burndown', methods=['GET','POST'])
def output_burndown_chart():
if request.method == "POST":
sprint_num = request.form['sprint_number']
file_name = request.form['file_name']
dir_name = "./files"
file_path = os.path.join(dir_name, file_name)
df_final = burndown_gen(file_path, sprint_num)
return render_template('test.html', df_final=df_final, sprint_num=sprint_num)
elif request.method == 'GET':
dir_files = os.listdir('./files/')
print(dir_files)
return render_template('burndown_form.html',dir_files=dir_files)

Related

Multiply every form value in Django template using JavaScript

I'm created a form where values are coming from my view and the value is daily basis and I want to give a drop down where user can change it to weekly basis and the values will be multiplied by 7.
As you can see in the above picture, I'm giving a drop down option where user can change it to weekly basis and monthly basis and the value inside the form will change as per the selection. But I'm not aware how I can achieve this.
My code:
return render(request, 'test.html',
{'List1': l1, 'List2': l2, 'List3': l3}
and my form.html is readonly form which renders these list in order.
<form>
<div class="form-row">
{% for l in List1 %}
<div class="form-group col-md-4">
<label>x</label>
<div class="input-group mb-3">
<input type="text" value="{{l}}" readonly>
</div>
</div>
{% endfor %}
</div>
........simliary for rest list.
</form>
I want to multiply every value inside form by 7 when user selects weekly in drop-down. How can I achieve it?

Javascript/Django: How to handle simple search in advanced search engine?

I am working on advance search engine that allow multiple-layered of search(advance search) using Django but I am not sure on how to carry simple search with the search form that contain multiple search fields. E.g: In the form I got a textbox, a dropdownlist that contain several types of fruits and a submit button. The problem is when I decide just to carry a simple search by just simply enter some string into the textbox without choosing the types of fruit and leaving it as the default value " ", when I submitting the form it generated URL: http://127.0.0.1:8000/result/?q=something&fruit_type=+. Is there a way to remove the &fruit_type=+ from the URL?
<form action="/result/" method="get">
<input type="text" id="search_box" name="q"/>
<input type="submit" id="sbm_button" value="SEARCH" class="inputbtn"/>
<br />
<select name="Fruits">
<option value=" ">Fruits</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
</form>
Below is the view.py file:
def search(request):
if 'q' in request.GET:
q = request.GET['q']
fruit_type = request.GET['Fruits']
return render(request, 'result.html', {
'query' : q,
'fruit' : fruit_type,
})
It will return the q and fruit_type to result.html with the generated URL which had mentioned above. Is there a way to ignore the Fruits dropdownlist within the form(submitting the form and ignoring the dropdownlist)? Is it possible to do this in Javascript? Thank you.

Django - Change the route of sending a form based on dropdown

I am currently making a kind of internal search engine with multiple options in a dropdown, it works at first but I would like to change the form to get the urls based on the dropdown, so I can get:
example.com/search/**Option_Value_Here**/?q=my+query
I'm using Django as the framework
<form action="/search/" method="get">
<input name="q" id="query" value="{{ query }}" type="text" autocomplete="off">
<select id="category" name="select-name" method="get">
<option value="Jose">Jose</option>
<option value="Mike">Mike</option>
<option value="Mary_Ann">Mary Ann</option>
<option value="chaplin">Chaplin</option>
</select>
<input value="Search" class="fit" type="submit">
</form>
My question is if there is a way where I can change the path of the form action:
<form action="/search/{{ Option_Value_Here }}}/" method="get">
Thanks for your time.
Regards
You can do that with JavaScript/jQuery.
<form id="myform">
...
</form>
$(".category").change(function(){
value = $(this).val()
$('.myform').attr('action', "/search/" + value)
});
Remember to place the code in a $(document).ready() listener.
Want to avoid JavaScript?
You can get the value directly in the template. You cannot change that value if the user changes the dropdown value: in this case, your only chance is that of redirecting the user in your views.py based on what he choose in the dropdown.
Remember: Django simply renders a page and sends it to the user. Whatever happens before a new call is made to your server is not in the possibilities of Django but those of JavaScript.

Passing parameters from webpage to server (Flask)

I'm just getting started with adding a backend into my front-end code and think flask is a good framework to start learning with.
One of the things I'm having trouble with is submitting information to the server for processing. Specifically here I have a list of radio buttons, and I want to send to a server a list of all the radio buttons the user checked when he or she hit submit. The server then processes that information and returns a new page.
This is the form:
<form action="{{ url_for('timeline') }}" method="post">
{% for each_tag in tags %}
<div class="checkbox">
<label>
<input type="checkbox" name="channel[]" value="{{each}}" >
{{each_tag}}
</label>
</div>
{% endfor %}
<button type="submit"> submit </button>
</form>
Here are the relevant functions in the main flask file:
#app.route('/')
#app.route('/index.html')
def checklist():
for rownum in range(1,sh.nrows):
row_values = sh.row_values(rownum)
all_tags.add(row_values[7])
return render_template('index.html', tags=all_tags)
#app.route('/timeline.html', methods=['POST','GET'])
def timeline(request):
//do stuff with list of checked radio buttons
return render_template('timeline.html')
I'm not exactly sure how information is passed back and forth. I can send server info to the html templates and I think once I get this example down and figure out how information is passed the other direction I can start doing some interesting things. =)
Naming the checkboxes with trailing square brackets ("channel[]") is a PHP thing, Flask doesn't need that.
Just use the same name in all the checkboxes:
<form action="{{ url_for('timeline') }}" method="post">
{% for each_tag in tags %}
<input type="checkbox" name="channel" value="{{each}}" >
{% endfor %}
<button type="submit"> submit </button>
</form>
Then to retrieve the array of selected values use request.form.getlist():
#app.route('/timeline.html', methods=['POST','GET'])
def timeline(request):
checked = request.form.getlist('channel')
# do something with checked array
return render_template('timeline.html')

Dynamically generate client-side HTML form control using JavaScript and server-side Python code in Google App Engine

I have the following client-side front-end HTML using Jinja2 template engine:
{% for record in result %}
<textarea name="remark">{{ record.remark }}</textarea>
<input type="submit" name="approve" value="Approve" />
{% endfor %}
Thus the HTML may show more than 1 set of textarea and submit button.
The back-end Python code retrieves a variable number of records from a gql query using the model, and pass this to the Jinja2 template in result. When a submit button is clicked, it triggers the post method to update the record:
def post(self):
if self.request.get('approve'):
updated_remark = self.request.get('remark')
record.remark = db.Text(updated_remark)
record.put()
However, in some instances, the record updated is NOT the one that correspond to the submit button clicked (eg if a user clicks on record 1 submit, record 2 remark gets updated, but not record 1).
I gather that this is due to the duplicate attribute name remark. I can possibly use JavaScript/jQuery to generate different attribute names. The question is, how do I code the back-end Python to get the (variable number of) names generated by the JavaScript?
Thanks.
edited
Inside the template for loop use loop.index: the current iteration of the loop.
Then:
{% for record in result %}
<textarea name="remark{{ loop.index }}">{{ record.remark }}</textarea>
<input type="submit" name="approve" value="{{ loop.index }}" />
{% endfor %}
return:
<textarea name="remark1">first record remark</textarea>
<input type="submit" name="approve" value="1" />
<textarea name="remark2">second record remark</textarea>
<input type="submit" name="approve" value="2" />
<textarea name="remark2">third record remark</textarea>
<input type="submit" name="approve" value="3" />
and in your backend code:
def post(self):
if self.request.get('approve'):
updated_remark = self.request.get('remark' + self.request.get('approve'))
record.remark = db.Text(updated_remark)
record.put()
I wrote this without testing it. Probably doesn't work, but could give you a hint.
new [better] solution
put each couple of textarea and input inside an form:
{% for record in result %}
<form>
<textarea name="remark">{{ record.remark }}</textarea>
<input type="submit" name="approve" value="Approve" />
</form>
{% endfor %}

Categories