I'm working with javascript and try to do a simple thing. I want to get the value from an input text as you type. But can't figure out why it's not working
function myFunction() {
console.log('ok')
let input = document.getElementById('test')
console.log(input)
console.log('2' + input.value)
}
<input class="recherche_field" onkeyup="myFunction()" type="text" id="test" name="search_query" placeholder="Ici" />
and no matter what I write in my input my console show that :
ok
<input class="recherche_field" onkeyup="myFunction()" type="text" id="test" name="search_query" placeholder="Ici">
2
Code-wise, what you have should work.
function myFunc() {
console.log('keyup');
const input = document.getElementById("test");
console.log("2" + input.value);
}
<input id="test" onkeyup="myFunc()" />
The most likely cause of your issue is having multiple inputs on the page with an id of "test". Every HTML element on the page should have a unique ID.
The code written by you seems fine.
function myFunction() {
console.log('Key Up Event Triggered')
var input = document.getElementById('textBox')
console.log(input)
console.log('2' + input.value)
console.log('Key Up Event Performed')
}
<input id="textBox" type="text" placeholder="Insert Text" onkeyup="myFunction()" />
Related
I tried .value , .textContent , innerText .... But nothing worked....
Below is my html
var input = document.getElementById('input').value
var button = document.getElementById('submit')
button.addEventListener('click', () => {
console.log(input) /// Output is always blank
})
<div class="input-section">
<input type="text" id="input" placeholder="Enter the word">
<button id="submit">Find</button>
</div>
You need to read the value property when the event fires, not before it.
let input = document.getElementById('input');
let button = document.getElementById('submit');
button.addEventListener('click',()=>{
console.log(input.value);
})
The reason why it is blank is because, you're initializing the input variable with the initial value inside input, i.e. nothing.
When you click the button, you want the "current" value of input, which means that you'd have to find value on each button click.
Do it like this :
var button = document.getElementById('submit')
button.addEventListener('click', () => {
var input = document.getElementById('input').value;
console.log(input);
})
<div class="input-section">
<input type="text" id="input" placeholder="Enter the word">
<button id="submit">Find</button>
</div>
This question already has an answer here:
Why is the value of my input always empty if I store it in a variable?
(1 answer)
Closed 12 months ago.
I want the value of the text input logged to the console but when I open the page the console.log() is empty. Why is this?
<input type="text" id="word"/>
//JavaScript
var newWord = document.getElementById("word").value;
console.log(newWord);
Ensure to add an event handler.
Add an onchange event listener to input element.
function func() {
var newWord = document.getElementById("word").value;
console.log(newWord);
}
<input type="text" id="word" onchange='func()'/>
You will need to enter a value to your input or add a default value
<input type="text" id="word" value="Hello"/>
var newWord = document.getElementById("word").value;
console.log(newWord);
This will log the value
Use .addEventListener to run a function when a change event is fired - This will run your function whenever the value in the input is updated and the focus is removed from the input box
document.getElementById('word').addEventListener('change', function () {
let newWord = this.value;
console.log(newWord);
});
<input type="text" id="word"/>
Or, you could use the input event, which will fire as soon as the input is changed
document.getElementById('word').addEventListener('input', function () {
let newWord = this.value;
console.log(newWord);
});
<input type="text" id="word"/>
I cannot get your question, but according to my understanding, you need to use a function to get the value of input box, when an event occurs. here is the code something like this.
<!DOCTYPE html>
<html>
<body>
<p>A function is triggered when the user is pressing a key in the input field.</p>
<input type="text" id="myinput" onkeypress="myFunction()">
<p id="demo"></p>
<script>
function myFunction() {
var x = document.getElementById('myinput').value;
document.getElementById('demo').innerHTML = x;
}
</script>
</body>
</html>
I'm trying to get each input value on keyup with comma separated. My code is working fine with onclick event but not with on keyup.
<input type="text" class="date" name="date[]" onkeyup="showHint(this.value)" />
This is part of my js function showhint where i'm defining the input value.
var DoB = [];
$(".date").each(function(){
DoB.push($(this).val());
});
var newDob = DoB.slice(0,-1);
xmlhttp.open("GET","validation.php?q="+newDob+",true);
Can anyone help me with this what is my mistake here?
Thanks in advance.
Are you sure the issue is the keyup? It seems to me the DoB.slice(0, -1) is causing your code not to work.
I replaced it with a DoB.join(','); to create the comma separated string.
function showHint(someValue) {
var DoB = [];
$(".date").each(function(){
//console.log($(this).val());
DoB.push($(this).val());
});
//var newDob = DoB.slice(0, -1);
var newDob = DoB.join(',');
document.getElementById("URL").value = "validation.php?q="+newDob;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="date" name="date[]" onkeyup="showHint(this.value)" />
<input type="text" class="date" name="date[]" onkeyup="showHint(this.value)" />
<br>URL : <input type="text" size="50" id="URL"/>
try this:
$( ".date" ).keyup(function() {
DoB.push($(this).val());
});
As per your code, you don't have to keep array DoB. as you have only one dob element. and you can directly get value of input.
following code will work for you
function showHint(){
var DoB = $(".date").val();
console.log(DoB);
xmlhttp.open("GET","validation.php?q="+DoB +",true);
}
I also had this happen to me before, when I used the onkeyup event in the script itself it works fine for me.
Here's an example:
document.getElementById("fname").onkeyup = function() {myFunction()};
function myFunction() {
var x = document.getElementById("fname");
x.value = x.value.toUpperCase();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<body>
<p>Press a key inside the text field and release it to set the text to uppercase.</p>
Enter your name: <input type="text" id="fname">
</body>
</html>
I have four input boxes. If the user fills the first box and clicks a button then it should autofill the remaining input boxes with the value user input in the first box. Can it be done using javascript? Or I should say prefill the textboxes with the last data entered by the user?
On button click, call this function
function fillValuesInTextBoxes()
{
var text = document.getElementById("firsttextbox").value;
document.getElementById("secondtextbox").value = text;
document.getElementById("thirdtextbox").value = text;
document.getElementById("fourthtextbox").value = text;
}
Yes, it's possible. For example:
<form id="sampleForm">
<input type="text" id="fromInput" />
<input type="text" class="autofiller"/>
<input type="text" class="autofiller"/>
<input type="text" class="autofiller"/>
<input type="button"value="Fill" id="filler" >
<input type="button"value="Fill without jQuery" id="filler2" onClick="fillValuesNoJQuery()">
</form>
with the javascript
function fillValues() {
var value = $("#fromInput").val();
var fields= $(".autofiller");
fields.each(function (i) {
$(this).val(value);
});
}
$("#filler").click(fillValues);
assuming you have jQuery aviable.
You can see it working here: http://jsfiddle.net/ramsesoriginal/yYRkM/
Although I would like to note that you shouldn't include jQuery just for this functionality... if you already have it, it's great, but else just go with a:
fillValuesNoJQuery = function () {
var value = document.getElementById("fromInput").value;
var oForm = document.getElementById("sampleForm");
var i = 0;
while (el = oForm.elements[i++]) if (el.className == 'autofiller') el.value= value ;
}
You can see that in action too: http://jsfiddle.net/ramsesoriginal/yYRkM/
or if input:checkbox
document.getElementById("checkbox-identifier").checked=true; //or ="checked"
I am trying to create a simple JavaScript function. When someone inserts a number in an input field, the value of another field should change to that value. Here is what I have at the moment:
function updateInput(ish) {
fieldname.value = ish;
}
<input type="text" name="fieldname" id="fieldname" />
<input type="text" name="thingy" onchange="updateInput(value)" />
Somehow this does not work, can someone help me out?
You can't access your fieldname as a global variable. Use document.getElementById:
function updateInput(ish){
document.getElementById("fieldname").value = ish;
}
and
onchange="updateInput(this.value)"
for jQuery we can use below:
by input name:
$('input[name="textboxname"]').val('some value');
by input class:
$('input[type=text].textboxclass').val('some value');
by input id:
$('#textboxid').val('some value');
<input type="text" name="fieldname" id="fieldtobechanged" />
<input type="text" name="thingy" id="inputfield" />
I have used following code and it works instantly without any delay.
var timeoutID = null;
function findMember(str) {
document.getElementById("fieldname").innerHTML = str;
}
$('#inputfield').keyup(function(e){
clearTimeout(timeoutID);
timeoutID = setTimeout(findMember.bind(undefined, e.target.value), 500);
});