I got variable myvar in my wtf-form.
I would like to set it's value upon the user selects an option in the dropdown list, w/o the need to add a button/input for the user to confirm his selection.
So far, I am not able to have a POST event triggered in views.py whenever the user selects an option.
Moreover, setting form.myvar as I do below doesn't actually do anything, and the alert message won't fire either.
My flask template code:
<!-- extend base layout -->
{% extends "base.html" %}
<script>
$('#sel_id').change(function() {
window.alert(5 + 6);
});
</script>
{% block content %}
<div>
<form action="{{ url_for('compile') }}" method="POST">
<dl>
<select id="sel_id">
<option value="1">1</option>
<option value="2">2</option>
</select>
</dl>
</form>
</div>
<script type=text/javascript src="{{
url_for('static', filename='jquery.js') }}"></script>
{% endblock %}
I would write a piece of JavaScript or jQuery to handle this.
$('#sel_id').change(function() {
var = 4;
});
Also, you will want to name your variables something other than var, which is keyword. Name it something more descriptive.
Related
I have an element - dropdown list selector.
Which works and there is a choice of value.
Based on the value received, I send a request to execute the code and, at the end, to change / render another element (graph).
I added one more element to the template - one more selector list.
And also redirected the change route to this element in the template.
It also began to change based on the received value in the first selector list.
I'm thinking about how you can change the third element of the template (graph) - based on the values obtained - by the first and second elements (two selector lists).
The first selector list - refines filters the model query.
The second selector list - refines, filters the model request more precisely - the values already left in the request after the first selector and already at the end sends the result to display in the form of a graph.
How can you think of changing only the schedule - rebuilding without changing the entire template?
Whether it is possible to think up such by means of HTMX?
zamer_tabl_2_htmx.html
<div class="row">
<div class="col-4">
<select
id="select-name"
class="custom-select"
name="select"
autocomplete="off"
hx-get="{% url 'zamer_tabl_2_htmx' %}"
hx-target="#figure, #selector_2">
{% for select in selector %}
<option value="{{ select }}">{{ select }}</option>
{% endfor %}
</select>
<hr/>
<div id="selector_2" class="col-8">
{% include 'zamer_tabl_2_htmx_select.html' %}
</div>
</div>
<div id="figure" class="col-8">
{% include 'zamer_tabl_2_htmx_figure.html' %}
</div>
</div>
zamer_tabl_2_htmx_select.html
<select
id="select-name-2"
class="custom-select"
name="select_2"
autocomplete="off"
hx-target="#figure">
{% for select_2 in selector_2 %}
<option value="{{ select_2 }}">{{ select_2 }}</option>
{% endfor %}
</select>
views
def zamer_tabl_2_htmx(request):
///code///
if request.htmx:
print("HTMX")
if request.htmx:
print("HTMX")
print(select_kotol)
return render(request, 'zamer_tabl_2_htmx_select.html', context)
return render(request, 'zamer_tabl_2_htmx_figure.html', context)
return render(request, "zamer_tabl_2_htmx.html", context)
I'm trying to change a value based on the exchange rate selected by the user within the <option> tag. I don't want to save the form result to the database. I just want it to dynamically change whenever the user changes the currency option.
Say a user selects a currency from the below form with the options in the view:
VIEW
def view(request):
currency_dict = {'EUR': 0.9154994049253867, 'JPY': 123.86706948640484, 'BGN': 1.7905337361530713, 'CZK': 22.375720955781375}
cur = currency_dict.items()
deposit = 10000
context = {
'currency_dict': currency_dict,
'cur': cur,
'deposit': deposit,
}
return render(request, 'coinprices/my-dashboard.html', context)
HTML - FORM
<div class="container">
<div>
<span>
<h1>My Dashboard</h1>
</span>
<span>
<form method="post">
<label>Choose Currency:</label>
<input list="ex-currency">
<datalist id="ex-currency">
{% for k, v in currency %}
<option value="{{ k }}"></option>
{% endfor %}
</datalist>
{% csrf_token %}
<button class="btn btn-outline-success btn-sm">Submit</button>
</form>
</span>
</div>
</div>
Then based on the users selection, multiply the {{ deposit }} value by the currency_dict[user_selected_currency] and change the bold text (see below):
DESIRED OUTCOME
<span>
<div><b>Total Investment {{ user_selected_currency }}</b></div>
<span class="text-xl">${{ deposit * currency_dict[user_selected_currency] }}</span>
</span>
Any ideas how this can be achieved?
Unfortunately, this is not a thing you can do with the render function you will need a GET request using ajax when the user changes the value, and then you can call a function based on the user option and return a valid response to the user this called "Chained Dropdown List" I found this amazing article that maybe can help you How to Implement Dependent/Chained Dropdown List with Django
by running this code on flask, I am expecting to change tag "No name submitted" relating to the selected option, that I select out of the drop down menu. Instead of there are no changes, if I click on one option.
Thanks for your help!
<body>
<script>
document.addEventListener("change", function(){
document.querySelector("#selectoption").onchange(){
const channel = document.querySelector("#selectoption").value;
document.querySelector("#displaychannel").innerHTML=channel;
};
});
</script>
<h1> channels </h1>
<ul>
{% for channel in channels%}
<li>{{ channel }}</li>
{% endfor %}
</ul>
<form id="form2">
<select id="select">
{% for channel in channels%}
<option id="selectoption" value={{ channel }}>{{ channel }}</option>
{% endfor %}
</select>
</form>
<a1>You are:</a1>
<a1 id="displaychannel">No name submitted</a1>
</body>
You need to select the select to add an event listener to it. You can not add a onchange event listener to the document. You should never add an event listener inside an event listener as it will make the same function execute more and more times each times if the event is fired.
document.getElementById("selectoption").onchange = function(){...}
//or
document.getElementById("selectoption").addEventListener("change", function(event){...});
<select id="selectoption">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<script>
document.getElementById("selectoption").onchange = function(){
console.log(this.value);
}
</script>
I have a drop down with multiple select option in my html page. On form submission, I am trying to capture all of the selected options by user in that drop down. but it throws me an error instead "TypeError:'instancemethod' object is not subscriptable". Following is my template.html and views.py
Template.html:
Select packages:
<form name=automationForm action="/vsawebauto/automation/results/" method="post">
//some form elements
<select id="package" name="package[]" multiple="multiple" size="5">
{% for i in ida.package_set.all %}
<option value="{{ i.pkg_id }}">{{ i.display_name }}</option>
{% endfor %}
</select>
//some form elements
<input type="submit" id="submit" value="Submit Job" />
Views.py:
def results(request):
//some code
selected_packages = request.POST.getlist['package[]']
//some code
return HttpResponse("Selected Packages:"+selected_packages)
Note: I debugged the code as well. The request.POST object has multiple selected values. For eg. when 1 and 701 packages are selected by user, request.POST has 'package[]': ['1','701']. But the code fails when I do request.POST.getlist['package[]']
request.POST.getlist['package[]']
Should be
request.POST.getlist('package[]')
Replace [] with () which was the cause of the error.
Here is the documentation and usage of getlist.
Also, change
return HttpResponse("Selected Packages:"+selected_packages)
to
return HttpResponse("Selected Packages: %s" % selected_packages)
Say I have a python list called seq and I want to render it in a select element how do I do that?
I tried:
<select name="Exercise1">
{% for item in seq %}
<option value="{{item}}">{{item}}</option>
{% endfor %}
</select>
it didn't work.
UPDATE:
here is the template code:
<!DOCTYPE html>
<html>
<head>
<title>Unit 2 Rot 13</title>
</head>
<body>
<h2>Enter some text to ROT13:</h2>
<form method="post">
<select name="Exercise1">
{% for item in seq %}
<option value="{{item}}">{{item}}</option>
{% endfor %}
</select>
<br>
<input type="submit">
</form>
</body>
</html>
and here is the rendered html source code:
<!DOCTYPE html>
<html>
<head>
<title>Unit 2 Rot 13</title>
</head>
<body>
<h2>Enter some text to ROT13:</h2>
<form method="post">
<select name="Exercise1">
</select>
<br>
<input type="submit">
</form>
</body>
</html>
I'm not sure why the element just disappears and there is no errors raised.
You are very close my friend you just missed a few spaces:
You wrote this:
<option value="{{item}}">{{item}}</option>
Which needs to look like this:
<option value="{{ item }}">{{ item }}</option>
Let me know if that fixes it. Good luck!
Without those spaces it just looks like garbage to python and to the browser :)
Check the function where you render template, it must contain:
def generate_template_for_exercize1():
seq = [1, 2, 3] #here you probably will have more complex statement
return render_template('your_template.html', seq=seq)