How to make a input field readonly with JavaScript?

input, javascript, readonly

Solution

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;
  } 
</script>

Call this `onLoadBody()` function on body tag like:

<body onload="onLoadBody">

View Demo: jsfiddle.

Problem

I know you can add `readonly="readonly"` 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 (it's 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: https://www.pages05.net/engagedigital/inputReadOnly/test?spMailingID=6608614&spUserID=MTI5MDk4NjkzMTMS1&spJobID=Nzk4MTY3MDMS1&spReportId=Nzk4MTY3MDMS1 Make sure you use `<body onload="onLoadBody();">` for anyone using this in the future.

Original source

Related problems