Setting input value using document.getElementById not truely setting the value

Question

I have an input:

<input type="text" class="input" name="email" id="email" value="" disabled>

And JavaScript:

$email = "[email protected]";

function setEmail(email) {
        document.getElementById("email").value = email;
    }

    window.onload = setEmail($email);

Now, it does show the email in the input field just how i want it to:

But it doesn't set the value when i inspect the element:

Even when i change the value inside the inspect element, it stays "[email protected]"

Now i need the value to be the same as what it is showing Why is it not doing so?

to set the value attribute, use .setAttribute. check this fiddle for reference: jsfiddle.net/evhzofz2/1 (and inspect elements) — briosheje
– briosheje, Commented Jan 11, 2017 at 15:04

Pranav C Balan · Accepted Answer · 2017-01-11 15:07:34Z

8

You are updating it value property of the DOM element and not its value attribute. To reflect in the markup use setAttribute() which is using to update an attribute.

function setEmail(email) {
   document.getElementById("email").setAttribute('value', email);
}

$email = "[email protected]";

function setEmail(email) {
  document.getElementById("email").setAttribute("value", email);
  document.getElementById("email2").value = email;
}

window.onload = setEmail($email);

<input type="text" class="input" name="email" id="email" value="" disabled>

<input type="text" class="input" name="email" id="email2" value="" disabled>

edited Jan 11, 2017 at 15:07

answered Jan 11, 2017 at 15:03

Pranav C Balan

115k25 gold badges172 silver badges195 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

briosheje Over a year ago

fiddle with the two elements printed (if needed): jsfiddle.net/evhzofz2/1 (using both setAttribute and value)

Diego Peinador · Accepted Answer · 2017-01-11 15:15:43Z

2

Works anyway... the inspector not show ur changes, if u want try use setAttribute function but works fine

    $email = "[email protected]";

    function setEmail(email) {
          document.getElementById("email").value = email;
    //if u want change attr.. try works too
      //document.getElementById("email").setAttribute('value',email);
        }
    function getEmail(){
      return document.getElementById("email").value;
    }

    document.addEventListener("DOMContentLoaded", function(event) { 
      setEmail($email);
      console.log('value: ' + getEmail());
    });

<input type="text" class="input" name="email" id="email" value="" disabled />

answered Jan 11, 2017 at 15:15

Diego Peinador

816 bronze badges

Collectives™ on Stack Overflow

Setting input value using document.getElementById not truely setting the value

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related