Aim is to get the drop-down to work.
Normally no problems when feeding the whole Model / ModelForm into the html template as {{ form }}
Below html code snippet is my aim, but instead of {{ form }}, I would like to feed the subset {{ form.car_model_make }} and let Django automatically create all Options <option value="BWM">BMW</option> ... etc
# models.py
class Product(models.Models):
car_model_make = models.CharField(default='B', max_length=1, blank=True, choices=CAR_TYPE)
status_is_secondhand = models.BooleanField(blank=True)
# forms.py
class ProductForm(ModelForm):
class Meta:
model = Product
fields = ('__all__')
# views.py
class ProductFormView(FormView):
form_class = ProductForm
def form_valid(self, form):
form.save()
return super().form_valid(form)
def get_success_url(self):
return reverse('index')
# urls.py
urlpatterns = [
path('', index, name='index'),
path('product/', ProductFormView.as_view(template_name='product/product.html'), name='product'),
]
The choices CAR_TYPE is a list containing "BMW, Mercedes, Audi".
Trying to achieve this:
When I replace:
<option value="BWM">BWM</option>
<option value="Mercedes">Mercedes</option>
<option value="Audi">Audi</option>
in the HTML code snippet below
with
{{ form.car_model_make }}
I get "No results found"
with
<option> {{ form.car_model_make }} </option>
I get a list of the choices (BMW, Mercedes, Audi) but they are not selectable
However, with
<option {{ form.car_model_make }} </option>
It works but I get a warning Tag start is not closed. If I close the Tag, I get the tag character ">" also printed in the drop down.
same result is produced for: <option value=" {{ form.car_model_make }} "></option>
I am in the dark and the trial and error does not give me the desired solution. How do I do it?
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
</head>
<body>
<div class="container">
<div class="col-sm-12 mg-t-10 mg-sm-t-0">
<select class="form-control select2"
style="width: 100%;"
data-placeholder="Choose Car Make"
>
<option value="BWM">BWM</option>
<option value="Mercedes">Mercedes</option>
<option value="Audi">Audi</option>
</select>
</div>
</div>
</body>
</html>
It seems like there are two steps to get what you are looking for.
Get the select to show up:
instead of replacing the options, replace the entire select with {{ form.car_model_make }}
Custom formatting for the widget:
Following Django's ModelForm documentation you can override the widget to customize the look and feel, something similar to the following:
widgets = {
'car_model_make': Select(attrs={
'class':"form-control select2",
'style':"width: 100%;",
'data-placeholder':"Choose Car Make"}),
}
Related
I am using the following code in my project. I have a select element in my angular js project. for options iam passing the json values using ng-repeat. but for ng-selected, I want to show the JSON first value.
I tried two options but it doesn't work for me.
If anyone knows how to fix this please let me know.
My HTML code( option one and two):
<select select2 id="environment" name="authorization" ng-model='addNlpStepForm.restfulEntity.authorization' class="md-form-control">
<option ng-repeat="(key,value) in authorizationtype" value="{{key}}"
ng-bind="value" ng-selected="addNlpStepForm.restfulEntity.authorization == 1">
</option>
</select>
<select select2 id="environment" name="authorization" ng-model='addNlpStepForm.restfulEntity.authorization' class="md-form-control">
<option ng-repeat="(key,value) in authorizationtype" value="{{key}}"
ng-bind="value" ng-selected="key == 1">
</option>
</select>
My JSON code:
AUTHORIZATION_TYPES = {
1 : "None",
2 : "Basic",
3 : "Bearer",
};
This is what i did in my code when i wanted to display a json list by using ngFor, I tried to implement it on your example! Hope is works:
<select formControlName="type">
<option *ngFor="let type of AUTHORIZATION_TYPES" [ngValue] ="type.key"> {{type.value}} </option>
</select>
*** I also use the reactive-form approach
Please check this
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.AUTHORIZATION_TYPES = {
1 : "None",
2 : "Basic",
3 : "Bearer",
};
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js#1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<select select2 id="environment" name="authorization" class="md-form-control">
<option ng-repeat="(key,value) in AUTHORIZATION_TYPES" value="{{key}}"
ng-bind="value" ng-selected="key == 1">
</option>
</select>
</body>
</html>
How can i upgrade my select tag with additional options that can be added by a user?
F.E:
<select id = "sport">
<option value = "football"> football </option>
<option value = "volleyball"> volleyball </option>
<option value = "rugby"> rugby</option>
</select>
I need there a additional text input where a user can add new option to the select tag,
If user write an another type of sport i would like to have that sport permament as a option in my select tag.
Regards,
Take a look to the Select2 library and the "Dynamic option creation"
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css"
rel="stylesheet"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<select class="form-control js-example-tags">
<option selected="selected">orange</option>
<option>white</option>
<option>purple</option>
</select>
<script>
$(".js-example-tags").select2({
tags: true,
});
</script>
Hope this helps :)
<html>
<head>
</head>
<body>
<form>
<select multiple="multiple"
<option value="Hello">Hello</option>
</select>
</form>
</body>
</html>
I am using postgresql database in which I have table with one column and one row saying 'Hello'
I want to pull that data and display it as selection option in html form using FLASK.
Can anyone help me please,
Thanks in advance
It seems like you need to read Flask's Quickstart to learn some basic.
Here is a minimal application that meets your needs.
View function:
from flask import Flask, render_template
app = Flask(__name__)
#app.route('/')
def index():
items = get_your_data_from_db()
return render_template('index.html', items=items)
templates/index.html
<html>
<head>
</head>
<body>
<form>
<select multiple="multiple">
{% for item in items %}
<option value="{{ item.field_name }}">{{ item.field_name }}</option>
{% endfor %}
</select>
</form>
</body>
</html>
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.
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)