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);
});
Related
How can I get the ID of an HTML element in a JavaScript function without passing any parameters?
I have a HTML element:
<input type="text" id="exampleInput" value="0" onkeypress="exampleFunction()">
From JavaScript, I would like to change the value of the HTML element.
function exampleFunction() {
}
Is it possible to achieve this without passing the ID as a parameter?
You can pass this to your function like this:
function exampleFunction(e) {
console.log(e); // element
console.log(e.id); // id
e.value = 'new value'; // change value
}
<input type="text" id="exampleInput" value="0" onkeypress="exampleFunction(this)">
Or, better yet, use addEventListener instead:
document.getElementById('exampleInput').addEventListener('keypress', function (e) {
console.log(e.target); // element
console.log(e.target.id); // id
e.target.value = 'new value'; // change value
});
<input type="text" id="exampleInput" value="0">
You can pass the element into the function as this.
function exampleFunction(element) {
console.log(element.value);
}
<input type="text" id="exampleInput" value="0" onkeypress="exampleFunction(this)">
I need to assign variable to value attribute in the input element
Here is my input tag.
<input type="text" id="Name" class="form-control form-control-alternative" placeholder="Usernam" value="myValue">
Here is my variable.
var myValue = document.getElementById('userVal');
Anyone, please help me to fix this problem?
You can set input default value. You can not bind myValue in the html without some js framework. To get input value use change event. Check my code snippet.
var input = document.getElementById('Name');
var myValue = 'Name example';
input.value = myValue;
var myFunction = function (e) {
console.log(e.target.value);
}
<input type="text" id="Name" class="form-control form-control-alternative" placeholder="Usernam" onchange="myFunction(event)" value="myValue">
ASSIGN INPUT VALUE TO VARIABLE:
You need to assign the variable to the element's value, not the element itself. Also, your current input id is Name, not userVal. Change that to userVal then retrieve the value like this:
var myValue = document.getElementById('userVal').value;
Check the following Code Snippet for a practical example on how to retrieve an input value and assign it to a variable:
/* JavaScript */
document.querySelector("button").addEventListener("click", function() {
var myValue = document.getElementById('userVal').value;
alert(myValue);
})
<!-- HTML -->
<input type="text" id="userVal" class="form-control form-control-alternative" placeholder="Username">
<button>Check Value</button>
ASSIGN VARIABLE TO INPUT VALUE:
To assign your input element's value to a variable, just reverse the above assignment like this:
var newValue = newValue;
document.getElementById('userVal').value = newValue;
Check the following Code Snippet for a practical example on how to assign a variable to your input element's value attribute:
/* JavaScript */
document.querySelector("button").addEventListener("click", function() {
var newValue = "newValue";
document.getElementById('userVal').value = newValue;
});
<!-- HTML -->
<input type="text" id="userVal" class="form-control form-control-alternative" placeholder="Original" value="myValue">
<br /><br />
<button>Change Value</button>
if you want to assign value to this input:
<input type="text" id="Name" class="form-control form-control-alternative" placeholder="Usernam" value="myValue">
you should use this code:
var myValue = document.getElementById('userVal').value;
document.getElementById("Name").value = myValue;
You can look to the documentation and example here:
https://www.w3schools.com/jsref/prop_text_value.asp
In JavaScript, add value property to your code as:
var myValue = document.getElementById("name").value
In HTML, use the same id to refer the input tag as:
<input type="text" id="Name" class="form-control form-control-alternative" placeholder="Usernam" value="myValue">
I have a input box like this
<input type="text" class="form-control" onblur="getProductqty('+this.value+')"
placeholder="0" id="'+productSizeId+'">
And i am trying to get the value of the input field by the getProductqty() function.
I have tried like this
function getProductqty(productQnty)
{
console.log(productQnty);
var $this = jQuery(this);
console.log($this.value );
}
From the both i found the undefined value. Please any help. Thank you in advance.
You can simply pass the reference this to getProductqty function and get the value of input like
function getProductqty(input){
console.log(input.value)
}
<input type="text" class="form-control" onblur = "getProductqty(this)" placeholder="0" id="productSizeId">
You can simply pass this and get it in the function and access the value property on it. Or if you want to pass this.value then you dont need all those extra + and '
function getProductqty(value){
console.log(value);
}
<input type="text" class="form-control" onblur = "getProductqty(this.value)" placeholder="0">
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()" />
This is a very simple example. I have a form and I need the value of a hidden field so I need to use ref:
<form>
<input ref="num" type="hidden" name="amount" value="99"/>
</form>
var number = this.refs.num.value;
console.log(number); // nothing
console.log(this.refs.num); // shows the field
How to get the value with ref?
I think you get value, before rendering, try this:
handleSubmit(e) {
if (e) {
e.preventDefault();
}
var value = this.refs.num.value;
console.log(value);
}
render() {
console.log(this.refs.num ? this.refs.num.value : '');
return (
<form>
<input ref="num" type="hidden" name="amount" value="99" />
<a onClick={this.handleSubmit.bind(this)}>submit</a>
</form>
);
}
output would be empty string at first and 99 after render: