We Keep Coding

jQuery: Make a text input box selected

You know how when you open a new tab, you can start typing without having to select the search bar? I've got a text input box in HTML, and I'd like to be able to open my webpage and have that text input box immediately typeable, for lack of a better term. Say my input box looks like this:
<input type="text" class="myInput" value="add an item"></input>
I'm using HTML, CSS and JavaScript/jQuery right now. What code can I add to make sure the text input box is immediately typeable?

Use autofocus:
<input type="text" class="myInput" value="add an item" autofocus/>
From the input documentation on MDN:
This Boolean attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it (e.g. by typing in a different control). Only one form element in a document can have the autofocus attribute, which is a Boolean. It cannot be applied if the type attribute is set to hidden (that is, you cannot automatically set focus to a hidden control). Note that the focusing of the control may occur before the firing of the DOMContentLoaded event.

<input type="text" class="myInput" value="add an item" autofocus>
https://www.w3schools.com/TAgs/att_input_autofocus.asp

in html use autofocus, in jquery use $('.myInput').focus()

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.

How to validate multiple textboxes in a jsp form(on submit) using a javascript?

Excuse me for this simple question. I have aJSP in which I have several forms, each of which consist of multiple text boxes which take different types of text (eg. Date, Name, Balance). How to make the user fill the fields and then only submit to the server? Is it possible to use only one js function?

Note: this answer does not use any JSP nor JavaScript, because in HTML5 this is no longer necessary.
You could use HTML5's required attribute on the inputs, and then let the user know the inputs are not correctly filled in via the :invalid CSS pseudo-class. It would look something like this:
HTML:
<form id="myForm" action="#">
<label>Date: <input type="date" name="date" required></label>
<br>
<label>Name: <input type="text" name="firstname" required></label>
<input type="text" name="lastname" required>
<br>
<label>Balance: <input type="number" name="balance" required></label>
<br>
<button>Submit</button>
</form>
CSS:
#myForm input:valid {
background:#AFA;
}
#myForm input:invalid {
background:#FAA;
}
Demo.
Extra info
For a complete list of input types (such as those listed above, but also ones like email or checkbox) see MDN or this interactive page with demos
For more information on cross-browser compatibility of :valid and :invalid, see MDN on :valid and :invalid
Notes
These specific input types will also restrict or simplify the input for users. The number inputs will restrict input to numbers only (it will prevent the submission of the form otherwise), and the date inputs will clarify to the user how the date should be entered. Both will also simplify entering information to these inputs
Note that not all of these are supported by older browsers, which will often default to the plain text input. See caniuse and MDN's list for the full details on browser support.
Never rely on client-side verification only. It's very easy to modify forms on the client's side, which could lead to XSS vulnurabilities. Always verify proper input on the server too.

The for-attribute on labels in jQuery forms

Regarding forms with labeled fields, this (out-dated) jQuery Mobile documentation states:
Be sure to pair them properly with label elements via the for attribute.
The for attribute still exists in the latest version, but the current documentation does not even mention it anymore. What is it used for? Some sort of form validation?

It's standard HTML (not jQm-specific) used to link text with a corresponding input element.
MDN Docs for <label>
Example:
<label for="your_name">Your Name:</label>
<input id="your_name" value="John Smith" />
When I tap on the label, the input text will gain focus. The for attribute should be set to the ID of the input element.