document.getElementById().value not returning a value - javascript

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>

Related

Add a listner to input element in Angular

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');

I would like just recover the value of the field that I have just entered in jquery

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

Replace value of text field and display it in another text field

I am trying to convert text first text field value entered in inr to cad but i am unable to do so,
suppose for example:
if the text entered in first field is 1000 the it should display 20 in text field two
i have tried something like this
<label>Price</label>
<input id="price_inr" name="price_inr" type="text" class="validate" required placeholder="Price in INR" />
<input id="price_cad" name="price_cad" type="text" class="validate" required readonly="readonly" placeholder="Price in CAD" />
<!-- Script coverts INR to CAD -->
<script>
$('#price_inr').change(function() {
$('#price_cad').val($(this).val());
});
$("#price_cad").on("change", function() {
$(this).val(function(index, value) {
return value.replace(price_cad.value, price_cad.value/50);
});
});
</script>
Works fine using jquery 1.11.
The second part $("#price_cad").on("change", function() will not work because of the "readonly" attribute.
Changing it and editing will allow change back and forth
$('#price_inr').change(function() {
$('#price_cad').val($(this).val());
});
$("#price_cad").change(function() {
$('#price_inr').val($(this).val()/50);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>Price</label>
<input id="price_inr" name="price_inr" type="text" class="validate" required placeholder="Price in INR" />
<input id="price_cad" name="price_cad" type="text" class="validate" required placeholder="Price in CAD" />
There is no need to use two change events, you can do this in one step.
$('#price_inr').change(function () {
$('#price_cad').val($(this).val() / 50);
});
Don't forget to add prover validation to the first input field which checks if entered values is a valid number.
One more thing to note here is that change will be triggered when input looses focus. You can try using keyup instead, maybe it will better fit your requirements.
Best of luck.

validating input field after moving to another field and not on keydown

i am currently validating an input field but my current issue is that i have it set to validate after every key stroke. I want to change it to validate after the cursor has been moved out from that input field not sure of the syntax.
This is my current input field:
<input type="text" id="EmailField" name="Email" placeholder="Email" data-val="true" data-bind="value:email, event: { keyup: validateEmail, valueUpdate: 'afterkeydown'}" required="">
my validateEmail function:
$this.validateEmail = function () {
var regexEmail = ...Expression...;
var result = regexEmail.test($('#EmailField').val());
if (!result) {
notify({title: 'Invalid Email', text:'Invalid email format', type:'error'})
}
};
use onblur event and call a function
in that function you may use validations
<input id="a" onblur="fun(this);">
<script>
function fun(ab){
alert(ab.value);
}
</script>
jsbin example
The above code snippet uses onblur event of input
Answer Updated
Use blur instead of keyup in event
<input type="text" id="EmailField" name="Email" placeholder="Email" data-val="true" data-bind="value:email, event: { blur: validateEmail, valueUpdate: 'afterkeydown'}" required="">

On change event triggers additional event

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" />

Categories

Resources