Change input value with Javascript, correct syntax

Question

I want to change input value after ajax success, I do next:

At the top of function I use:

var input = document.getElementById("input_id").value;

Later on ajax success I tried next but doesn't work:

input = 'test value';

What I am doing wrong?

Answer 1

After you assign var input = document.getElementById("input_id").value;, input becomes a string and is no longer a live reference to the input field.

You can do something like document.getElementById("input_id").value = 'test value'.

Alternatively, you can keep a reference to it by just var input_element = document.getElementById("input_id"), and then getting or setting it via input_element.value.

Answer 2

The variable input you're using is the EXACT value of the input field at the time of declaration. It is not a reference to input field's value property.

You should just use a reference to the input element and then set its value like so-

var input = document.getElementById("input_id");

// Do some ajax call

input.value = 'test value'

Answer 3

You need to use document.getElementById("input_id"); to get the reference of the input element which can be then used to set the value or manipulate the input element. Use input.value = 'test value'; to assign value to this input element. So, this was wrong in your code as you were assigning the value to the value of input element itself.

//get the reference of the input element
var input = document.getElementById("input_id");
//assign value to this input element
input.value = 'test value';

<input id='input_id' type='text' />

Answer 4

If you are trying to change the value of input field then, this should work

document.getElementById("input_id").value = "test-value";