Here is an exemple of what I have:
forms.py
class aForm(forms.Form):
choices = [
('value1', 'choice1'),
('value2', 'choice2'),
('value3', 'choice3')
]
dropDownList = forms.ChoiceField(
choices=choices)
I want to add the attribute Disabledd to the first choice, like this:
<select>
<option selected value="value1" disabled>choice1</option>
<option selected value="value2">choice2</option>
<option selected value="value3">choice3</option>
</select>
How can I add that Disabled attribute from the forms.py file ?
After long search I didn't find the solution am looking for, but I did pass that problem with another aproch, what I did is creating a completly RAW html form from scratch where I had full power so I added the "disabled" attribute to the first option, without touching the views.py file, what I mean is am still using forms.Form and all the validations I already writen, this works by just naming your the fields in the RAW html form the same names as in the Form.
You can have a look at solution to this question. It pretty much addresses the same.
Disable Choice In ModelMultipleChoiceField CheckBoxSelectMultiple Django
Related
I am having an issues connecting my html css javascript front-end with django. I have html templates that look and work exactly as I want them too. I can display data without issue with I make a call to a django field that is part of my current view using:
<a>{{ thing.attribute }}</a>
That works great.
My issue is when trying to connect a form to the django view I created for updating and creating records using a POST action. For example, when using an mdbootstrap themed template, I have implemented an html <select> object like this:
<select type="select" class="mdb-select" id="fieldOne">
<option value="0">Something</option>
<option value="1">Something</option>
<option value="2">Something</option>
</select>
This works and looks exactly like I want it too as it is correctly utilizing the proper css and javascript.
When I want to place a django form object in place of the same field, I have to call it like this:
<div class="mdb-select">{{ thing.attribute }}</div>
I have to call it as a <div> in django, and it's breaking my css and javascript, thus not displaying correctly and not usable. I can see the data being returned when I look at the rendered html in dev tools, so I know my django views and forms are working.
Is there any way to call a django object while still utilizing the <select> tags in my html template?
1) If you're using model forms, do one one this:
Use django widget_tweaks and then in your template do this:
{% load widget_tweaks %}
<label>{{my_form.field.label}}</label>
{% render_field my_form.field class="mdb-select" name="field" %}
OR
class NewSomethingForm(ModelForm):
class Meta:
model = Account
fields = ['name', 'last_name', 'description']
def __init__(self, *args, **kwargs):
self.fields['description'].widget = forms.Textarea(attrs={'class': 'md-textarea', 'style': 'height: 75px'})`enter code here`
2) If you're not using model forms, then in your template, try this:
<select type="select" class="mdb-select" id="fieldOne" name=field>
<option value="my_form.field_name.field.choices.0">my_form.field_name.field.choices.1</option>
<!–– follow same sequence -- >
</select>
Don't forget to give the dropdown element a name that matches the field on the form.
You can render a select field using Django ModelChoiceField. When you use this form in template using {{yourForm.select_field_name}} it will be rendered as with
id:id_select_field_name
name:select_field_name
The css classes you need to associate are included in attrs
from django import forms
class yourForm(forms.Form):
select_field_name=forms.ModelChoiceField(queryset=recieptDetail.objects.all(), widget = forms.Select(attrs = {'class':"class-name",'onchange' : "jsFunction();"}))
I am using Ionic Framework.
I would like to enter the first option as the default, but doing it this way does not work.
What can I do?
<select ng-model="newSpesaAereo.valuta">
<option ng-selected="selected">Euro</option>
<option>Dollaro</option>
<option>Dollaro canadese</option>
<option>Sterlina</option>
</select>
If I analyze the page with Google Chrome Developer Utility I watch this.
If I edit this HTML and I delete the selected row, then Euro is visible.
Why is this happening?
Set ng-selected="true".
Example:
<option ng-selected="true">Carta di credito</option>
The reason the default option isn't working is because, in your controller, you've likely initialised your form model like so:
$scope.newSpesaAereo = {}
If you want to set default form options, you should also set them in the form model. For example, set 'valuta' to 'Euro' like so:
$scope.newSpesaAereo = { valuta: "Euro" }
I hope this helps!
P.S when posting issues like this you should also include the code for the controller that the view is bound to.
You need to use ng-selected instead of just selected.
https://docs.angularjs.org/api/ng/directive/ngSelected
<select ng-model="newSpesaAereo.metodoPagamento">
<option ng-selected="selected">Carta di credito</option>
<option>Bancomat</option>
<option>Contanti</option>
<option>Altro</option>
</select>
I have a Employee entity that I'm binding to an "Edit" view in an MVC3/Razor application. The Employee entity has a property for OccupationTypeId. OccupationTypeId points to the OccupationType table which contains several lookup values. The natural choice would be to use #Html.DropDownListFor to render a <select> tag containing a list of Occupations.
The OccupationType table schema is fairly standard: Id, Name, Description, IsEnabled. Since OccupationTypes can be disabled, I want the OccupationTypeId drop down to still render disabled options so the user can always see their selection if it's disabled, but a disabled option can't be selected by the user. In other words, a user can't change an existing OccupationTypeId to a disabled option.
I thought about creating a #Html extension method to build my <select> tag with the options and simply tack on a disabled attribute to disabled options. I think that would be straight forward...
However, disabled selected options don't seem to post back to the controller method. In other words, Employee.OccupationTypeId would be null when I post to Edit.
Is there any way to change this behavior or is this built in to MVC 3? I thought about using hidden fields, but what if OccupationTypeId is required and I have validation enabled?
Has anyone else faced this?
Thanks
You could have a hidden field that gets updated when the change event occurs in the dropdown list. This way the OccupationTypeId field is always passed.
<input name='CurrentOccupationId' type='hidden' value='#Model.Employee.OccupationTypeId' />
<script>
$(function() {
$('#dropDownId').change(function() {
$('input[name="CurrentOccupationTypeId"]').val($(this).val());
});
});
</script>
Is there any way to change this behavior or is this built in to MVC 3?
I thought about using hidden fields, but what if OccupationTypeId is
required and I have validation enabled?
It has nothing to do with MVC 3 in particular; all disabled html elements don't post back in general.
The solution I've used is to "simulate" the disable element by styling the appropriate element with CSS. You can, for example, set the element's background (or foreground) color to gray and set the readonly attribute (when it makes sense) instead.
See this similar thread.
Hello (this is a copy of my post on the Seaside mailing list; first try at stackoverflow),
How do I get the rendered display of a drop-down select list to show an updated selection from another session, in Firefox? (I'm using 3.6.13)
This problem does not appear in Chrome, IE or Opera.
Here is the scenario: I have a domain object with an attribute displayed in a drop-down list. Some other session updates the attribute. I refresh my display, but the rendered selection does not change. Using Firebug, the generated html shows the updated selection. This may be basic HTML knowledge, but should the displayed value not update to show the changed 'selected' option? Or is the value intended to be set only on the initial page display and then only by a user action?
Example: I have a demo Seaside component with a class variable #testStateListSelection which is selected to 'one' in a Seaside session. If I change the value to 'three' in another Seaside session, the displayed value stays as 'one' in the original session after rendering again, even though the "selected" in the generated HTML shows "three".
renderSelectionListOn: html
html form: [
html select
list: #('one' 'two' 'three' 'four' 'five');
selected: self class testStateListSelection;
callback: [:value | self class testStateListSelection: value].
html break.
html submitButton
callback: [Transcript cr; show: self class testStateListSelection];
with: 'Save']
...the displayed value shows 'one', even though the HTML is...
<select name="1">
<option value="1">one</option>
<option value="2">two</option>
<option value="3" selected="selected">three</option>
<option value="4">four</option>
<option value="5">five</option>
</select>
How do I get the drop-down selected value to show 'three'?
BTW: all I know about HTML & browser behaviour I've learned from coding Seaside, so I may have a skewed perspective ;-)
Thanks for any help.
The problem is that, when you refresh your page, your browser is remembering which option was previously selected. This feature is designed to make it harder to lose your form data during long forms and is discussed a bit on the Mozillazine forums
Instead of refreshing the page. if you load the page "fresh" by going to the address bar and pressing return, you'll get the page loaded from the server again - with the updated select
Another cause of the problem might be that your browser tries to autocomplete the form for you based on your last submission. Make sure you have disabled this feature in the preferences of your web browser. You can also try to tell the form-tag with an unofficial attribute not to autocomplete:
html form noAutocomplete; with: [ ...
Whenever the page is refreshed the accessor self class testStateListSelection is run.
In fact the code you provide works perfectly for me. Are you sure that the accessors work as expected?
testStateListSelection
^ testStateListSelection " <-- forgetting the return is a common problem "
testStateListSelection: aString
testStateListSelection := aString
If using javascript to refresh the page...
window.location.reload();
...will NOT re-render the select elements. They will retain their dynamic values regardless of what the new source HTML says.
To force the select elements to re-render, use...
window.location.reload(true);
I have a select box (for a customer field) on a complex order form, when the user starts to add lines to the order they should not be allowed to change the customer select box (unless all lines are deleted).
My immediate thought was that I could use the disabled attribute, but when the box is disabled the selected value is no longer passed to the target.
When the problem arose a while ago one of the other developers worked around this by looping through all the options and disabling all but the selected option, and sure enough the value was passed to the target and we've been using since. But now I'm looking for a proper solution, I don't want to loop through all the options because are data is expanding and it's starting to introduce performance issues.
I'd prefer not to enable this / all the elements when the submit button is hit.
How can I lock the input, whilst maintaining the selected option and passing that value to the target script? I would prefer a non-JavaScript solution if possible, but if needed we are running jQuery 1.4.2 so that could be used.
Edit
I've tried to use the readonly attribute with little success, here's the jQuery code I'm using:
$('.abc').each(function(element) {
$(this).attr('readonly','readonly');
});
When inspecting the element with Firebug the readonly attribute had been set, but I can still change the value in the select box?!
This works:
$('.abc :not(:selected)').attr('disabled','disabled');
jQuery will still be looping through the elements behind the scenes, but I seriously doubt you will have performance issues unless your select has thousands of elements (in which case your usability issues will far out weigh the performance issues). The original code must have been doing something wrong.
This works fine
<select disabled="true">
<option value="1">one</option>
<option value="2">two</option>
<option value="3">thre</option>
</select>
Add a hidden field to your form and onsubmit take the value from the select and place it in the hidden field's value
As per the HTML spec, readonly is not supported by the select tag
The element does not accept readonly attribute. Readonly is a wrapper that fix this.
Try this:
https://github.com/haggen/readonly
"select" does not have a readonly attribute. It has only disabled attribute.
http://www.w3schools.com/TAGS/att_select_disabled.asp
So your best best is:
$('.abc').each(function(element) {
$(this).attr('disabled','disabled');
});
HTH
I'd have an idea, that was functional to me:
In my case, when a user selects an option (an account) in a drop-down on a form of an accounting system, e.g., some kind of "expense", that I know that may not be "credited", just "debited", another drop-down that selects the accounting operation (Debit/Credit), changes these drop-down to "Debit".
Then, I "lock" (using "disabled=true") these last "drop-down" in the "debit" option.
The problem that occurred to me these moment, was similar of yours: after disabling the drop-down element, I couldn't receive it in the target, anymore.
So, what I've done:
1 - Changed the option in the second drop-down list, as I said:
document.getElementById("operation").value = "D";
`
2 - Disabled that dropdown:
document.getElementById("operation").disabled = true;
Then, the "cat salt":
3a- Added to the "FORM" element, an "onsubmit"
onsubmit = "validForm()"
3b - On my [java-script] file I added the ["valid-Form"] function:
function validForm()
{
document.getElementById("operation").disabled = false;
}
Voilá!
A simple way to disable any Select is to just disable mouse interaction.
For example:
<select id="complaint_status" name="complaint_status" class="disabledSelect" value="Pending">
<option value="Pending" selected>Pending</option>
<option value="Complete">Complete</option></select>
css
.disabledbutton {
pointer-events: none;
opacity: 0.4;}
The value of Select will be SUBMITted.
Hope it works!!