We Keep Coding

Autofilling an input bound with ng-model

I have a very basic username/password field, and it's bound via ng-model to two properties on my controller. They are set up like this:
loginModel = {
username: '',
password: ''
};
They are bound to input elements like so:
input(autocomplete="off" data-original-title="The email you entered is incorrect. Please try again (make sure your caps lock is off)." data-placement="top" data-toggle="tooltip" data-type-in="" data-val="true" data-val-required="The UserName field is required." name="UserName" placeholder="Email" required="required" type="email" value="" ng-model="signInVm.loginModel.username" ng-change="signInVm.checkForm()" am-autofocus)
input.inspectletIgnore(data-original-title="The password you entered is incorrect. Please try again (make sure your caps lock is off)." data-placement="top" data-toggle="tooltip" data-type-in="" data-val="true" data-val-required="The Password field is required." name="Password" placeholder="Password" required="required" type="password" value="" ng-model="signInVm.loginModel.password" ng-change="signInVm.checkForm()")
I have a submit button that checks to see if the username and password field are filled out to determine if it is disabled or not via ng-disasbled
button.btn.btn-secondary.btn-signin(type="submit" ng-disabled="!signInVm.canSubmit" ng-click="signInVm.tryLogin()" ng-if="!signInVm.isLoggingIn") Sign In
The problem I am having is that, when the page loads and Chrome autofills the two fields, it still seems to think those two fields are empty and so the submit button is disabled despite the form seemingly being filled out properly. Once you do anything on the page, like click anywhere or hit something on the keyboard, the fields detect the autofilled data and then the submit button becomes active.
I think this is because the fields are defined as '' initially, because if I set the values to something else (e.g. hello#world.com) then the button will be active... but then the fields will be prepopulated with the hardcoded data in the controller intead of autofill. I can't think of any way around this. I want the fields to be empty by default, but if they are autofilled I want the code to recognize this immediately and make the submit button active without me having to interact with the browser first. Is there any way to do this? I feel like there must be an incredibly simple solution I am missing, but I really can't think of it despite my best efforts.
Hopefully my question makes sense. Thank you for your help!

Angular 2: Disable input field without removing from formgroup?

I am working on an Angular 2 project, where I am using forms and validation and have come to the following problem. I have a page with 3 fields:
height
weight
BMI
I would like ALL 3 fields to be in my form so I have done the following:
<input name="height" type="text" class="form-control" formControlName="height">
<input name="weight" type="text" class="form-control" formControlName="weight">
<input name="bmi" type="text" class="form-control" formControlName="bmi">
So far this works fine. Although, I want BMI calculated automatically. I have a function detecting changes on the two fields (height and weight) and calculates the BMI and outputs it in the BMI input field. This works as intended as well.
HOWEVER, I would like to disable the BMI input field in order to prevent the user from being able to type anything. So I have the 3 following criteria:
The input field here meant to serve as a read only field for the user.
I also want the BMI to be part of formgroup which I send to my database when all 3 fields are valid.
(optional, but very much wanted) I want the BMI field to be an input field with the result from height and weight as I have implemented it, not as plain text.
I have tried putting a [disabled]=true tag on the BMI input field which doesn't work and gives me a warning that I should add the disabled tag in the formgroup. When I do this or use this command: this.myForm.controls['BMI'].disable(); it DOES disable it as intended, but also removes it from the formgroup. This means when I submit my formgroup only the value of height and weight is sent, bmi is left out.
How can I do this?
Any help is greatly appreciated!

Have you tried placing a readonly attribute on the input?
<input name="bmi" type="text" class="form-control" formControlName="bmi" readonly>

Are you using some kind of UI framework at all?
http://semantic-ui.com/collections/form.html#read-only-field

formGroup.getRawValue() will return even the disabled fields,
Source

Different placeholder via Javascript on same input ID

I guess this is pretty basic yet I don't know how to solve this puzzle. What I have is two inputs generated by a plugin in Wordpress. What I want to do is to change the placeholders in the fields.
The problem is that the fields ID (which I use to call the inputs via Javascript) is the same, resulting in that only the first inputs placeholder changes.
The auto-generated HTML:
<input type="password" placeholder="Lösenord" name="swpm-19" id="swpm-19" value="" class="swpm-text swpm-large required ">
<input type="password" placeholder="Retype password Here" name="swpm-19_re" id="swpm-19" value="" class="swpm-text swpm-large required ">
The Javascript:
<script type="text/javascript">
jQuery(document).ready(function($){
$('#swpm-19').attr("placeholder","Lösenord");
});
</script>
I have no idea how to call the second input since the ID's are the same. What I did notice is that the names of the inputs is different. The second inputs name is "swmp-19_re". Would it be possible to fetch the input in the Javascript via the name instead of the ID?

You cannot have duplicate id, this is invalid document.
You can use the attribute value selector to select the elements by using name attribute value.
$('input[name="swpm-19"], input[name="swpm-19_re"]').attr('placeholder', 'Lösenord');
You can also use starts with as
$('input[name^="swpm-19"]').attr('placeholder', 'Lösenord');
For more information on the type of CSS (attribute) selectors that jQuery supports check this page.

to get <input> autofocussed so that a barcode scanner could input the productcode and my ajax function could handle it

I have the following code :
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" onChange="ajaxrequest_provideProductListOnHit('protected/snippet/snippet_provideProductListOnHit.php', 'ajaxOnProductHit'); return false;" required="required" autofocus />
The problem is that :
The autofocus is not working, I'm using it in this input box only.
Actually the purpose of this input box is to get the field autofocussed so that a barcode scanner could input the productCode.
Now as you can see, my onChange event handler is not going to work here since the barcode scanner apart from the product code, inputs too.
So I need a solution here which autofocuses and once the barcode scanner inputs value in the field, calls for the mentioned ajax function.

html:
<input type="text" id="productCode" name="productCode" style="min-height: 42px;" required="required" autofocus />
js:
var pc = document.getElementById('productCode');
pc.onblur = function () {
ajaxrequest_provideProductListOnHit(
'protected/snippet/snippet_provideProductListOnHit.php',
'ajaxOnProductHit'
);
}
pc.focus();
i use onblur, because onchange would trigger after EVERY change you make (e.g. typing into the text-field will trigger after every key).
you could also provide some custom-logic, e.g. recognize a certain length

Yes you where right, the problem was that I was using autofocus on a different preceding form field which made this particular field of this particular form non-autofocus. So I learned that in a page with multiple forms loaded in to the DOM, only the first one with auto-focus will work. Fool of me to think otherwise.

Simple Javascript coding for input text to password text

I have following HTML code. writer input field is text filed. but I want to pretend that one is password field. whenever someone type anything, one key will display as * only, as you know how password field show; additionally the entry at writer input field should be populate in holder value which field is hidden. Can you please write in simple java script coding.
Password: <input type="text" id="writer" value=""/><input type="hidden" id="holder" value=""/>
This one show http://www.symplik.com/password.html, whatever we enter, it doesn't look good, it should be all * only when you start typing in it.

Simply use <input type="password" id="txtPassord" value=""/>