unable to fetch input from input field - javascript

I am not able to get the input, entered by the user, from the input field; please help me out with this.
I am not able to figure out what is wrong here.
var ftemp = document.getElementById("Farenheit").value;
<td>
<input type="number" id="Farenheit">
</td>
when entering value in input field in the web page, input value is not being fetched at all.
console.log-ing the variable just shows a blank line .

This line of code
var ftemp = document.getElementById("Farenheit").value;
gets you the current value of that input at the time that line of code gets executed.
It does not update when the user changes the inputs value.
If you want it to do just that, you need to add an event listener to the input element that executes whenever the input event occurs:
var ftemp;
document.getElementById("Farenheit").addEventListener('input', function() {
ftemp = this.value;
console.log(ftemp);
})
<input type="number" id="Farenheit">

Add an event listener to the input element.
document.querySelector('input').addEventListener('keyup',function() {
console.log(this.value);
});
<input type="number" id="Farenheit" >

Related

How do I get the value of input tag using javascript

Why do I get a empty string "" when I try to get the value of my input field instead of the number I gave.When I type billAmount in the console window,I get "" returned.Why is that?
var billAmount = document.getElementById('bill-id').value;
<html>
<input type="number" id = "bill-id" class="bill-input" placeholder="0">
</html>
Your code only executes once.
If you want to update the variable everytime the user changes the value of the input, listen for the input event:
var billAmount;
document.getElementById("bill-id").addEventListener('input', function(){
billAmount = this.value;
console.log(billAmount);
})
<html>
<input type="number" id = "bill-id" class="bill-input" placeholder="0">
</html>
First, your webpage loads the input element in the DOM. Then, the javascripts starts running. It rapidly collects the input's value which is empty. Presuming the only line of JS is var billAmount = document.getElementById('bill-id').value;, it finishes its jobs. Your JS doesn't detect any change of the input's value. You should add an event listener and change the variable each time you enter something.

Passing input to span field

I am trying to pass the input i have from an input to an span field. I use an api dropdown list with results. So if people click on an search result it get autofilled in (much like google). I want to pass this result to an span field I have in my page.
However I dont want an onclick event if people click on an result. Rather when people click out of the input field..
This is what I tried:
<div>
<input id="exercise-search" class="form-control" type="text" name="data">
</div>
<span id="namespan">Name</span>
And the simple script:
<script>
var name = document.getElementById("exercise-search").value;
document.getElementById("namespan").textContent=name;
function reload(){
var container = document.getElementById("namespan");
var content = container.innerHTML;
container.innerHTML= content;
}
</script>
However I still have to manually refresh the page to see the result. How can i automate this?
Add a listener for the change event to the input field. This will be executed when the user edits the field and clicks out of it.
document.getElementById("exercise-search").addEventListener("change", function() {
var name = this.value;
document.getElementById("namespan").textContent=name;
});

Form number input not transferring to javascript as a variable

I want to use the input value of a form element in a javascript function. However when I declare the variable it doesn't pull the input value from the form. Instead the debugger is just saying; ""
My code is as follows.
HTML:
<input type="number" name="stack" id="stack" min="1" max="600" placeholder="Big Blinds" required>
Javascript:
var stack = document.getElementById("stack").value;
Any advice would be great. Thanks.
It seems like you are getting the value while the input element is still empty. Your code that sets the variable doesn't seem to be encapsulated inside of a function that is run at a time after the input element has had data inputted into it, so the code runs immediately.
You need to make sure that you are getting the value after a value has been inputted.
This is accomplished by adding an event handling function that fires at a particular time. There are a variety of events you can work with (keyup, keydown, input, the form's submit, a button click, etc.). Here's an example of getting the value when a button is clicked.
// Get a reference to the button that will trigger the event function
var btn = document.getElementById("btn");
// Get a reference to the input element (do this outside of the function that
// will need it so you don't wind up scanning the document for it over and over).
// Also, set the variable to the element itself, not a property of the element so
// that if you ever need a different property, you don't have to scan the document
// for the element again:
var input = document.getElementById("stack");
// If you intend to use the value of the element across several functions, declare a
// variable that will hold the value outside of all of them.
var stack = null;
// Set the button up to call a function when it gets clicked.
btn.addEventListener("click", function(){
// When clicked, get the value
stack = input.value;
// Do whatever you want with the stored value.
console.log(stack);
});
<input type="number" name="stack" id="stack" min="1" max="600" placeholder="Big Blinds" required>
<button id="btn">Get Value</button>

How to retrieve the value of an input on keyup?

What I am trying to achieve is to output the actual value/text so that I can save it into a variable, but the console gives me a number indicator and it keeps adding to it each time I keyup.
<input id="usp-custom-3" type="text">
var country1 = $("#usp-custom-3").html();
$("#usp-custom-3").on("keyup", function() {
console.log(country1);
});
There's two issues with your code. Firstly you need to get the val() of the input, not it's html(). Secondly, you need to retrieve the value every time the event happens, so place it within the event handler, like this:
$("#usp-custom-3").on("keyup", function() {
var country1 = $("#usp-custom-3").val();
console.log(country1);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="usp-custom-3" type="text">

Possible collision/conflict between 2 javascripts?

Here is example http://jsfiddle.net/rigaconnect/gLCjy/14/
One javascript ensures copy-paste value from above input field. User presses and holds ctrl, then click on field below.
$(document).ready(function(){
$("input").on('click', function(e) {
var name1 = $(this).closest('tr').prev().find('td:eq('+$(this).closest('td').index()+')').find('input').val();
if(e.ctrlKey) $(this).val(name1);
});
});
Second javascript changes input field value to 1 if in certain input fields value is entered or changed
<input type="text" name="is_row_changed[]" id="is_row_changed1" size="1">
<script>
$(".row_changed1").on("change", function () {
document.getElementById('is_row_changed1').value = 1;
});
</script>
html input fields are like this
<input type="text" name="date_year[]" id="date_year1" class="row_changed1" value="" size="2">
If I enter (or copy-paste) values without ctrl+click then all works as necessary.
However if I hold ctrl and click in field then value is copied and appears in the field, but value here <input type="text" name="is_row_changed[]" id="is_row_changed1" size="1"> does not change.
Enter something in left top field. Right top field value changes to 1. That is ok.
Then press and hold ctrl and click in left bottom field. Left bottom field value becomes the same as left top field's value. This is also ok.
But right bottom field value does not change. This is the problem... Actually no idea. Need advice to which direction to go....
That is because change event doesnot get triggered on programatically assined values. You can manually trigger it when you assign the value to the textbox.
$(document).ready(function () {
$("input").on('click', function (e) {
var name1 = $(this).closest('tr').prev().find('td:eq(' + $(this).closest('td').index() + ')').find('input').val();
if (e.ctrlKey) {
$(this).val(name1).trigger('change'); //Trigger the change event here.
};
});
});
Fiddle

Categories