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">
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 an input tag:
<input id="data-value" name="name" type="text" placeholder="Enter a number" size="20" value="">
I try to get the input value, but I get different value in different places.
function listenForClicks(simpleStorage) {
var button = document.querySelector('button.set')
// (1)
var value = document.getElementById('data-value').value
button.addEventListener('click', function() {
// (2)
var value = document.getElementById('data-value').value
...
}
}
At (1), I get "".
At (2), I get the input value.
I want to know what the reason causes this difference.
If you run listenForClicks before you enter the value, you will get the value defined in the input.
In listenForClicks you bind click function to a button where you get the value when you clicked on the button at any time (most probably after you enter / modify the value).
function listenForClicks(simpleStorage) {
var button = document.querySelector('button.set');
// (1)
var value = document.getElementById('data-value').value;
console.log(value);
button.addEventListener('click', function() {
// (2)
var value = document.getElementById('data-value').value;
console.log(value);
} );
}
listenForClicks();
<input id="data-value" name="name" type="text" placeholder="Enter a number" size="20" value="default">
<button class="set">Click me</button>
I'm begginer and I would like to build an event that started on change of input. The text entered in the input would be automatically formatted as follows:
The first letter must always be uppercase;
All other letters must be lowercase.
function formating() {
var nameOfPerson = document.getElementById("nameOfPerson").textContent;
var nameOfPerson = nameOfPerson[0].toUpperCase() + (nameOfPerson - nameOfPerson[0]);
document.getElementById("nameOfPerson").textContent = nameOfPerson;
}
<input type="text" id="nameOfPerson" onchange="formatting()" placeholder="type your name">
Try this:
function formatting() {
var nameOfPerson = this.value;
if (nameOfPerson.length > 0) {
nameOfPerson = nameOfPerson[0].toUpperCase() + nameOfPerson.substr(1).toLowerCase();
this.value = nameOfPerson;
}
}
<input type="text" id="nameOfPerson" onchange="formatting.call(this)" placeholder="type your name">
If you want to do this using CSS, then this is the tricks:
<input type="text" id="nameOfPerson" placeholder="type your name" style="text-transform: capitalize;">
CSS text-trasform property can change your input text as capitalize, lowercase and uppercase.
A simple way to achieve this is:
nameOfPerson.charAt(0).toUpperCase() + nameOfPerson.substring(1);
When to do it?
Blur
You can do it when input looses focus(blur) event. This will allow user to input in any format and when he is done, then you apply your formatting.
function formatting() {
var nameOfPerson = this.value
this.value = nameOfPerson.charAt(0).toUpperCase() + nameOfPerson.substring(1).toLowerCase();
}
var input = document.getElementById("nameOfPerson");
input.addEventListener('blur', formatting)
<input type="text" id="nameOfPerson" placeholder="type your name">
Input
Or you can enforce formatting using input event. This will take care of typing and pasting actions.
function formatting() {
var nameOfPerson = this.value
this.value = nameOfPerson.charAt(0).toUpperCase() + nameOfPerson.substring(1).toLowerCase();
}
var input = document.getElementById("nameOfPerson");
input.addEventListener('input', formatting)
<input type="text" id="nameOfPerson" placeholder="type your name">
Pointers
Avoid binding handlers in HTML. Anyone can change DOM using dev tools and change behaviour of your page.
textContent as name suggest is used for text bindings and will return static text. Inputs have value binding and you should use .value
When you use onclange="formatting()", handler will not have context pointing to element and you will have to fetch it again and again and DOM queries are expensive. Using .addEventListener() will bind context and is preferred as you can add more than 1 handler.
In (nameOfPerson - nameOfPerson[0]), - operator will convert value to numeric value and would yield NaN. When dealing with strings, use string helper functions.
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);
});