How to set readonly property of dynamic textbox using jQuery?

Question

I'm trying to fill a textbox from DB values and I want to set textbox value readonly. When the user clicks on an EDIT option then set all textboxes become editable. I have failed to achieve this. Here is my HTML code:

<html>
  <head> 
    <script>
      $(document).ready(function() {  
        $('#contentid :input').each(function() {
          $(this).attr("disabled",true);
        });

      $('#edit').on('click',function() {
        $('#contentid :input').each(function() {
          $(this).attr('disabled',false);});
        });
     });
   </script>
</head>

<body>
  <div data-role="page" id="viewInformation" data-theme="d" data-add-back-btn="true" data-back-btn-text = "back">
    <div data-role="header" id="headerid" class="ui-bar ui-bar-b">
      <h3></h3> 
    </div>

    <div data-role="content" id="contentid">
      <a href="#" id="saveDBValue" data-role="button" data-mini="true" style="width:60px; height:40px; float:center;">SAVE</a>
      <a href="#" id="edit" data-role="button">EDIT</a>
    </div>
  </div>
</body>

Here is my JavaScript code:

 function getDataofSelectedListItem()
    {
        alert("getDataofSelectedListI");
        clickedListItem = window.localStorage.getItem("clickedValueofList");
        console.log("clicked list item"+clickedListItem);
        //db = window.openDatabase("loginintro", "1.0", "loginintro", 1000000);
        var sqlQuery = 'SELECT * FROM loginTable WHERE username=\''+window.localStorage.getItem("clickedValueofList").trim()+'\';';

        console.log("selected list query:"+sqlQuery);
        db.transaction(function(tx)
        {
          tx.executeSql(sqlQuery,[],successCBofListItem,errorCBofListItem);
        },errorCB,successCB);
    }
    function successCBofListItem(tx,results)
    {   alert("erer");
      if(results != null && results.rows != null && results.rows.length > 0) 
         {  $('#contentid').append('<label>UserName:</label><input content-editable="false" id="name" type="text"   value="'+results.rows.item(0).username+'"/>');
         $('#contentid').append('<label>EMAIL ID:</label><input type="text" value="'+results.rows.item(0).emailid+'"/>');
         $('#contentid').append('<label>Password:</label><input type="text" value="'+results.rows.item(0).password+'"/>');
    }   
    function errorCBofListItem()
    {
        alert("errorCBofListItem");
    }

What am I doing wrong?

Your JavaScript in the <head> is not wrapped in <script> tags. Was this a mistake when copying the code onto Stack Overflow? — Simon Adcock
– Simon Adcock, Commented Apr 10, 2013 at 14:03

NullPointerException · Accepted Answer · 2013-04-10 14:38:25Z

5

You have to use live for capturing the click event

$('#edit').live('click',function()

I have created an Example

Example for dynamic textboxes

edited Apr 10, 2013 at 14:38

answered Apr 10, 2013 at 14:09

NullPointerException

3,8245 gold badges32 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

14 Comments

David Hedlund Over a year ago

Why would that be necessary?

NullPointerException Over a year ago

Not necessary. and I looked that .on() method is available from version 1.7

Erum Over a year ago

@GCJavaDeveloper you r talking about static textbox its working for static textbox but no response for dynamic textbox

NullPointerException Over a year ago

This is because the $(document).ready(function() is executed when the page gets loaded so your call to disable the text box will not have any effect on newly created textboxes. you have to add the attribute disabled when you are creating the dynamic textboxes depending on in which mode you are in edit or saved

NullPointerException Over a year ago

@ErumHannan Added an example for dynamic textboxes

|

Community · Accepted Answer · 2017-05-23 10:29:01Z

2

I believe what you're looking for is something like this:

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

It has been answered Here

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Apr 10, 2013 at 14:04

Tony

1861 silver badge4 bronze badges

Comments

David Hedlund · Accepted Answer · 2013-04-10 14:08:45Z

0

Your code to disable all input fields is executed at DOMReady, which is before your successCBofListItem is executed, i.e. before there are any inputs to disable. You need to make sure it is executed after.

As of jQuery 1.6, use .prop('disabled', true) rather than .attr('disabled', true). Furthermore, you need not iterate over the selection and disable each input idividually, you can set the property for the entire collection:

$('#contentid :input').prop('disabled', true)

If what you've pasted above is your code exactly as it exists in your application, then you need to wrap your javascript in head in <script>...</script> tags.

A complete solution might look something like this:

function toggleForm(disabled) {
    $('#contentid :input').prop('disabled', disabled);
}

$(function() {
    $('#edit').on('click', function() { toggleForm(false); });
});

...

function successCBofListItem(tx,results)
{
     if(results != null && results.rows != null && results.rows.length > 0) 
     {
         $('#contentid').append('<label>UserName:</label><input content-editable="false" id="name" type="text"   value="'+results.rows.item(0).username+'"/>');
         $('#contentid').append('<label>EMAIL ID:</label><input type="text" value="'+results.rows.item(0).emailid+'"/>');
         $('#contentid').append('<label>Password:</label><input type="text" value="'+results.rows.item(0).password+'"/>');

         toggleForm(true);
     }
}

In your successCBofListItem above you also seem to be missing a }, which I've corrected above. I've left the content-editable attribute in your code above, in case you're using it for something elsewhere in your code, but it is not required for this purpose. contenteditable is for editing content that is not a form element.

edited Apr 10, 2013 at 14:08

answered Apr 10, 2013 at 14:02

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

2 Comments

David Hedlund Over a year ago

@ErumHannan: Sure, I suspected as much. Disregard that part then. The rest of the answer still goes.

Erum Over a year ago

wait trying to implement it anyways but let me knmow where to write this LOC :function toggleForm(disabled) { $('#contentid :input').prop('disabled', disabled); }

Collectives™ on Stack Overflow

How to set readonly property of dynamic textbox using jQuery?

3 Answers 3

14 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

14 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related