How to make a input field readonly with JavaScript?

Question

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.

`element.setAttribute("readonly", "readonly");`? http://jsfiddle.net/DerekL/e8yCd/ — Derek 朕會功夫, Jul 24 '13 at 05:00

score 85 · Accepted Answer · edited Dec 06 '15 at 04:02

85

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.

edited Dec 06 '15 at 04:02

nbro

12,226
19
85
163

answered Jul 24 '13 at 05:22

Vijay

7,211
9
38
69

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
I have one more question. If radio is hidden, in that case eventhough its true, value comes as false. – Altaf Patel Mar 16 '18 at 13:41
1

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

score 29 · Answer 2 · edited May 23 '17 at 12:02

29

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.

edited May 23 '17 at 12:02

Community

1
1

answered Jul 06 '16 at 18:39

Charlie Haley

3,262
3
20
34

score 6 · Answer 3 · answered Jul 24 '13 at 05:12

6

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


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

answered Jul 24 '13 at 05:12

Mumthezir VP

5,359
5
24
54

score 4 · Answer 4 · answered Jul 24 '13 at 05:04

4

document.getElementById("").readOnly = true

answered Jul 24 '13 at 05:04

gezzuzz

178
2
15

score 4 · Answer 5 · answered Jul 24 '13 at 05:05

4

Try This :

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

answered Jul 24 '13 at 05:05

Sandiip Patil

412
1
4
21

score -3 · Answer 6 · answered Apr 13 '19 at 11:51

-3

I think you just have readonly="readonly"

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

answered Apr 13 '19 at 11:51

Liam

1

bobofrut · Answer 7 · 2015-08-10T14:12:18.890

-4

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>

edited Aug 10 '15 at 14:12

answered Nov 12 '14 at 16:32

bobofrut

3
2

How to make a input field readonly with JavaScript?

7 Answers7

I think you just have readonly="readonly"

Linked