'How to make a input field readonly with JavaScript?

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.

Solution 1:^[1]

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.

Solution 2:^[2]

The above answers did not work for me. The below does: document.getElementById("input_field_id").setAttribute("readonly", true);

And to remove the readonly attribute: document.getElementById("input_field_id").removeAttribute("readonly");

And for running when the page is loaded, it is worth referring to here.

Solution 3:^[3]

document.getElementById('TextBoxID').readOnly = true;    //to enable readonly


document.getElementById('TextBoxID').readOnly = false;   //to  disable readonly

Solution 4:^[4]

document.getElementById("").readOnly = true

Solution 5:^[5]

Try This :

document.getElementById(<element_ID>).readOnly=true;

Solution 6:^[6]

<!DOCTYPE html>
<html>
<body>
<input id="balloons" type="number" step="10" min="1" max="1000" size="25" value="60" > 
<input id="bloquear" type="checkbox" onclick="validate()" />

<p id="demo1"></p>
<p id="demo2"></p>

<script type=text/javascript>

  function validate(){

  document.getElementById("bloquear").checked == (bloquear.checked == 1 ? false : true );
  
  document.getElementById("demo1").innerHTML = bloquear.checked;
  document.getElementById("demo2").innerHTML = balloons.readOnly;
  
  if (balloons.readOnly) document.getElementById("balloons").removeAttribute("readonly"); 
  else balloons.setAttribute("readonly", "readonly");
  
}
</script>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	nbro
Solution 2	Community
Solution 3	Mumthezir VP
Solution 4	gezzuzz
Solution 5	Sandiip Patil
Solution 6

'How to make a input field readonly with JavaScript?

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]