chris chris - 1 year ago 66
Javascript Question

How to make a input field readonly with JavaScript?

I know you can add

to an input field so its not editable. But I need to use javascript to target the id of the input and make it readonly as I do not have access to the form code (its generated via marketing software)

I don't want to disable the input as the data should be collected on submit.

Here is the page I have added in the below suggestion with no luck so far:

Make sure you use
<body onload="onLoadBody();">
for anyone using this in the future.

Answer Source

You can get the input element and then set its readOnly property to true as follows:

document.getElementById('InputFieldID').readOnly = true;

Specifically, this is what you want:

<script type="text/javascript">
  function onLoadBody() {
    document.getElementById('control_EMAIL').readOnly = true;

Call this onLoadBody() function on body tag like:

<body onload="onLoadBody">

View Demo: jsfiddle.