I have the below posted input element. I want to know how can i add a listner to the inputelement in such a way that, every time the user change the input values that listener gets invoked and displays the current values
chosen
HTML template
<div id="idDoseLabel1" class="date">
<p>{{ "SITE.INSECTICIDES.DOSE_LABEL" | translate }}:</p>
</div>
<input id="idDoseValue1"
[disabled] = "false"
required
placeholder=""
maxlength="7"
clrInput
type="number"
name="doseValue"
[(ngModel)]=iPesticidesDosesPasser.dose
#name1="ngModel"/>
You can add onChange event on your input element, so as soon as the value changes. You can do something like this:
<input id="idDoseValue1" [disabled]="false" required placeholder="" maxlength="7" clrInput type="number" name="doseValue" [(ngModel)]=iPesticidesDosesPasser.dose #name1="ngModel" (change)="someFunction($event)"/>
and in someFunction() function you can get the value from variable iPesticidesDosesPasser.dose
You can use the change event for input, like this:
<input id="idDoseValue1"
[disabled] = "false"
required
(change) = "test()"
placeholder=""
maxlength="7"
clrInput
type="number"
name="doseValue"/>
You can use FormControl to achieve the same.
HTML Code:
<div id="idDoseLabel1" class="date">
<p>{{ "SITE.INSECTICIDES.DOSE_LABEL" | translate }}:</p>
</div>
<input [disabled] = "false"
[formControl]="doseControl"
required
placeholder=""
maxlength="7"
clrInput
type="number"
name="doseValue"/>
TS code:
doseControl = new FormControl('');
ngOnInit() {
this.doseControl.valueChanges.subscribe(value => {
console.log(value);
});
};
//to retreive value
this.doseControl.value;
//to set value
this.doseControl.setValue('new value');
Related
So i'm trying to just access the value from my date input
let object = document.getElementById('tripdateinput').value;
console.log(object);
<input autocomplete="off" id="tripdateinput" type="date" name="tripdate" required>
but when i try to console.log(object) it returns as empty. This is also only happening with my date inputs my normal text inputs are working.
Add this script to get your selected date value:
document.getElementById('tripdateinput').addEventListener("change", function(event) {
console.log(event.target.value);
});
<input autocomplete="off" id="tripdateinput" type="date" name="tripdate" required>
What this does is create an eventListener to your input field. Similar to a single onChange eventHandler, this will get the event when your input field changes it's values.
Your code should look like this:
<input autocomplete="off" id="tripdateinput" type="date" name="tripdate" required>
<script>
document.getElementById('tripdateinput').addEventListener("change", function(event) {
console.log(event.target.value);
});
</script>
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'];
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 .
I would like just recover the value of the field that I have just entered in jquery.
Thank you for your help
function test()
{
//????????
}
<form>
<label>Price</label>
<input type="text" name="price[]" onchange="test();"><br>
<label>Price</label>
<input type="text" name="price[]" onchange="test();"><br>
<label>Price</label>
<input type="text" name="price[]" onchange="test();">
</form>
For starters, if you're using jQuery, then use jQuery. Remove the inline onclick attributes:
<input type="text" name="price[]">
And attach a single event handler to your inputs:
$(function () {
$('input[type="text"]').change(function () {
var value = $(this).val();
// etc.
});
});
Within that handler, you can refer to the input raising the event as this and get its value accordingly as in the code above.
Example
I have created some input fields and bound their value to a javascript variable. However, for some reason the drinkInput value is always an empty string. And when the typeInput event is called it's value is correctly printed to the console followed by a blank string which I presume is drinkInput's value.
created here
<input type="text" class="form-control" id="drinkInput" placeholder="Drink Name">
<input type="text" class="form-control" id="typeInput" placeholder="Drink Type">
and bound here
$("#drinkInput").on("change", function() {
newDrink = $(this).val();
console.log($(this).val());
});
$("#typeInput").on("change", function() {
newType = $(this).val();
console.log($(this).val());
});
To be clear it seems that I have two different issues. One is that when typeInput's event is triggered it seems that drinkInput's is also. My other issue is that $(this).val() returns an empty string for drinkInput.
It's doing that because you aren't properly closing the tags.
Try this:
<input type="text" class="form-control" id="drinkInput" placeholder="Drink Name" />
<input type="text" class="form-control" id="typeInput" placeholder="Drink Type" />