Develop Reference

How to set value for the input value in the element from Javascript?

I am the very beginner for html and js.
I have a js which can set the value of id="tk___kiaVlink" by using the following.
this.form.formElements.get('tk___kiaVlink').update('abcedf ghi');
But both label and link values are updated. How could I specify js code to update only [link] value?
<div class="fabrikSubElementContainer" id="tk___kiaVlink">
<input type="text" name="tk___kiaVlink[label]" size="200" maxlength="200" class="form-control fabrikinput inputbox fabrikSubElement" placeholder="Label" value="Video">
<input type="text" name="tk___kiaVlink[link]" size="200" maxlength="200" class="form-control fabrikinput inputbox fabrikSubElement" placeholder="URL" value="test value">
I tried using the name tk___kiaVlink[label] and it doesn't work.

const [label, link] = [...document.querySelectorAll('#tk___kiaVlink input')];
[label.value, link.value] = ['my label value', 'my link value'];

Output Contents of Input in div

I am creating a contact form that creates something like a cart view depending on the inputs.
I managed to get all the checkboxes to output when they are checked; I am having trouble getting the same to work with text and number inputs. So input type text, number and textarea.
<input id="form_name" type="text" name="name" class="form-control"
placeholder="Please enter your firstname *" required="required"
data-error="Pflichtfeld" data-validate="true">
<input type="number" id="age" name="age" min="16" max="99"
class="form-control" required="required"
data-error="Pflichtfeld" data-validate="true">
<div id="descript11" style="display:none;">Vorname:
<b id="vorname"></b>
</div>
<div id="descript12" style="display:none;">Alter:
<b id="alter"></b>
</div>
So I tried the method with $(document).change() but that did not work. I want to grab the contents of the input or textarea and output it to the div with the corresponding id. So "age" should output to "alter" and so on. I'm not sure how to achieve this and w3schools or other sites don't offer an answer.

You can do this by adding an input event listener to your input text boxes. In the example below, I loop through all your input text boxes (as I gave them a class of text-input) using a forEach loop. You can then grab the text from the textbox using this.value and place it into its associated div. To help with this I created a mapping object which is used to map the id of the input to the id of where the text should be placed into.
See example below:
const input_map = {
form_name: "vorname",
age: "alter"
}
document.querySelectorAll(".text-input").forEach(elem => {
elem.addEventListener('input', function() {
const textbox_value = this.value; // get text from input bpx
const target = input_map[this.id]; // get location (ie: the id) of where the text should be placed
document.getElementById(target).innerText = textbox_value; // place the text in that location
});
});
<input id="form_name" type="text" name="name" class="form-control text-input" placeholder="Please enter your firstname *" required="required" data-error="Pflichtfeld" data-validate="true">
<input type="number" id="age" name="age" min="16" max="99" class="form-control text-input" required="required" data-error="Pflichtfeld" data-validate="true">
<div id="descript11">Vorname:<b id="vorname"></b></div>
<div id="descript12">Alter: <b id="alter"></b></div>
Note: In the example above I removed the style="display: none;" from your divs so that you can see the output

You can do it like this:
$('input').on('input',function(){
let text = $(this).val();
let id = $(this).attr('id');
$('div.'+id).text(text)
});
This snippet checks changes on inputs and sets their value to the div with class that matches each input's id .

is-invalid class for a text box not works

I want the text box to be red color bordered when there is no value inside the text box <input type="tel" #phone="ngModel" [class.is-invalid]="phone.invalid" class="form-control" name="phone" [(ngModel)]="userModel.phone">

What you need here is use "ngClass]="{'is-invalid': !phone.valid}" and required attribute for input tag.
<input type="tel" #phone="ngModel" [ngClass]="{'is-invalid': !phone.valid}" class="form-control" required name="phone" [(ngModel)]="userModel.phone">
Here is Demo on stackblitz

Use [ngClass]="{'is-invalid' : phone.invalid}"
AS:
<input type="tel" #phone="ngModel" [ngClass]="{'is-invalid' : phone.invalid}" class="form-control" name="phone" [(ngModel)]="userModel.phone">
More about ngClass

Your dash gets interpolated! Quotes are needed.
Something like this.
[ngClass]="{'is-invalid': someBooleanValue}"

use !phone.valid instead of phone.invalid like this:
[ngClass]="{'is-invalid': !phone.valid}"

How to change value of html input text box name with multidimenal name attribute

i'm have some values to fill in the text box. In input text box. It contains multidimensional array so how can i set value using jquery.
<input
type="text"
id="kvtabform1-1-score"
class="form-control"
name="kvTabForm1[1][Score]"
autocomplete="off"/>

Using starts with selector
$('[name^="kvTabForm1"]').each(function() {
$(this).val('hello')
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="kvtabform1-1-score" class="form-control" name="kvTabForm1[1][Score]" autocomplete="off">

Why "Please fill out this field" validate message show when I clicked Irrelevant button

I used map on my page and when I clicked 'cellSize' button Fill the fields warning appeared. I dont want to this. How can fix this ?
Warning like this :
this is my text field :
<div class="form-group">
<label for="name">Name</label>
<input ng-model="Name" ng-readonly="view.readonly" ng-maxlength="100" type="text" class="form-control input-sm" id="cluster-name" placeholder="Name" required>
</div>
and this is my increment button click :
change: function () {
this.trigger("spin");
$scope.cellSizeCoefficient = this.value();
$scope.$broadcast('mapCellSizeChanged', $scope.map);
$.each($scope.cellShapes, function (index, cellShape) {
var radius = getRadius(cellShape.Cell);
cellShape.Circle.setRadius(radius);
if (cellShape.Circle.label) {
var labelLoc = findLocationAtDistanceFrom(cellShape.Cell.LOC, cellShape.Cell.AZ, radius);
cellShape.Circle.label.setLatLng([labelLoc.Y, labelLoc.X]);
}
});
if (selectedCellCircle) {
var radius = getRadius(selectedCellCircle.Cell) + 50;
selectedCellCircle.setRadius(radius);
}
}

You're seeing the message due to the required attribute on the input element. It's shown when the form is submit which is happening when the 'increment' button is clicked.
To stop that behaviour add a type="button" attribute to the button:
<button type="button" style="margin-left:2px;" kendo-button="btnCellSizeIncrement" k-options="btnCellSizeIncrementOptions">
<i class="fa fa-plus pi-icon pi-icon-plus"></i>
</button>
Just FYI, you should add the type="button" attribute on any button elements that you do not want to submit the form when they are clicked.

Remove the required attribute from this HTML if its not a required field , otherwise browser will show this message on form submit. Make sure you are not submitting the form while clicking on the cell size button.
<input ng-model="Name" ng-readonly="view.readonly" ng-maxlength="100" type="text" class="form-control input-sm" id="cluster-name" placeholder="Name" required>

Add novalidate with form tag as it's required property so that will trigger HTML5 validation.
<form novalidate>
<div class="form-group"> <label for="name">Name</label> <input ng-model="Name" ng-readonly="view.readonly" ng-maxlength="100" type="text" class="form-control input-sm" id="cluster-name" placeholder="Name" required> </div>
</form>