• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

The Programming Expert

Solving All of Your Programming Headaches

  • HTML
  • JavaScript
  • jQuery
  • PHP
  • Python
  • SAS
  • VBA
  • About
You are here: Home / jQuery / How to use jQuery to Make an Input Field readonly

How to use jQuery to Make an Input Field readonly

May 2, 2022 Leave a Comment

We can use jQuery to add the readonly attribute to an input field, making it so the user can highlight or copy text from an input field, but not change it. The easiest way to do this is using the jQuery prop() method.

$('input').prop('readonly', true);

Here we can use the prop method on an input field, and change its readonly attribute to true.

The readonly attribute is very similar to the disabled attribute, the main difference is that the value of a field with a disabled attribute will not be sent to the server when the form is submitted. While readonly input will.

An example of using jQuery to make an input readonly on a form

Below we will have a simple form with name and email fields. All the information will be readonly to start, but once you click on the edit button, it will enable all of the input fields to be changed. Since this is just an example, none of the information will actually be saved, but you will see how to use jQuery to turn an input field to readonly.

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Smith" readonly><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" value="john.smith@mail.com" readonly><br><br>
</form> 
<div class="button1">Edit</div>
<div class="button2">Done editing</div>

We will use jQuery to allow the user to click the edit button, and when that is triggered, we will remove all of the readonly attributes using jQuery. When the user is done, clicking the “Done editing” button will then add all of the readonly attributes to the input fields again using jQuery. We will use the jQuery click() and prop() methods. Here is the code:

$(".button1").click(function(){
  $('input').prop('redonly', false);
  $(".button1").hide();
  $(".button2").css('display','inline-block');
});

$(".button2").click(function(){
  $('input').prop('readonly', true);
  $(".button1").css('display','inline-block');
  $(".button2").hide();
});

The final code and output for this example of how to use jQuery to make an input field readonly is below:

Code Output:






Edit
Done editing

Full Code:

<style>.button-div {display:inline-block; padding: 5px 15px; background: #415c7e; color: #fff; font-size: 14px; cursor: pointer; border-radius: 4px; margin-bottom: 10px;} .button-div:hover { background: #314c6e; } .button2 {display: none;}</style><form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John" readonly><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Smith" readonly><br>
  <label for="email">Email:</label><br>
  <input type="email" id="email" name="email" value="john.smith@mail.com" readonly><br><br>
</form>
<div class="button1 button-div">Edit</div>
<div class="button2">Done editing</div>

<script>

$(".button1").click(function(){
  $('input').prop('redonly', false);
  $(".button1").hide();
  $(".button2").css('display','inline-block');
});

$(".button2").click(function(){
  $('input').prop('readonly', true);
  $(".button1").css('display','inline-block');
  $(".button2").hide();
});

</script>

Hopefully this article has been useful in helping you understand how to use jQuery to make an input field readonly.

Other Articles You'll Also Like:

  • 1.  jQuery mouseover – An Interactive Example of the mouseover Method
  • 2.  jQuery before – Insert HTML Before Another Element
  • 3.  Set the Height of a Div Using jQuery
  • 4.  Using jQuery to Remove All Options From Select
  • 5.  Input Mask Phone Number Using jQuery
  • 6.  Examples of Text Animations Using jQuery
  • 7.  Using jQuery to Get the Border Width of an Element
  • 8.  Using jQuery to Replace a Class
  • 9.  jQuery mouseenter – An Interactive Example of the mouseenter Method
  • 10.  Using jQuery to Convert a String to Uppercase

About The Programming Expert

The Programming Expert is a compilation of a programmer’s findings in the world of software development, website creation, and automation of processes.

Programming allows us to create amazing applications which make our work more efficient, repeatable and accurate.

At the end of the day, we want to be able to just push a button and let the code do it’s magic.

You can read more about us on our about page.

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Primary Sidebar

About The Programming Expert

the programming expert main image

The Programming Expert is a compilation of hundreds of code snippets to help you find solutions to your problems in Python, JavaScript, PHP, HTML, SAS, and more.

Search

Learn Coding from Experts on Udemy

Looking to boost your skills and learn how to become a programming expert?

Check out the links below to view Udemy courses for learning to program in the following languages:

Copyright © 2022 · The Programming Expert · About · Privacy Policy