I have this code Html for my view of an angular 2 form :
<select class="form-control" name="medicamentid"
[(ngModel)]="demandemedicamentvff.medicamentid">
<option *ngFor="let medicament of medicaments ;trackBy:
trackId" [value]="medicament.nom">{{medicament.nom}}</option>
</select>
</div>
<div class="form-group">
<label class="form-control-label"
for="field_quatite">Quatite</label>
<input type="number" class="form-control" name="quatite"
id="field_quatite"
[(ngModel)]="demandemedicamentvff.quatite"
/>
</div>
I want if the value selected is equal to one of medicament.nom stored in database the the max on the second input is equal to 'medicament.quantity' .
I didn't find a solution as i am beginner .
Thank you in advance for helping me .
you may use ng-containers and ngIf
<ng-container *ngIf="medicament.nom == value_selected">
{{Call_funtion()}}
</ng-container>
Related
I have 3 radio buttons in a form which have to checked by robotframework. Below is part of the html code:
<div>
<div>
<label for="doc-22-Confirm">
Confirm
<input id="doc-22-Confirm" class="radiocheckbox" type="radio" checked="checked" value="Confirm" name="data[doc-22]"/>
</label>
<label for="doc-22-Reject">
Reject
<input id="doc-22-Reject" class="radiocheckbox" type="radio" value="Reject" name="data[doc-22]"/>
</label>
</div>
<div>
<label for="doc-23-Confirm">
Confirm
<input id="doc-23-Confirm" class="radiocheckbox" type="radio" checked="checked" value="Confirm" name="data[doc-22]"/>
</label>
<label for="doc-23-Reject">
Reject
<input id="doc-23-Reject" class="radiocheckbox" type="radio" value="Reject" name="data[doc-22]"/>
</label>
</div>
</div>
Ids are dynamic. So I'm trying to check all radios with this code but it just select one of them:
click element xpath=//input[contains(#id,'Confirm')]
I even tried this:
click element xpath=//input[contains(#id,'Confirm')][1]
click element xpath=//input[contains(#id,'Confirm')][2]
click element xpath=//input[contains(#id,'Confirm')][3]
But still it doesn't work.
Try the following:
Click element xpath=(//input[contains(#id,'Confirm')])[1]
I added the '( )' , it should solve the issue.
I have a rails code like below for input fields.
Name:-<%=text_field_tag "specification[name1]","",:class=>"autocomplete form-control"%>
<br/>
Value:-<%=text_field_tag "specification[value1]","",:class=>"autocomplete form-control"%>
I want a name and one value to be aligned horizantally to each other.
Not sure how do I go about it. I hope the question is clear.
Thanks
There are millions of ways to do this but simplest one is to use them in a table:
<table>
<tr>
<td>Name:-<%=text_field_tag "specification[name1]","",:class=>"autocomplete form-control"%></td>
<td>Value:-<%=text_field_tag "specification[value1]","",:class=>"autocomplete form-control"%></td>
</tr>
</table>
Since you are already using bootstrap, you can use the form-inline class available in bootstrap and then use a form-group class for each label and field. Just add the form-inline class to the form tag.
<form class="form-inline">
<div class="form-group">
<label for="exampleInputName2">Name</label>
<input type="text" class="form-control" id="exampleInputName2" placeholder="Jane Doe">
</div>
<div class="form-group">
<label for="exampleInputEmail2">Email</label>
<input type="email" class="form-control" id="exampleInputEmail2" placeholder="jane.doe#example.com">
</div>
This will show the two fields inline.
You can you it in this way as given in the bootstrap documentation.
I have 2 select items in one form Country's and States, depending on the choice made in Countrys the second select as other values (of states) in it !
This works when i do it in a empty form. with code here under :
Template.registerPartnerStep2.events({
'change #countryList': function (event, template) {
event.preventDefault();
var x = myTrim($("#countryList").val());
var y = Countrys.findOne({country: x});
var z = y.nr;
if(template.stateSub != null){
template.stateSub.stop();
}
template.stateSub = Meteor.subscribe('stateList', z);
},
'change #stateList' : function(event, template) {
event.preventDefault();
var x = myTrim($("#stateList").val());
if (template.citySub != null) {
template.citySub.stop();
}
template.citySub = Meteor.subscribe('cityList', x);
},
A part of my template :
{{#with addressFormData}}
<form id="partnerAddressForm" class="form-horizontal" role="form">
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"Company"}}</label>
<div class="col-sm-10">
<input type="text" placeholder="{{_"Company name"}}" id="company" class="form-control" value="{{partner_company}}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"VAT nr"}} </label>
<div class="col-sm-10">
<input type="text" placeholder="{{_"VAT nr"}}" id="vatNr" class="form-control" value="{{partner_vat_nr}}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"Phone"}}"</label>
<div class="col-sm-4">
<input type="text" placeholder="{{_"Phone"}}" id="phoneNr" class="form-control" value="{{partner_phone_nr}}">
</div>
<label class="col-sm-2 control-label" for="textinput">{{_"Mobile"}}</label>
<div class="col-sm-4">
<input type="text" placeholder="{{_"Mobile"}}" id="mobileNr" class="form-control" value="{{partner_mobile_nr}}">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"Line 1"}}</label>
<div class="col-sm-10">
<input type="text" placeholder="{{_"Address Line 1"}}" id="addressLine1" class="form-control" value="{{partner_address_line_1}}">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"Line 2"}}</label>
<div class="col-sm-10">
<input type="text" placeholder="{{_"Address Line 2"}}" id="addressLine2" class="form-control" value="{{partner_address_line_2}}">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"Country"}}</label>
<div class="col-sm-10">
<select id = "countryList" placeholder="{{_"Country"}}" class="form-control">
<option disabled selected>{{_"-- select an option --"}} </option>
<option selected="selected">{{partner_country}}</option>
{{#each countrys}}
{{> country}}
{{/each}}
</select>
</div>
</div>
<!-- Text input STATE ZIPCODE-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"State"}}</label>
<div class="col-sm-4">
<select id = "stateList" placeholder="{{_"State"}}" class="form-control" value="{{partner_state}}">
<option disabled selected>{{_"-- select an option --"}}</option>
<option selected="selected">{{partner_state}}</option>
{{#each states}}
{{> state}}
{{/each}}
</select>
</div>
<label class="col-sm-2 control-label" for="textinput">{{_"zipcode"}}</label>
<div class="col-sm-4">
<input type="text" id=zipcode placeholder="{{_"zipcode"}}" class="form-control" value="{{partner_zipcode}}" readonly>
</div>
</div>
<!-- Text input CITY-->
<div class="form-group">
<label class="col-sm-2 control-label" for="textinput">{{_"City"}}</label>
<div class="col-sm-10">
<select id = "cityList" placeholder="City" class="form-control" value="{{partner_city}}">
<option disabled selected>{{_"-- select an option --"}} </option>
<option selected="selected">{{partner_city}}</option>
{{#each citys}}
{{> city}}
{{/each}}
</select>
</div>
</div>
<!-- Button SUBMIT-->
<div class="col-sm-12 controls">
Question ONE is how can i fix it to let this work in EDIT mode when there are already values in the select ????
I fill the selects with :
{{partner_country}}
But this gives already a problem that when i choose in the list the selected value is listed 2 times ?
Second problem : Because the event is Change the statelist shows only one (the selected) state ! When is add a event click #statelist i must always click 2 times on the list before it is filled up with the collection ?
thanks !
I suppose the main point is that you shouldn't be worrying about filling the selects. We don't have to touch the DOM any more, because Meteor reacts by itself if you set it up properly.
You just need to set the selects to be filled from your collections, and then ensure that Meteor reacts when the selects change.
There are many things that are automatically reactive in Meteor - they just work. For example, if your template is showing a list of records, and someone inserts a new record in the database, Meteor will simply show the new record, because Blaze reactively shows newly inserted records.
I try as far as possible to just use the automatically reactive objects that Meteor provides out of the box.
However in our case I have used a Session variable (another reactive source) to ensure that Meteor reacts.
Whenever the countries select changes, we set a 'statenr' session variable. We use the same session variable in our states helper to get the states from the states collection. Since our session variable is reactive, whenever it changes Meteor goes back to the states collection and fetches the states again. Thus our states select object is changed for us by Meteor, we don't have to refill, so we don't have the problem of duplicate states.
I've done a meteorpad example for you so you can see what I mean:
http://meteorpad.com/pad/nccZTcPZx2k8H4XjF/select%20state%20example
To get the chosen country and state into the selects you need this code:
Template.registerHelper('selected', function(key, value){
return key == value ? {selected:'selected'}: '';
});
which I got from this slightly out-of-date page (2nd answer)
Set the selected item in a select list based on template value
and you call the helper (see {{selected partner.statenr nr}}) from your template in each <option> like this:
<select id="partnerStates">
<option disabled selected value="">Choose a state</option>
{{#each states partner.countrynr}}
<option value="{{nr}}" {{selected partner.statenr nr}}>
{{name}}
</option>
{{/each}}
</select>
If you go back to the meteorpad you can see it work in the lower half of the page. On startup I fill a partner record with Germany and Ost-Friesland nrs, then display it in the template in the lower half of the page.
My question is:
May I put submit button not in the end of form, I need to put submit somewhere in the middle of form for comfort design layout.
For example:
<form name="wide-search" action="/wide-search/" method="get" class="form-wide-search">
<select class="form-control cars">
<option>1</option>
<option>2</option>
</select>
<input type="text" class="form-control" placeholder="Поиск по всем объявлениям доски">
<select class="form-control region-search">
<option>1</option>
<option>2</option>
</select>
//HERE IS FORM SUBMIT BUTTON
<div class="input-group">
<input class="form-control" id="searchInput" type="text" name="q" placeholder="Искать среди всех товаров и услуг" value="" x-webkit-speech="">
<div class="input-group-btn">
<button type="submit" class="btn btn-primary">Найти</button>
</div>
</div>
//AND THEN WE HAVE SOME SELECT'S WITH PARAMETRES, THAT ALSO CONNECTED TO THIS FORM BUT THEIR
PLACE IS AFTER SUBMIT BUTTON
<select class="form-control mark">
<option>1</option>
<option>2</option>
</select>
<select class="form-control model">
<option>1</option>
<option>2</option>
</select>
<select class="form-control year">
<option>1</option>
<option>2</option>
</select>
</form>
I need to create Html and Css design layout for this form, I get this task from programmer, and I'm not shur will this work true, or it is wrong layout. I didn't find answer in internet for this question. So I believe someone can explain me. In the end I add image of this form.
You can put the submit button anywhere inside the form. Also with the HTML5 form attribute you don't even have to put it inside the form, e.g.
<form id="form-id">
...
</form>
<button type="submit" form="form-id">Submit from outside</button>
The location for where you place elements inside a form does not matter. A quick example would be:
Submit Button On Top of Input
Also, a submit button can be located outside the form with the the form attribute and the form's id.
Submit Outside Form
I'm updating website and gradually changing all bits over to jquerymobile to make it more phone friendly.
I had a page where a user can select either a specific month or a date range. I toggled between them using some javascript. However, since changing things the display:block etc doesn't seem to work properly. It displays them out of position. The input fields are now displayed above the selector when you toggle between them. Please see http://jsfiddle.net/pfLme/1/
Obviously I would like to get them into the correct position.
(The next task will be to try and get Datepicker working - if anyone fancies pointing me in the right direction for that)
Thank you.
(code is all on jsfiddle, but stackoverflow tells me i need to include it here too)
function showType(allornone) {
if (allornone == '1month')
{
document.getElementById('btwdateselector').style.display = 'none';
document.getElementById('monthselector').style.display = 'block';
document.getElementById('datestart').value = '';
document.getElementById('dateend').value = '';
}
if (allornone == '2dates')
{
document.getElementById('btwdateselector').style.display = 'block';
document.getElementById('monthselector').style.display = 'none';
}
} //end function
...I realise now of course that I have to get used to thinking about & taking advantage of the jquery side of jquery mobile too.
So far I came up with
$(document).on('click', '#certainmonth', function(a) {
$('#monthselector').hide();});
$(document).on('click', '#btwdates', function(a) {
$('#btwdateselector').show();});
I'm not sure yet how to include the if statement and toggle between the show and hide.
The error was only occurring in Firefox 27.0.1
Solution was to change <fieldset data-type="controlgroup"> to <div data-type="controlgroup"> around the radioboxes. Thanks to Omar for the help.
http://jsfiddle.net/pfLme/11/
<form action="page.php" name="mileageform" class="responsive_block" data-ajax="false">
<div data-role="controlgroup">
<legend>Should be at TOP</legend>
<input type="radio" name="searchtype" value="certainmonth" id="certainmonth" checked="checked" />
<label for="certainmonth">Mileage for certain month</label>
<input type="radio" name="searchtype" value="btwdates" id="btwdates" />
<label for="btwdates">Mileage between two dates</label>
</div>
<fieldset id="monthselector" data-role="controlgroup" data-type="horizontal">
<select name="month" data-native-menu="false">
<option value="1">1</option>
<option value="2">2</option>
</select>
<select name="year" data-native-menu="false">
<option value="2000">2000</option>
<option value="2001">2001</option>
</select>
</fieldset>
<fieldset id="btwdateselector" class="ui-screen-hidden">
<div class="ui-field-contain">
<label for="datestart">Start Date:</label>
<input type="date" id="datestart" name="datestart" placeholder="dd/mm/yyyy" />
</div>
<div class="ui-field-contain">
<label for="dateend">End Date:</label>
<input type="date" id="dateend" name="dateend" placeholder="dd/mm/yyyy" />
</div>
</fieldset>
<input type="submit" onclick="return checkForm();" value="Display Mileage" />
</form>
$(document).on('change', '#certainmonth, #btwdates', function (a) {
$('#monthselector').toggleClass("ui-screen-hidden");
$('#btwdateselector').toggleClass("ui-screen-hidden");
});