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">
Related
I need to put some value to element.
Here is my code snippet.
var userId = localStorage.getItem('keyName');
var Name = document.getElementById('Name');
var dbRefName = firebase.database().ref().child('Web App').child('Users').child(userId).child('Name');
dbRefName.on('value', snap => Name.innerText = snap.val());
I am trying to assign this Name value using id to the input element shown as below.
<input type="text" id="Name" class="form-control form-control-alternative" placeholder="Username" >
It can assign using id to <span> elements. But it is not working with <input> elements.
Could anyone please help me on this matter?
Use .value instead of .innerText for <input> elements, like so:
document.getElementById('input').value = 'foo'
<input id="input"></input>
Input HTML elements needs name tag, and the way to assign it a value is by the value tag or by .value in Javascript
var input = document.getElementById('name');
//input.value = localStorage.getItem('keyName');
input.value = 5;
<input type="number" name="name" id="name" placeholder="Your name here" value="1">
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 have code it can be sum two textbox values using javascript but problem is that when i entered amount into recamt textbox value and javascript count again and again recamt textbox values it should be count only one time recamt textbox value not again and again?
<script type="text/javascript">
function B(){
document.getElementById('advance').value
=(parseFloat(document.getElementById('advance').value))+
(parseFloat(document.getElementById('recamt').value));
return false;
}
</script>
<input class="input_field2" type="text" readonly name="advance"
id="advance" value="50" onfocus="return B(0);" /><br />
<input class="input_field2" type="text" name="recamt" id="recamt">
You could keep a property on the read-only text field to keep the old value:
function B()
{
var adv = document.getElementById('advance'),
rec = document.getElementById('recamt');
if (typeof adv.oldvalue === 'undefined') {
adv.oldvalue = parseFloat(adv.value); // keep old value
}
adv.value = adv.oldvalue + parseFloat(rec.value));
rec.value = '';
return false;
}
You're calling the sum function every time the readonly input is focused using the new value. If you only want it to add to the original value, you need to store it somewhere.
HTML:
<input type="text" id="advance" readonly="readonly" value="50" /><br />
<input type="text" id="recamt">
JS:
var advanceBox = document.getElementById('advance');
var originalValue = advanceBox.value;
advanceBox.onclick = function() {
this.value = parseFloat(originalValue) +
parseFloat(document.getElementById('recamt').value);
return false;
};
http://jsfiddle.net/hQbhq/
Notes:
You should bind your handlers in javascript, not HTML.
The javascript would need to exist after the HTML on the page, or inside of a window.load handler, otherwise it will not be able to find advanceBox.
First name: <input type="text" name="firstname"></input>
<input type="submit" value="Submit" />
Let's say I have the simple form above. How would I grab what the user inputted in the First Name field in JS. I tried:
document.getElementsByTagName("input")[1].onclick = function() {
inputted = document.getElementsByTagName("input")[0].innerHTML;
}
But that doesn't work. How would I do this?
Use value for text inputs:
inputted = document.getElementsByTagName("input")[0].value;
Also make sure to add var keyword to your variables so that you don't create a global variable:
var inputted = document.getElementsByTagName("input")[0].value;
You should also not put closing </input> tag since it is self-closing tag:
<input type="text" name="firstname" />
By the way you can also get elements value using below syntax:
formName.elementName.value;
Or
document.forms['formName'].elementName.value;
In your case it would be:
var inputted = formName.firstname.value;
Or
var inputted = document.forms['formName'].firstname.value;
Replace formName with whatever name is of your <form> element.
Lastly you can also get element's value if you apply id to it:
<input type="text" name="firstname" id="firstname" />
and then use getElementById:
var inputted = document.getElementById('firstname');
var inputs=document.getElementsByTagName("input"),
i=inputs.length;
//
while(i--){
inputs[i].onclick=myClickEventHandler;
};
//
function myClickEventHandler(evt){
var myVal;
switch (this.name) {
case 'firstname':
myVal = this.value;
break;
};
};
If you are using a form, you could try something like this instead :
var input = document.forms["formName"]["fieldName"].value;
Else, make use of the .value attribute :
var input = document.getElementsByTagName("input")[0].value;
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);
});