# Change the value of \<input\> with code

**URL:** <https://discourse.mozilla.org/t/change-the-value-of-input-with-code/79611>\
**Category:** Development\
**Tags:** learning\
**Created:** [May 2, 2021, 12:35am UTC](https://discourse.mozilla.org/t/change-the-value-of-input-with-code/79611 "2021-05-02T00:35:19Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![dragonhunter1357](https://avatars.discourse-cdn.com/v4/letter/d/cab0a1/32.png) [@dragonhunter1357](https://discourse.mozilla.org/u/dragonhunter1357)\
**Post date:** [May 2, 2021, 12:35am UTC](https://discourse.mozilla.org/t/change-the-value-of-input-with-code/79611/1 "2021-05-02T00:35:19Z")

</div>

Hey,  
I recently started programming an Add-on for Firefox. I am trying to change the value of an input field with code. I tried using

```javascript
document.getElementById("email").value = "test@test.com"

```

But that doesn’t work  
(Error: Could not establish connection. Receiving end does not exist)  
I could not find any documentation for `Element.value` so I don’t know if I am missing some permissions.

## manifest.json

```json
{

    "manifest_version": 2,

    "name": "Email Manager",

    "version": "1.0",

    "description": "Test Add-on",

    "icons": {

        "48": "test-icon.png"

    },

    "content_scripts": [

        {

            "matches": ["<all_urls>"],

            "js": ["email-manager.js"]

        }

    ]

}

```

## email-manager.js

```javascript
document.getElementById("email").value = "test@test.com"

```

---

<div class="post-metadata">

**Author:** ![jscher2000](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/jscher2000/32/28202_2.png) [@jscher2000](https://discourse.mozilla.org/u/jscher2000)\
**Post date:** [May 2, 2021, 4:44am UTC](https://discourse.mozilla.org/t/change-the-value-of-input-with-code/79611/2 "2021-05-02T04:44:02Z")

</div>

> Error: Could not establish connection. Receiving end does not exist.

That kind of message usually occurs when sending a message to a tab or to the background, and the script that is listening for messages didn’t load or run properly. Since your manifest only shows one script, you probably are not using sendMessage().

I wonder whether that error is coming from another extension?

> I could not find any documentation for `Element.value` so I don’t know if I am missing some permissions.

Probably not a permission issue. It’s a text input? .value looks correct to me based on [\<input type="text"\> - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input/text).

Are you sure the element has that id? Sometimes form elements only have the name attribute and not an id…

---

<div class="post-metadata">

**Author:** ![dragonhunter1357](https://avatars.discourse-cdn.com/v4/letter/d/cab0a1/32.png) [@dragonhunter1357](https://discourse.mozilla.org/u/dragonhunter1357)\
**Post date:** [May 2, 2021, 12:42pm UTC](https://discourse.mozilla.org/t/change-the-value-of-input-with-code/79611/3 "2021-05-02T12:42:21Z")

</div>

Thanks for your quick answer!

I looked up my test website ([Epic Games Login](https://www.epicgames.com/id/login/epic)) again and the Id is indeed “email”:

```auto
<input aria-invalid="true" autocomplete="username" id="email" name="email" placeholder="E-Mail-Adresse" type="text" inputmode="text" aria-label="E-Mail-Adresse" autocorrect="off" autocapitalize="none" spellcheck="false" class="MuiInputBase-input MuiInput-input MuiInputBase-inputAdornedEnd" value="">

```

After disabling most of my Add-ons the provided error disappeared (thank you).  
It even started pasting the email into the responding field (visually), but the value in the html input field only changes after typing the email manually, not with the code. When I manually clicked into the input field the value disappeared.

Is there a way to change the value of the html input field?

---

<div class="post-metadata">

**Author:** ![jscher2000](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/jscher2000/32/28202_2.png) [@jscher2000](https://discourse.mozilla.org/u/jscher2000)\
**Post date:** [May 2, 2021, 3:39pm UTC](https://discourse.mozilla.org/t/change-the-value-of-input-with-code/79611/4 "2021-05-02T15:39:00Z")

</div>

That site appears to keep a log of user keystrokes to discourage automated form filling. For example, if I type an address, then move the cursor to the password field, then run a script to change the address (using the [Web Console](https://developer.mozilla.org/docs/Tools/Web_Console)), it appears to change, but when I click back in the address field, it changes to the earlier address. Tough one.

---

<div class="post-metadata">

**Author:** ![dragonhunter1357](https://avatars.discourse-cdn.com/v4/letter/d/cab0a1/32.png) [@dragonhunter1357](https://discourse.mozilla.org/u/dragonhunter1357)\
**Post date:** [May 2, 2021, 3:51pm UTC](https://discourse.mozilla.org/t/change-the-value-of-input-with-code/79611/5 "2021-05-02T15:51:52Z")

</div>

Thanks for your quick help.  
So the code is right but only works on websites without this “protection”?  
Or is there a way to simulate key presses?  
Otherwise, if it is to complicated I’m just using this add-on for other websites, or I will try using python instead 😃

---

<div class="post-metadata">

**Author:** ![jscher2000](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/jscher2000/32/28202_2.png) [@jscher2000](https://discourse.mozilla.org/u/jscher2000)\
**Post date:** [May 3, 2021, 6:27am UTC](https://discourse.mozilla.org/t/change-the-value-of-input-with-code/79611/6 "2021-05-03T06:27:43Z")

</div>

What I think is happening is that when you type, your keystrokes are recorded somewhere else, and when you tab out of the field, that stored value is placed in the field in place of what the script inserts. I don’t know whether that is a common pattern.