How to assign variable to value attribute in input element?

user_10895768 0
Viewed 12353

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?

html javascript
4 Answers

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">

user_109142890

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>

user_41149070

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

user_45891030

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">
user_108064520
Related