This is my HTML code. It's a custom DropDownList that I made. Can someone advise how I could set one of the options to be checked by default in this case below?
<div class="dropdownlistheader" ng-click="toggle('subdiv','item')">
<input type="text" readonly="readonly" class="dropdownlistinput" value="{{selectedItemValuesDisplay}}" />
</div>
<div id="ddl123" ng-show="showItemOptions" class="dropdownlist">
<div ng-show="showItemOptions" ng-repeat="option in ItemTypeDDL">
<input type="checkbox" ng-model="selected[$index]" ng-click="toggleItemSelection(option.TypeID, option.TypeName)"> {{option.TypeName}}
</div>
</div>
Based on the limited details provided in the questions, I'll suggest the following:
<div id="ddl123" ng-show="showItemOptions" class="dropdownlist" ng-init="selected[0] = true">
<div ng-show="showItemOptions" ng-repeat="option in ItemTypeDDL">
<input type="checkbox" ng-model="selected[$index]" ng-click="toggleItemSelection(option.TypeID, option.TypeName)"> {{option.TypeName}}
</div>
</div>
The ngInit directive will select the first element in the selected flags list, by setting the first index of the array to true
Related
I have the following form (using Forminator plugin) and I want to style it.
<form id="forminator-module-4712" class="forminator-ui forminator-custom-form forminator-custom-form-4712 forminator-design--default forminator_ajax" method="post" data-forminator-render="0" data-form-id="4712" novalidate="novalidate">
<div class="forminator-row">
<div id="email-1" class="forminator-col forminator-col-12 popup-email-field">
<div class="forminator-field"><input type="email" name="email-1" value="" placeholder="Email address" id="forminator-field-email-1" class="forminator-input forminator-email--field" data-required="true" aria-required="true">
</div>
</div>
</div>
<div class="forminator-row">
<div id="checkbox-1" class="forminator-col forminator-col-12 popup-checkbox">
<div role="group" class="forminator-field" aria-labelledby="forminator-checkbox-group-62f1212b1309c-label">
<label for="forminator-field-checkbox-1-1-62f1212b1309c" class="forminator-checkbox" title="I'd like my free gift!"><input type="checkbox" name="checkbox-1[]" value="TRUE" id="forminator-field-checkbox-1-1-62f1212b1309c" data-calculation="0" checked="checked"><span class="forminator-checkbox-box" aria-hidden="true"></span><span class="forminator-checkbox-label">I'd like my free gift!</span></label>
</div>
</div>
</div>
<input type="hidden" name="referer_url" value="">
<div class="forminator-row forminator-row-last">
<div class="forminator-col">
<div class="forminator-field">
<button class="forminator-button forminator-button-submit popup-submit">Sign Up</button>
</div>
</div>
</div>
</form>
The problem is, that I have another forminator form on the same site which I styled already.
I want to style the above form differently, but the element names (for buttons and inputs) are not unique.
Is there any way to select specific elements using CSS but in a unique way, so the styles are only applied to this specific form? How would I select email/submit button/etc on this form in a unique way?
I tried the following (but I'm missing something):
#forminator-module-4712 input.forminator-input[type="text"]
#forminator-module-4712 input#forminator-field-email-1
And other combinations.
I just needed element element selectors, this works:
#forminator-module-4712 input{}
Source: https://www.w3schools.com/cssref/sel_element_element.asp
I have an array like below
standardInput:any = [{val:'1'},{val:'2'},{val:'3'}];
When i loop it in my view
<div class="form-group row text-right" *ngFor='let row of standardInput' >{{row.val}}
<label class="col-sm-3 form-control-label m-t-5" for="password-h-f"></label>
<div class="col-sm-9 form-control-label m-t-5" for="password-h-f">
<div class="row">
<div class="col-sm-9" >
<input class="form-control" name="roles" [formControl]="form.controls['service_standard_sub_heading']" [(ngModel)]="row.val" id="email-h-t" type="email">
</div>
<div class="col-sm-3">
<button class="btn btn-danger" (click)="removeInputs('standard',i)">Remove</button>
</div>
</div>
</div>
</div>
The output is :3 3 3,it is showing only the last object in the array for the 3 iterations.I am not able to understand what's the reason.Can anyone please suggest help.Thanks.
I believe you are using template-driven form, if not, let me know and we can look at a solution for model-driven form :)
In forms, the name attribute needs to be unique. Even though the ngModel is unique, Angular doesn't really care about it, but looks at the name attribute instead. Since you are using a template-driven form and ngModel, I see no need to use formControl here, you can just rely on the the ngModel and name attribute instead. So, to get the unique name attribute, we can bind the row.val to it, like so:
[name]="row.val"
So your complete template would look like this:
<form #form="ngForm">
<div class="form-group row text-right" *ngFor='let row of standardInput'>
<input class="form-control" [name]="row.val" [(ngModel)]="row.val">
</div>
</form>
I have an angular 2 application, where i use a ngFor to handle an bunch of checkboxes. when i initialize this component i need to set the state of the checkbox based on weather an id excists in an array
<div *ngFor="let option of listOptionResponse.options" class="col-md-12">
<div class="col-lg-12">
{{option.headline}}
</div>
<div class="col-lg-2 col-md-2 ">
<input type="checkbox" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose">
</div>
</div>
In the component i have an array and if the options.id exists in this array i wanna set it to true.
I cannot think of a good way to do this, and i have been looking for some sort of init event to use, bu without luck.
(this has nothing to do whith the excisting (change) event)
I hope you can help, and thanks in advance
You can just bind to checked like
<input type="checkbox" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose"
[checked]="ids.indexOf(option.id) != -1">
Perhaps you could try this:
<input type="checkbox" [(ngModel)]="option.id" class="form-control" (change)="ServiceAddOrRemove($event, option.id)" name="choose">
I have the following html
<div class="row">
<div class="col-lg-6">
<label class="radio">
<input type="checkbox">
</label>
</div>
<div class="col-lg-1">
<input type="text" disabled="" class="col-lg-2 form-control" name="notes_33">
</div>
</div>
there is an on click event on the checkbox input in "col-lg-6" div, i want to get the value input text under "col-lg-1", here is my way to get it
$("#medication").on('click', ':checkbox', function(){
var $note = $(this).parent().parent().siblings('.col-lg-1').find(":text");
//... change the value of $note
});
is my way is good? is there any better way to traverse to the input filed starting from the check box?
This looks like simpler:
$(this).closest('.row').find(':text')
Edit:
Here is the comparisons between closest and parents:
http://jsperf.com/jquery-parents-vs-closest
I'm trying to fill in my username and password on a certain web page and then the press the "sign-in" button, all automatically via Powershell.
The problem is that I cannot find the ID of the sign-in button in the html source code.
I have tried to use the command:
$link = $ie.Document.getElementsByTagName('A') | where-object {$_.innerText -match 'sign in'}
but this didn't worked either.
Any thoughts which PS command to use if I want to press the 'sign in' button?
The HTML code is as follows:
<div class="login">
<div class="content">
<div class="subsection-1">Sign in or create a <a id="ctl00_HeaderUserControl_LoginUserControl_hypNewAccount" href="/authentication/registerprovider.aspx?">new account</a></div>
<div class="subsection-2">
<span class="navy bold">What is your email address?</span>
<div class="indent">
<span class="bold">Email:</span>
<input id="loginEmail" class="text-box" type="text" maxlength="100" tabindex="1" />
<img class="ajax-loader" src="/content/images/research/global/transparent.gif" alt="" />
</div>
<div class="invalid-email"></div>
</div>
<div class="subsection-3">
<span class="navy bold">Do you know your password?</span>
<div>
<input id="passwordNotKnown" name="passwordSwitch" type="radio" checked="checked" />
<label for="noPassword">No, I don't know my password or I'm new .</label>
</div>
<div>
<input id="passwordKnown" name="passwordSwitch" type="radio" />
<label for="noPassword">Yes, my password is:</label>
<input id="loginPassword" class="text-box" type="password" maxlength="50" tabindex="2" />
</div>
<div class="invalid-password"></div>
<div class="error"></div>
</div>
<div class="subsection-4">
<button type="button" class="login-button greenButton" tabindex="4">Sign in</button>
Cancel
<input id="stayLoggedIn" type="checkbox" tabindex="3" />
<label for="stayLoggedIn">Stay signed in</label>
</div>
</div>
<div class="reset-password">
<div class="subsection-1">Would you like to reset your password?</div>
<div class="subsection-2">Choosing <span class="bold">yes</span> will reset your password and email a temporary password to: <span class="repeat-email"></span></div>
<div class="subsection-3">
<div class="center">
<button class="reset-password-button" type="button">Yes</button>
<button class="do-not-reset-password-button" type="button">No</button>
</div>
</div>
</div>
</div>
I came here looking for a similar answer and figured out how to get this done. Posting here for any future searchers. As noted by Szymon, getElementsByClassName returns an array, and you will need to select the item you need before the click. In my case the classname was button and I was able to click it using the following:
$submitButton = $doc.documentElement.getElementsByClassName('button') | Select-Object -First 1
$submitButton.click()
This works for me because there is only the one item with the classname button, so your results my vary if you have more than one with the same name. Just change what you grab using select-object if need be.
As #Jamie-Taylor mentioned the login button is in fact a button.
You can access it not only by the id but also by the class name using document.documentElement.getElementsByClassName. Please notice this function will return list of elements as more than one element on page can have the same class.
EDIT
I was wrong: in order to have getElementsByClassName you have to call it on document.documentElement instead of document