• 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
  • Ruby
  • 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="[email protected]" 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="[email protected]" 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.  Using jQuery to Get Text Length
  • 2.  Using jQuery to Hide Element by Class
  • 3.  Get nth Child with jQuery
  • 4.  Using jQuery to Add Class to HTML Element
  • 5.  Get Padding of an Element Using jQuery
  • 6.  Sort List of Divs with Data Attribute with Radio Buttons Using Javascript
  • 7.  jQuery appendTo – Insert Element As Last Child
  • 8.  jQuery prev – Get the Previous Element of a Div
  • 9.  jQuery Display None
  • 10.  jQuery mouseover – An Interactive Example of the mouseover Method

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

Welcome to The Programming Expert. We are a group of US-based programming professionals who have helped companies build, maintain, and improve everything from simple websites to large-scale projects.

We built The Programming Expert to help you solve your programming problems with useful coding methods and functions in various programming languages.

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 © 2023 · The Programming Expert · About · Privacy Policy