Use setAttribute() Method to add the readonly attribute to the form input field using JavaScript.
setAttribute() Method: This method adds the defined attribute to an element, and gives it the defined value. If the specified attribute already present, then the value is being set or changed.
Syntax:
element.setAttribute( attributeName, attributeValue )
Parameters:
- attributeName: It is required parameter. It specifies the name of the attribute to be added.
- attributeValue: It is required parameter. It specifies the value of the attribute to be added.
Example 1: In this example the read-only attribute of form input text field is enabled by accessing the property.
<!DOCTYPE HTML> <html> <head> <title> Add a readonly attribute to an input tag </title> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <p style = "font-size: 15px; font-weight: bold;"> The readonly attribute is added to input box on click on the button. </p> <form> Input : <input id = "Input" type="text" name="input_field" /> </form> <br> <button onclick = "GFG_Run()"> click here </button> <p id = "GFG_down" style = "color: green; font-size: 20px; font-weight: bold;"> </p> <script> function GFG_Run() { document.getElementById('Input').readOnly = true; document.getElementById("GFG_down").innerHTML = "Read-Only attribute enabled"; } </script> </body> </html> |
Output:
-
Before click on the button:
-
After click on the button:
Example 2: In this example the read-only attribute of form input text field is enabled by using setAttribute() method .
<!DOCTYPE HTML> <html> <head> <title> Add a readonly attribute to an input tag </title> </head> <body style = "text-align:center;"> <h1 style = "color:green;" > GeeksForGeeks </h1> <p style = "font-size: 15px; font-weight: bold;"> The readonly attribute is added to input box on click on the button. </p> <form> Input : <input id = "Input" type="text" name="input_field" /> </form> <br> <button onclick = "GFG_Run()"> click here </button> <p id = "GFG_down" style = "color: green; font-size: 20px; font-weight: bold;"> </p> <script> function GFG_Run() { document.getElementById('Input').setAttribute('readonly', true); document.getElementById("GFG_down").innerHTML = "Read-Only attribute enabled"; } </script> </body> </html> |
Output:
-
Before click on the button:
-
After click on the button:
