67

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.

Cœur
  • 37,241
  • 25
  • 195
  • 267
chris
  • 861
  • 1
  • 7
  • 15

9 Answers9

113

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.

nbro
  • 15,395
  • 32
  • 113
  • 196
Vijay
  • 8,131
  • 11
  • 43
  • 69
  • 1
    I appreciate the response, but its doesnt seem to be working for me - do you mind checking: http://bit.ly/1aI1Zxn ??? – chris Jul 24 '13 at 07:57
  • 2
    Awesome - thanks Vijay, i just had to make the body reference have - just in case anyone sees this in the future. – chris Jul 25 '13 at 02:36
  • I've added a note on the case sensitivity of the property in JS. – insaner Jun 11 '16 at 19:53
  • 3
    Note the difference, in HTML the attribute is `readonly` (all lower case) and in Javascript it is `readOnly` (with capital O). Thanks for the answer. – Simon Jul 02 '20 at 13:46
46

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.

Jacob van Lingen
  • 8,989
  • 7
  • 48
  • 78
Charlie Haley
  • 4,152
  • 4
  • 22
  • 36
  • Note that `setAttribute('readonly', false)` does not work -- it will still be true! You have to remove it. – Matt Feb 25 '23 at 15:15
8
document.getElementById('TextBoxID').readOnly = true;    //to enable readonly


document.getElementById('TextBoxID').readOnly = false;   //to  disable readonly
Mumthezir VP
  • 6,251
  • 6
  • 28
  • 57
4
document.getElementById("").readOnly = true
gezzuzz
  • 188
  • 2
  • 16
4

Try This : 

document.getElementById(<element_ID>).readOnly=true;
Sandiip Patil
  • 456
  • 1
  • 4
  • 21
0

<!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>
ESP
  • 11
  • 3
0

This is another working example with jQuery:

$(document).ready(function() {
    $('.yourClassName').prop('readonly', true);
});
DRYN
  • 15
  • 1
  • 1
  • 6
-5

Here you have example how to set the readonly attribute:

<form action="demo_form.asp">
  Country: <input type="text" name="country" value="Norway" readonly><br>
  <input type="submit" value="Submit">
</form>
bobofrut
  • 1
  • 2
-6

I think you just have readonly="readonly"

<html><body><form><input type="password" placeholder="password" valid="123" readonly=" readonly"></input>

Liam
  • 1