I'm setting up a currency selector and I want it to display the currency which was chosen even when the page reloads. It always defaults back to displaying USD.
I have looked into ways to display a default but have only found ways to select one option as the default. I want the default to be whatever was last clicked on, not one set option.
<select id="multicurrency-selector">
<li>{% for link in linklists.currency.links %}
<option value="{{ link.url }}">{{ link.title }}</option>
{% endfor %}</li>
</select>
<script>
document.getElementById("multicurrency-selector").onchange = function() {
if (this.selectedIndex!==0) {
window.location.href = this.value;
}
};
</script>
Related
I have a form that I want to submit dynamically once the page is loaded. one of the form field is preselected post_city loaded through an URL and preselected among many options. The Django template is as follow:
<body onload="onLoadSubmit()">
<form id="headerform" method="GET" action="{% url 'search' %}" data-action="" name="headerform" >
<ul id="menu">
<!-- city options -->
<span>
<li class="">
<select id="post_city" form="headerform" class="" name="h_qc" onchange ="this.submit()">
<option value="{{post_city}}">
{{post_city}}
</option>
{% for city in all_p_cities %}
{% if city.city_name != post_city %}
<option value="{{city.city_name}}">
{{city.city_name}}
</option>
{% endif %}
{% endfor %}
</select>
</li>
</span>
<!-- category options -->
<span>
<li >
<select id="catAbb" name="h_qcc">
<option value="{{category_name}}">
{{category_name}}
</option>
{% for category in all_p_categories %}
{% if category.category_name != category_name %}
<option value="{{category.category_name}}">
{{category.category_name}}
</option>
{% endif %}
{% endfor %}
</select>
</li>
</span>
</ul>
</form>
<script type="text/javascript">
function onLoadSubmit()
{
document.headerform.submit();
}
</script>
</body>
This is working well except that it gets an infinite loop. That is once the page is loaded, it keeps reloading for infinite that I could not even scroll down the page.
Note: I could simply add submit button. However, I want the form is submitted automatically once the page is loaded based on the preselected options passed through the URL from previous page.
After trying many suggested solutions I found this solution made by bakchod_launda which worked for me.
<body onload = "if (location.search.length < 1){ document.getElementById('form').submit()}">
I have 3 drop down menus. each menu takes it's values through variable passed through object context. here is the view function:
def home_page(request):
template = 'path/to/template.html'
cities = City.objects.all()
all_categories = Category.objects.all()
all_sub_category = Sub_Category.objects.all()
context={
'cities': cities,
'all_categories': all_categories,
'all_sub_category': all_sub_category,
}
return render(request, template, context)
the template is as follow:
{% load staticfiles %}
<select>
{% for city in cities %}
<option value='{{city.city_name}}'>
{{city.city_name}}
</option>
{% endfor %}
</select>
<select>
{% for category in all_categories %}
<option value='{{category.category_name}}'>
{{category.category_name}}
</option>
{% endfor %}
</select>
<select>
{% for sub_category in all_sub_category %}
<option value='{{sub_category.sub_category_name}}' >
{{sub_category.sub_category_name }}
</option>
{% endfor %}
</select>
<span > move to next page </span>
the problem is that the resultant URL is missing all three variables even though all variables are displayed in the drop down menus. here is the resultant link:
http://127.0.0.1:8000/towns///
I tried also the following href:
href="http://domain_name/towns/{{city.city_name.0}}/{{category.category_name.0}}/{{sub_category.sub_category_name.0}}"><span > move to next page </span> </a>
any help or suggestion?
What you have done doesn't work because city variable does not exist outside the for loop.
Similarly for other variables
The best way to do this is wrap all the select tags in a form. Then send the form via GET/POST to a view. Then from that view, you can redirect to the url that you want.
You can also use javascript to redirect to the url directly from the template, but I feel what I mentioned above is much cleaner
<option value="1" {{ selected }}>1</option>
<option value="2" {{ selected }}>2</option>
<option value="3" {{ selected }}>3</option>
<option value="4" {{ selected }}>4</option>
I have a flask app with a handful of dropdown menus. I want to pass the selected value when a user submits the form so they see their previous selection on the next page.
Could someone provide a simple example of this? I just cant conceptualize how to accomplish this.
Thanks
Python Flask view
#app.route('/form/')
def form():
# list of tuples representing select options
choices = [(str(x), str(x)) for x in range(1, 20)]
# test if value was passed in (e.g. GET method), default value is 1
selected = request.args.get('choice', '1')
# application 'state' variable with default value and test
state = {'choice': selected}
return render_template('view_form.html', choices=choices, state=state)
Within Jinja template:
{% for row in choices %}
<option value="{{ row[0] }}"{% if row[0] == state.choice %} selected{% endif %}>{{ row[1] }}</option>
{% endfor %}
I am using Django 1.5. Suppose I have a view located at address: example.com/page/*value* I pass the value to the template in the context.
I want to have a checkbox, that will control the *value*
So for example I go to example.com/page/5
and the checkbox will then look like this:
0
5 (checked)
10
I select 10, click on the button, it redirects me to /page/10
In AngularJS I had ng-model for the value and it wasn't generally a problem, but what's the Django way of doing a similar thing?
Is it even possible by means of Django templates and pure HTML or do I have to write a bit of javascript?
I currently have it as a dropdown:
<ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
<li class="dropdown-header">Chosen: {{value}}</li>
...options...
</ul>
<select> works too, but I cant, quite figure out how to show a value by default:
<select>
<option value="0">0</option>
<option value="5">5</option>
<option value="10">10</option>
</select>
If you are rendering the select box manually, you just need to add the selected attribute
<select>
<option value="0">0</option>
<option value="5" selected>5</option>
<option value="10">10</option>
</select>
In a Django template, if value is in the template context, you can use an if tag to add the attribute.
<select>
<option value="0" {% if value == 0 %}selected{% endif %}>0</option>
<option value="5" {% if value == 5 %}selected{% endif %}>5</option>
<option value="10" {% if value == 10 %}selected{% endif %}>10</option>
</select>
However, manually rendering templates is often a bad idea. You should consider using Django forms where possible, as they help automate validating input and html rendering of form fields.
Redirecting to a new page when an option is selected is a task for JavaScript, not Django.
You can try and use <select> and optionally set selected parameter of <option> with Django {% ifequal a b %} syntax:
<select>
<option {% ifequal value 0 %} selected {% endifequal %}> 0 </option>
<option {% ifequal value 5 %} selected {% endifequal %}> 5 </option>
<option {% ifequal value 10 %} selected {% endifequal %}> 10 </option>
</select>
Similarly you would do checkbox by setting checked parameter
<input type='checkbox' {% ifequal value 0 %}checked{% endifequal %}> 0
....
You can also use form to do the task, simple example:
from django import forms
class SelectionForm(forms.Form):
page = forms.ChoiceField(label="Your label", choices=((0, '0'), (5, '5'), (10, '10)) required=True)
And your view:
from django.views.generic import FormView
from django.http import HttpResponseRedirect
from django.core.urlresolvers import reverse
class SelectionView(FormView):
form_class = SelectionForm
template_name = "your/template.html"
def get_initial(self):
return {'page': self.kwargs['page']}
def form_valid(self, form):
return HttpResponseRedirect(reverse('selection-view', kwargs={'page': form.cleaned_data['page']})
In urls.py you should have numeric param somewhere in your url, called 'page'. Rendering form in template is up to you, also submitting form when select is changed.
I'm using flask/jinja in order to make a simple web application. I have a table of records which is taken from a db table, and is called by a webpage which loads the list of records. On each row there is a dropdown list (done using the select HTML tag) on a column.
I realize the below code doesn't do what its supposed to, currently the last option (fourth) is automatically selected because of the selected tag. I've left it in to try show what I'm trying to implement.
Ideally I'd want it to check the current record's status (rec.status in the code below) and depending on that, select the appropriate item in the dropdown.
HTML:
<tbody>
{% for rec in records %}
<tr>
<td>{{ rec.task }}</td>
<td>
<select>
<option value ="zero" selected={{rec.status==0}}>Zero</option>
<option value ="first" selected={{rec.status==1}}>First</option>
<option value ="second" selected={{rec.status==2}}>Second</option>
<option value ="third" selected={{rec.status==3}}>Third</option>
</select>
</td>
<td><a href={{ "/update_status/"~rec.id}}>Update</a></td>
</tr>
{% endfor %}
</tbody>
Thanks!
You're on the right track - but currently, you're printing selected in all the options in your select box. You can try something like this to only print selected on the correct option:
<select>
<option value="zero"{% if rec.status==0 %} selected="selected"{% endif %}>Zero</option>
<option value="first"{% if rec.status==1 %} selected="selected"{% endif %}>First</option>
<option value="second"{% if rec.status==2 %} selected="selected"{% endif %}>Second</option>
<option value="third"{% if rec.status==3 %} selected="selected"{% endif %}>Third</option>
</select>
For the future Googlers:
If you're using WTForms and want to set the default selection in Jinja, you might dream that something like this could work:
{{ form.gender(class='form-control', value='male') }}
but it doesn't. Neither does default='male' nor selected='male' (at least not for me in Jinja 2.8 and WTForms 2.1).
If you're desperate and don't want to set it in your forms.py and don't mind getting a little hacky, you can do this:
{{ form.gender(class='form-control hacky', value=data['gender']) }}
<script>
var els = document.getElementsByClassName("hacky");
for (i = 0; i < els.length; i++) {
els[i].value = els[i].getAttribute('value');
}
</script>
This sets it on page load using JavaScript and lets you pass the default selection in the SelectField without having to mess with your forms.py. There's probably a better way of doing this in Jinja, but I haven't found it yet.
Just a small addition to the other answers: you can keep it short by using inline conditions:
<option value="zero" {{'selected' if rec.status==0}}>Zero</option>
And if you are using WTForms like mentioned in another answer, you can set the default value in your route function (but don't forget to process the form as described in the wtforms docs):
form = PreviouslyDefinedFlaskForm()
form.task.default = "third"
form.process()
FYI- for HTML 5, selected="selected" becomes just selected like this:
<option value="zero"{% if rec.status==0 %} selected{% endif %}>Zero</option>
Here's another way of setting the selected value dynamically from a passed variable:
route.py
def route():
roles = ['admin', 'user', 'guest']
user = get_user('John Doe')
return render_template('template.html', user=user, roles=roles)
template.html
<!-- more code -->
<div class="form-group">
<label for="user-role">Role</label>
<select id="user-role" class="custom-select custom-dropdown custom-form-input">
{% for role in roles %}
{% if role == user.role %}
<option value="{{ role.id }}" selected>{{ role }}</option>
{% else %}
<option value="{{ role.id }}">{{ role }}</option>
{% endif %}
{% endfor %}
</select>
</div>
<!-- more code -->