I have a bit of trouble in Odoo, setting the selected attribute for a website-formular.
I have some data in an underlying model, which is displayed in a table inside the form. The lines are displayed correctly, but the values for the select-field are not set correctly. It always shows the first value in the select-list instead the saved value in the model.
<t t-foreach="quote_lines" t-as="quote_line">
<tr>
<td>
<!-- public categories for a selection field -->
<select t-attf-name="supplier_{{quote_line.line}}">
<t t-foreach="categories" t-as="c">
<t t-if="c.name==quote_line.supplier"><option t-field="c.name" selected="selected" /></t>
<t t-if="c.name!=quote_line.supplier"><option t-field="c.name" /></t>
</t>
</select>
</td>
....
</tr>
</t>
The form is loaded into odoo and displays fine - except that the -tag ignores my selected attribute. When i look in the generated html, the select/option values are set, just this attribute is ignored.
Any hints what i'm doing wrong or just don't see?
Try using selected="True"
Also, take a look at how website_sale does for countries:
<div t-attf-class="form-group #{error.get('shipping_country_id') and 'has-error' or ''} col-lg-6">
<label class="control-label" for="shipping_country_id">Country</label>
<select name="shipping_country_id" class="form-control" t-att-disabled=" 'disabled' if shipping_id >= 0 else ''">
<option value="">Country...</option>
<t t-foreach="countries or []" t-as="country">
<option t-att-value="country.id" t-att-selected="country.id == checkout.get('shipping_country_id')"><t t-esc="country.name"/></option>
</t>
</select>
</div>
https://github.com/odoo/odoo/blob/9.0/addons/website_sale/views/templates.xml#L1072-L1080
Related
On a simple form, with one textbox not readonly, I am getting multiple records generated which are identical except for the Id and UpdatedDate. I am using Entity Framework Core 6 and Razor Pages. This occurs only once every few hundred entries. Any thoughts?
I am entering the date like this:
Rate.UpdatedDate = DateTime.Now;
where Rate is the model I am binding to. I am saving changes with:
_context.MedBAmounts.Add(Rate);
await _context.SaveChangesAsync();
<td class="form-group" style="width:7%">
<label asp-for="Rate.NewAmount" class="control-label"></label>
<select asp-for="Rate.NewAmount" id="newRate" class="form-control">
<option>164.90</option>
<option>230.80</option>
<option>329.70</option>
<option>428.60</option>
<option>527.50</option>
<option>560.50</option>
</select>
</td>
<td class="form-group" style="width:6%">
<input type="submit" value="Save" class="btn btn-primary" asp-route- mode="#Model.Mode" style="margin-top:15px; padding:5px;" />
</td>
I am getting:
Two Ids, UpdateDate off by 1 second and same NewAmount. (https://i.stack.imgur.com/2IIdr.png)
I use reactive forms within my app. In a certain form I want to display a required (Validators.required) select like this:
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
[multiple]="dformControl.multiple">
<option *ngIf="!dformControl.value"
value="undefined">
Choose ...
</option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
The problem is whether I use value="undefined" or value="" the form control still is set to valid because it got a value. Do not present the value attribute results in value="Choose ...".
Am I using select with reactive forms in a false way or how would I be able to make the option "Choose ..." being not valid??
Assigning initial value of select control to null will do the trick. Try below,
model_property = null
....
this.fb.group({
....
'control_key' : [this.model_property, Validators.required]
...
})
Check this Plunker!!, Look into app/reactive/hero-form-reactive.component.ts file.
I updated the Plunker to include below and it seems to be working,
<select id="power" class="form-control"
formControlName="power" required >
// see the value is set to empty,
<option value="">Choose...</option>
<option *ngFor="let p of powers" [value]="p">{{p}}</option>
</select>
Hope this helps!!
What I do is add a blank option and when that is selected since there is no value it is not valid.
<select class="form-control"
[id]="dformControl.key"
[formControlName]="dformControl.key"
[multiple]="dformControl.multiple">
<option></option>
<option *ngFor="let opt of dformControl.options"
[value]="opt.value"
[selected]="dformControl.value == opt.value">
{{opt.label}}
</option>
</select>
I have the following select menu:
<div class="medium-3 columns">
<label>First Menu
<select name="first-menu">
<option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
</select>
</label>
</div>
I would assing a model to the select menu so i edited the code in the following way (i see it here):
<div class="medium-3 columns">
<label>First menu
<select [ngModel]="myForm.firstMenu" (ngModelChange)="onSelected($event)" name="first-menu">
<option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
</select>
</label>
</div>
On ngModelChange it triggers the following method in the component:
onSelectedFirstMenu(e: any): void {
myForm.firstMenu = e;
}
Since i have to add several menu, i would make code reuse so i do not want to create multiple methods like onSelectedSecondMenu, onSelectedThirdMenu and so on for every html menu.
So i just want to use a different ngModel for every menu (myForm.secondMenu, myForm.thirdMenu and so on...) to get the selected option.
Is it possible in Angular2?
I solved and there are 2 ways to get the same behaviour:
First way (preferred):
<div class="medium-3 columns">
<label>First Menu
<select [(ngModel)]="myForm.firstMenu" name="first-menu">
<option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
</select>
</label>
</div>
Second way:
<div class="medium-3 columns">
<label>First Menu
<select [ngModel]="myForm.firstMenu" (ngModelChange)="myForm.firstMenu = $event" name="first-menu">
<option *ngFor="let i of items" [value]="i.name">{{i.name}}</option>
</select>
</label>
</div>
More info here
If i understand your question correctly, every single menu has a different purpose, therefore, trying to somehow combine the invoked method for all of those menus is incorrect.
Having a method for each of those <select>s is the right approach, each one of them should have its' own logic
Please let me know if i misunderstood
Use [(MyForm.firstMenu)] to bind the select to your firstMenu property
Something like this should do depending on your concrete requirements:
<select [(ngModel)]="myForm.firstMenu"
constructor() {
this.myForm.firstMenu = items[0];
}
I have a dropdownlist control and it's populated with a list of peoples names from a database. I want to enable a CheckBox control if the user selects a person in the list and disable the checkbox if they select BLANK (also an option in the list).
Here is a portion of my code...
<tr>
<td> <asp:Label ID="lblAssignedTo1" runat="server" Text="Assigned To:"></asp:Label></td>
<td><asp:DropDownList ID="ddlAssignedTo1" runat="server" AppendDataBoundItems="True" DataSourceID="dsAssignedTo" DataTextField="StaffName" DataValueField="StaffID"><asp:ListItem Text="" /></asp:DropDownList></td>
</tr>
<tr>
<td> <asp:Label ID="LabelEmail1" runat="server" Text="Send Email:"></asp:Label>
</td>
<td><asp:CheckBox ID="cbEmail1" runat="server" Checked="true" /></td>
</tr>
The checkbox is a trigger to send an email to the person selected from the list. I want it to default the checkbox to "enabled" if a person is selected from the list to make sure the program I am using is going to send an email later on.
I had a look at http://api.jquery.com/change/ for an example of this, but it's not using a checkbox control, so not sure if it would work. Sorry I am new to jScript.
Thanks in advance
A pure HTML and JavaScript approach would look something like this:
<select id="people">
<option value="">Select One</option>
<option value="person1">Person 1</option>
<option value="person2">Person 2</option>
<option value="person3">Person 3</option>
</select>
<input type="checkbox" name="sendemail" id="sendemail" disabled="disabled" />
$(document).ready(function() {
$('#people').change(function() {
if($(this).val() == '') {
$('#sendemail').attr('disabled', 'disabled');
}
else {
$('#sendemail').removeAttr('disabled');
}
});
});
http://jsfiddle.net/AEXpG/
In terms of your code, just grab the select list and checkbox ClientId and then apply the above jQuery code to them.
Below is a working example of a form. I need to display additional text field if user selects "Other" in drop down menu.
Unfortunately, I can't use example below because it requires Mootools but I use Jquery. Don't want to force users to download one more file (Mootools) just for one form.
Is there any way how to do this without Mootools? Thanks.
<form action='user_friends_manage.php' method='POST'>
<table cellpadding='0' cellspacing='0'>
<select name='friend_type' onChange="if(this.options[this.selectedIndex].value == 'other_friendtype') { $('other').style.display = 'block'; } else { $('other').style.display = 'none'; }">
<option></option>
<option value='1'>Friend</option>
<option value='2'>Family</option>
<option value='other_friendtype'>Other</option></select>
</td>
<td class='form2' style='display: none;' id='other'> <input type='text' class='text' name='friend_type_other' maxlength='50' /></td>
</tr></table></form>
try this:
*if(this.value=='other_friendtype') {document.getElementById('other').style.display='block'}*
in onchage event of select control.