Want to add the attribute "selected" to this select-field in my Django-Project:
<form id="formselect" method="post">
{% csrf_token %}
<select name="position_select" id="position_select">
<option value="0">all positions</option>
{% for position in position_options %}
<option value="{{ position.id }}"
{% if form.position.value == position.id.0 %} selected{% endif %}>
Position: {{ position.position_order }}
</option>
{% endfor %}
</select>
The result with this if method is that now every option is marked as selected in the output of that HTML. Is there a better way to handle that if-statement in a for loop?
I'm submitting this form on every click with:
$("#position_select").on("change", function() {
document.getElementById("formselect").submit();
});
You can try something like this:
{% for position in position_options %}
{% if form.position.value == position.id.0 %}
<option value="{{ position.id }}" selected>
{% else %}
<option value="{{ position.id }}" selected>
{% endif %}
Or:
<option value="{{ position.id }}" {{ form.position.value == position.id.0 ? "selected" : "" }}>
Related
I have a Django form, one of the parts is populated like this:
<select
{% if 'ba1' in widget.name or 'bs1' in widget.name or 'pm2' in widget.name %}
disabled
{% endif %}
id="{{ widget.attrs.id }}"
name="{{ widget.name }}"
{% if widget.attrs.disabled %}disabled{% endif %}
{% if widget.required %}required{% endif %}
class="form-control form-control-sm
{% if widget.errors %} is-invalid{% else %} is-valid{% endif %}"
aria-describedby="{{ widget.id }}-help">
{% for value, label in widget.attrs.choices %}
{% if value in widget.value %}
<option value="{{ value }}" selected>{{ label }}</option>
{% else %}
<option value="{{ value }}" data="{{widget.value}}">{{ label }}</option>
{% endif %}
{% endfor %}
</select>
As it is a disabled field for ba1, bs1 and pm2 cases, that information will not be sent in the POST request.
So what I have done is, through a hidden input, send the selected value of the disabled select.
Unfortunately the value is always 0 instead of the correct value. I'm doing something wrong. Somebody could help me?.
For example if the selected value is 2, or 3 or 4, it doesn't matter, the hidden input says that the selected value is 0, which is not correct.
Hidden input code (not working, always value = 0)
{% if 'ba1' in widget.name or 'bs1' in widget.name or 'pm2' in widget.name %}
<input
type="hidden"
name="{{ widget.name }}"
class="form-control form-control-sm
{% if widget.errors %} is-invalid{% else %} is-valid{% endif %}"
{% for value, label in widget.attrs.choices %}
{% if value in widget.value %}
value="{{ value }}"
{% else %}
value="{{ value }}" data="{{widget.value}}"
{% endif %}
{% endfor %}
>
{% endif %}
You can try setting the field as disabled in the init method of that Form class in forms.py.
def __init__(self, *args, **kwargs):
super(YourForm, self).__init__(*args, **kwargs)
self.fields['Yourfield'].disabled = True
I want to Separate Drop Down for Color and Size under the product. Also if products is not available cart button should be disabled. Below is my code but I get both color and size in one dropdown.
<form action="/cart/add" method="post">
{% if product.variants.size == 1 %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% else %}
<select name="id" style="display:none;">{% for variant in product.variants %}
<option value="{{ variant.id }}">{{ variant.title }}
</option>{% endfor %}
</select>
{% endif %}
<div><button type="submit" name="add" class="btn">Add to cart</button></div>
</form>
{% for option in product.options_with_values %}
<select class="option-selector {{option.name}}" data-var="{{forloop.index}}">
{% if product.available %}
{% for values in option.values %}
<option value="{{values}}">{{values}}</option>
{% endfor %}
{% endif %}
</select>
{% endfor %}
I know this question was asked million times on the internet but it seems like everyone wants to have a solution with their own twist. I can't find what I need exactly.
So I used this code to display variants on my collection and then to add to cart.
<form action="/cart/add" method="post" style="text-align:center;">
<select name="id">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - Sold Out</option>
{% endif %}
{% endfor %}
</select>
<input type="submit" value="Add to cart" class="btn" />
</form>
This works but in the dropdown, it gives it to me like this:
xs / Black - $72.00
small / Black - $61.00
medium / Black - $52.00
large / Black - $74.00
xl / Black - $77.00
xxl / Black - $55.00
xs / Blue - $72.00
small / Blue - $72.00
medium / Blue - $72.00
xl / Blue - $72.00
xxl / Blue - $72.00
What I want is for the customer to select size and color separately in different dropdowns and then click add to cart.
I was looking everywhere on how to do this with no luck. Please help.
My Shopify theme is Debut if it helps.
To obtain it in separate blocks, you must iterate on the product options, which are maximum 3, so you can show size and color separately.
{% unless product.has_only_default_variant %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden"
{% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select style="display:block" class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}
You can do something like this:
<form action="/cart/add" method="post" style="text-align:center;">
<select name="id" id="{{ product.handle }}" style="display: none;">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - Sold Out</option>
{% endif %}
{% endfor %}
</select>
<input type="submit" value="Add to cart" class="btn" />
</form>
And you add the script at the end of the page:
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
var all_products = { {% for product in collection.products %}'{{ product.handle }}': {{ product | json }},{% endfor %} };
for(curr_product in all_products){
new Shopify.OptionSelectors(curr_product, {
product: all_products[curr_product]
});
}
</script>
We are relying on the Shopify function new Shopify.OptionSelectors that will split each select in a separate selects. Don't forget to add the id="{{ product.handle }}" to the main select.
Whole code:
{%- for product in collection.products -%}
<form action="/cart/add" method="post" style="text-align:center;">
<select name="id" id="{{ product.handle }}" style="display: none;">
{% for variant in product.variants %}
{% if variant.available %}
<option value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money }}</option>
{% else %}
<option disabled="disabled">{{ variant.title }} - Sold Out</option>
{% endif %}
{% endfor %}
</select>
<input type="submit" value="Add to cart" class="btn" />
</form>
{% endfor %}
{{ 'option_selection.js' | shopify_asset_url | script_tag }}
<script>
var all_products = { {% for product in collection.products %}'{{ product.handle }}': {{ product | json }},{% endfor %} };
for(curr_product in all_products){
new Shopify.OptionSelectors(curr_product, {
product: all_products[curr_product]
});
}
</script>
I have a select element which I would like to populate from a database if this information already exists. For example, this is what I did for gender:
<select class="form-control" id="gender">
<option value="-5">Not Selected</option>
{% if current_user.gender == 0 %}
<option value="0" selected>Male</option>
{% else %}
<option value="0">Male</option>
{% endif %}
{% if current_user.gender == 1 %}
<option value="1" selected>Female</option>
{% else %}
<option value="1">Female</option>
{% endif %}
</select>
Now I have another select element with 6 different options (all with integer values 0, 1, 2 ... 5). Is there a way to make it more concise instead of writing 30 lines of code like this with if statement for each one?
Yes, there is for loop in jinja2 templating.
If you have for example a python list which contain all of select options:
options = ['option1', 'option2', 'option3', ...]
<select class="form-control" id="gender">
{% for option in options %}
<option value="{{ loop.index }}"
{% if current_user.gender == loop.index %}
selected
{% endif %}
>{{ option }}</option>
{% endfor %}
<option value="-5">Not Selected</option>
</select>
loop.index represent the current iteration of the loop. (1 indexed)
This is one example, but there is other when you iterating through objects which you've gotten from a database:
objects = [object1, object2, object3, ...]
<select class="form-control" id="gender">
{% for object in objects %}
<option value="{{ object.value }}"
{% if object.value == current_user.gender %}
selected
{% endif %}
>{{ object.name }}</option>
{% endfor %}
<option value="-5">Not Selected</option>
</select>
Is there a way to retain the selected option from a drop down list that is using a for loop?
views.py:
...
queryC = request.GET.get('clientList', '')
queryT = request.GET.get('topicList', '')
topicList = Topic.objects.all().order_by('Name')
clientList = ClientDetail.objects.all().order_by('Client_name')
...
return render(request, 'app/search_es20.html', {
"responses": responses,
"query": q,
"queryR": queryR,
"noOfResults": resultsCount,
"username": username,
"topicList": topicList,
"clientList": clientList,
"queryC": queryC,
"queryT": queryT,
})
html:
Topic
<select name="topicList">
<option value="empty"></option>
{% for element in topicList %}
<option value={{element.Name}}>{{ element.Name }}</option>
{% endfor %}
</select>
Client
<select name="clientList">
<option value="empty"></option>
{% for element in clientList %}
<option value={{element.Client_name}}>{{ element.Client_name }}</option>
{% endfor %}
</select>
I have tried using IF statements but it's not doing it properly
If you have access on context (or on request) to the selected value, then you can do something like this:
<option value={{element.Client_name}} {% if element.Client_name == some_var %} selected {% endif %}>{{ element.Client_name }}</option>