This question already has an answer here:
Jquery inserting unicode instead of symbol
(1 answer)
Closed 2 years ago.
I have tried solution below but not solve.
<div class="form-group row">
<div class="col-lg-4">
<label class="form-control-label">Link Latency:</label>
</div>
<div class="col-lg-8">
<input id="viewLink_linkLatency" class="form-control" type="text" style="width:100%;" disabled>
</div>
</div>
$("#viewLink_linkLatency").val(response.link[0].link_run_link_latency + ' µs');
What is happen now is:
You can use Unicode \u00B5 for jQuery or JavaScript.
UNICODE = U+000B5
HEX CODE = µ
HTML CODE = µ
HTML ENTITY = µ
CSS CODE = \00B5
Source:
https://www.toptal.com/designers/htmlarrows/punctuation/micro-sign/
$("#viewLink_linkLatency").val('Lorem ispsom' + ' \u00B5s');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="viewLink_linkLatency" class="form-control" type="text" style="width:100%;" disabled>
You can just use the literal μ:
$("#viewLink_linkLatency").val('something' + ' μs');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input id="viewLink_linkLatency"
class="form-control"
type="text"
style="width:100%;"
disabled />
Related
I have a simple jQuery question. I have a Web App that looks like the following:
The HTML for the page is here:
<div id="hwAddition">
<div id="itemNumber" style="text-decoration: underline; font-size: large;">Item #</div>
<div class="form-row">
<div class="form-group col-md-4">
<label for="hwDescription" style="text-decoration: underline;">Description</label>
<form:textarea id="hwDescription" type="text"
class="form-control short" path="hwDescription"
name="hwDescription" placeholder="Description" maxlength="100"
rows="2" style="resize: none;" />
</div>
<div class="form-group col-md-4">
<label for="hwSerialNumber" style="text-decoration: underline;">Serial
#</label>
<form:input type="text" class="form-control" path="hwSerialNumber"
name="hwSerialNumber" placeholder="Serial #" maxlength="100" />
</div>
<div class="form-group col-md-4">
<label for="hwModelNumber" style="text-decoration: underline;">Model
#</label>
<form:input type="text" class="form-control" path="hwModelNumber"
name="hwModelNumber" placeholder="Model #" maxlength="100" />
</div>
</div>
<hr />
</div>
</div>
My issue lies with the "Item #" label. I'm trying to simply append a value after the markup so that the labels say "Item #1", "Item #2", and so on. The counting procedure is working and the jQuery is shown here:
var count = 1;
$(function() {
$("#hwAddition").attr('id', 'hwAddition' + count);
$("#itemNumber").attr('id', 'itemNumber' + count);
$("#itemNumber").append(count);
});
$('#hwAdditionButton').click(
function() {
var clonedObj = $("#hwAddition" + count).clone().attr('id', 'hwAddition' + (count+1));
clonedObj.find("#itemNumber" + count).attr('id', 'itemNumber' + (count+1));
clonedObj.insertAfter("#hwAddition" + count);
$("#itemNumber").append(count);
count++;
});
For some reason though, the .append() methods are adding nothing to the end of the labels. What am I doing incorrectly?
At the 5th and 12th rows, you do:
$("#itemNumber").append(count);
You're searching for #itemNumber without a "+ count", if I understand correctly you've changed both the original's and the clone's IDs to be itemNumber + count.
Also, the proper way to append text is:
$('#itemNumber' + count).append(document.createTextNode(count));
But why using append? in your case you can do:
$('#itemNumber' + count).text("Item #" + count);
This question already has answers here:
How to disable a input in angular2
(15 answers)
Closed 3 years ago.
This is my first angular project. Just started today. I have a form and I want to disable the input field.
This is my .html file below:
<div class="form-group">
<label for="projectTitle" class="label">Project Title</label>
<input type="text" fullWidth id="projectTitle" value=
{{projectDetails.name}}" placeholder="Project Title">
</div>
How to disable the input from the .ts file?
In HTML add conditional [disabled] attribute
<div class="form-group">
<label for="projectTitle" class="label">Project Title</label>
<input type="text" fullWidth id="projectTitle" value=
{{projectDetails.name}}" [disabled]="isEnabled" placeholder="Project Title">
</div>
Toggle it to true or false from .ts
this.isEnabled = false;
Template
<div class="form-group">
<label for="projectTitle" class="label">Project Title</label>
<input type="text" [attr.disabled]="isEnabled? '' : null" fullWidth id="projectTitle" value=
{{projectDetails.name}}" placeholder="Project Title">
</div>
try component property instead of true to disable conditionally.
.ts
isEnabled:boolean = false;
just add disabled tag to your input:
<input type="text" fullWidth id="projectTitle" value=
{{projectDetails.name}}" disabled placeholder="Project Title">
in jquery :
disable:
$("#projectTitle").attr('disabled', 'disabled');
enable:
$("#projectTitle").removeAttr('disabled');
I used to implement an Angular 2/4 application with Bootstrap 3 and used the Reactive Forms approach. I had a field-validation where the border of the input-field turned red and an error message appeared under the field in red font color.
it looks like this:
<div class="form-group row"
[ngClass]="{'has-error': (sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
!sourcesForm.get('sourceName').valid }">
<label class="col-md-2 col-form-label"
for="sourceNameId">Source Name</label>
<div class="col-md-8">
<input class="form-control"
id="sourceNameId"
type="text"
placeholder="Source Name (required)"
formControlName="sourceName" />
<span class="help-block" *ngIf="(sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
sourcesForm.get('sourceName').errors">
<span *ngIf="sourcesForm.get('sourceName').errors.required">
Please enter the Source Name.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.minlength">
The Source Name must be longer than 3 characters.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
The Source Name is too long.
</span>
</span>
</div>
</div>
Now i have to use Bootstrap 4 and neither the error message or the input-field turns red. How do i realise this? I tried to change the class of the parent span-block to "form-text" but it didn't work.
For beta version of Bootstrap v4, you can check out Form validation docs. There you can read about the new way, supported by all modern browsers for HTML5 way of form-validation with valid/invalid css classes. There Bootstrap uses the .was-validated and .invalid-feedback classes for what you want to achieve (see code snippet).
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>
<form class="container" id="needs-validation" novalidate>
<label for="validationCustom02">Last name</label>
<input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
<label for="validationCustom03">City</label>
<input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
<div class="invalid-feedback">
Please provide a valid city.
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function() {
"use strict";
window.addEventListener("load", function() {
var form = document.getElementById("needs-validation");
form.addEventListener("submit", function(event) {
if (form.checkValidity() == false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add("was-validated");
}, false);
}, false);
}());
</script>
If you want something more similar to Bootstrap 3, you can use what they call server-side validation, as it is written:
As a fallback, .is-invalid and .is-valid classes may be used instead of the pseudo-classes for server side validation. They do not require a .was-validated parent class.
Previous answer for alpha version of Bootstrap V4 (if you must use this).
On Bootstrap V4 Form Validation Docs there is the following example:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="form-group has-danger">
<label class="form-control-label" for="inputDanger1">Input with danger</label>
<input type="text" class="form-control form-control-danger" id="inputDanger1">
<div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
<small class="form-text text-muted">Example help text that remains unchanged.</small>
</div>
So i think you just need to change the has-error class to has-danger
This is the solution:
<div class="form-group row">
<label class="col-md-2 col-form-label"
for="sourceNameId">Source Name</label>
<div class="col-md-8">
<input class="form-control"
[ngClass]="{'is-invalid': (sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
!sourcesForm.get('sourceName').valid }"
id="sourceNameId"
type="text"
placeholder="Source Name (required)"
formControlName="sourceName" >
<span class="invalid-feedback" *ngIf="(sourcesForm.get('sourceName').touched ||
sourcesForm.get('sourceName').dirty) &&
sourcesForm.get('sourceName').errors">
<span *ngIf="sourcesForm.get('sourceName').errors.required">
Please enter the Source Name.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.minlength">
The Source Name must be longer than 3 characters.
</span>
<span *ngIf="sourcesForm.get('sourceName').errors.maxlength">
The Source Name is too long.
</span>
</span>
</div>
</div>
i needed to put the [ngClass]into the input-tag. Then i had to define the class as is-invalid and set the parent span-class to invalid-feedback
i know that your question is for long time ago, but it is the best way to validate the form-control input field by reactive form technique and bootstrap 4 to display the validation. first you need to write some code for your form :
in html section:
<form [formGroup]="myForm">
<div class="form-group">
<label for="name">first Name: </label>
<input type="text" class="form-control" formControlName="firstName" id="name">
<div *ngIf="firstName.touched && firstName.invalid" class="alert alert-danger">
<div *ngIf="firstName.errors.required">filling name is required!</div>
</div>
</div>
in ts file, you should implement the logic to conduct the validation.
in ts file:
myForm = new FormGroup({
'firstName':new FormControl('',Validators.required)
})
//getter method
get firstName(){
this.myForm.get('firstName');
}
now you can see that the validation is working. now to give style to input field to show the red border around the invalid input, just go to css file of component and add this class to the css file:
.form-control.ng-touched.ng-invalid{border:2px solid red;}
and simply you can see the result.
I seem to be stuck with a validation issue for 2 numbers which I am passing in the input field. I provide 2 numbers in the input, say num1 and num2. num2 must be greater than num1. If it is not, then I need to show an error message. This is what I have tried so far. I am not seeing the error message being shown consistently. Appreciate it if someone could point out what I might be missing.
JSFiddle
<input name="num1" type="text" ng-model="num1" placeholder="num1">
<input name="num2" type="text" ng-model="num2" placeholder="num2">
<span ng-show="num1>num2">Num2 cannot be lesser than num1</span>
Your Fiddle seems to work, except maybe that the message is showing also when num2 is empty. Changing type="text" to "type="number" makes it behave more like you would expect.
You have can use several ways
The first one is to change the input type to number
var app = angular.module("Demo", []);
app.controller("AppController", function($scope) {
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="Demo">
<div ng-controller="AppController">
<div ng-form="regForm">
<input name="num1" type="number" ng-model="num1" placeholder="num1">
<input name="num2" type="number" ng-model="num2" placeholder="num2">
<span ng-show="num1>num2">Num2 cannot be lesser than num1</span>
</div>
</div>
</div>
Another is to use the input as text and associate a controller function to ng-show so that it compares the integer and not the string values
var app = angular.module("Demo", []);
app.controller("AppController", function($scope) {
$scope.checkNum = function(){
return parseInt($scope.num1) > parseInt($scope.num2)
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div ng-app="Demo">
<div ng-controller="AppController">
<div ng-form="regForm">
<input name="num1" type="text" ng-model="num1" placeholder="num1">
<input name="num2" type="text" ng-model="num2" placeholder="num2">
<span ng-show="checkNum()">Num2 cannot be lesser than num1</span>
</div>
</div>
</div>
Change the text box type="text" to type="number"
<input name="num1" type="number" ng-model="num1" placeholder="num1">
<input name="num2" type="number" ng-model="num2" placeholder="num2">
<span ng-show="num1 > num2">Num2 cannot be lesser than num1</span>
Demo
This question already has answers here:
Concatenate multiple HTML text inputs with stored variable
(2 answers)
Closed 9 years ago.
I have my code like this
First name : <input type="text" name="txtFirstName" /> <br><br>
Last name : <input type="text" name="txtLastName" /> <br><br>
Full name : <input type="text" name="txtFullName" > <br><br>
if i give abc in first name text box and def in last name text box the result should be displayed as abcdef in full name text box. How to do this?
It's actually quite simple with a tiny bit of inline JavaScript using the form oninput attribute.
<form oninput="txtFullName.value = txtFirstName.value +' '+ txtLastName.value">
First name : <input type="text" name="txtFirstName" /> <br><br>
Last name : <input type="text" name="txtLastName" /> <br><br>
Full name : <input type="text" name="txtFullName" > <br><br>
</form>
http://jsfiddle.net/RXTV7/1/
I'd also suggest using HTML5 <output> element instead of third input. To learn more start here: http://html5doctor.com/the-output-element/
Bind a function that generates the full name on keyup events for your inputs...
<script type="text/javascript">
function generateFullName()
{
document.getElementById('fullName').innerText =
document.getElementById('fName').value + ' ' +
document.getElementById('lName').value;
}
</script>
First Name <input type="text" id="fName" onkeyup="generateFullName()" /><br/>
Last Name <input type="text" id="lName" onkeyup="generateFullName()" /><br/>
Full Name <span id="fullName" />
if you want, you can have the FullName as a input too, and set it's Value.
Try this (using jQuery). it will work. But the fullname field will remain empty if the individual fields are empty
<script>
$(document).ready(function(){
$("fullName").focus(function(){
var fullname = $("fName").val() + $("lName").val();
$("fullName").val(fullname);
});
});
</script>
First Name <input type="text" id="fName" /><br/>
Last Name <input type="text" id="lName" /><br/>
Full Name <span id="fullName"/>
For manipulating HTML you'll need to use JavaScript. There are tons of good tutorials out there, for example on w3schools.com.
You may also want to check out jQuery, which makes this kind of manipulations a lot easier and more straightforward.
you can use the below code for that:
<script type="text/javascript">
function generateFullName()
{
document.getElementById('txtFullName').value =
document.getElementById('fName').value + ' ' +
document.getElementById('lName').value;
}
</script>
First Name <input type="text" id="fName" /><br/>
Last Name <input type="text" id="lName" oninput="generateFullName()" /><br/>
Full name <input type="text" id="txtFullName" name="txtFullName" > <br><br>
Also, instead of oninput event , you can opt for onblur also.