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 `` is not wrapped in ` – Simon Adcock Apr 10 '13 at 14:03 — Simon Adcock, Apr 10 '13 at 14:03
yes this was the mistake during copying code? – Erum Apr 10 '13 at 14:12 — Erum, Apr 10 '13 at 14:12

NullPointerException · Accepted Answer · 2013-04-10T14:38:25.717

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 '13 at 14:38

answered Apr 10 '13 at 14:09

NullPointerException

3,732
5
28
62

Why would that be necessary? – David Hedlund Apr 10 '13 at 14:12
Not necessary. and I looked that .on() method is available from version 1.7 – NullPointerException Apr 10 '13 at 14:18
@GCJavaDeveloper you r talking about static textbox its working for static textbox but no response for dynamic textbox – Erum Apr 10 '13 at 14:18
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 Apr 10 '13 at 14:22
@ErumHannan Added an example for dynamic textboxes – NullPointerException Apr 10 '13 at 14:38
No, this is not necessary since `#edit` exists on DOMReady, so the listener will be bound. All that calls for is for the edit boxes to be available when `#edit` is cliked. [Your dynamic example working without live](http://jsfiddle.net/7n4Px/) – David Hedlund Apr 10 '13 at 15:06
I was talking about the inputs that are created dynamically after the DOMReady – NullPointerException Apr 10 '13 at 15:09
Yes. They don't need for #edit to have a live handler either. – David Hedlund Apr 10 '13 at 15:15
Yes thats correct when you click on edit, but as per his code the dynamically added textboxes will always be editable untill he clicks Save – NullPointerException Apr 10 '13 at 15:21
http://stackoverflow.com/questions/15850303/how-to-make-editable-list-item-using-jquery – Erum Apr 10 '13 at 15:28
@GCJavaDeveloper pls can u give me answer of above link i was trying to insert
item dynamically at the same place where i put textboxes dynamically but i was failed to edit text of dynamic li item

Erum

Apr 10 '13 at 15:31

thanks @GCJavaDeveloper for giving me your precious time its working fine pls see the above link and also let me know how to apply validations of email , password length on dynamically added textboxes i m using this code for validation how to use that code for dynamically added textboxes here is my fiddle: http://jsfiddle.net/erum/Ztn2a/ – Erum Apr 10 '13 at 15:40

Try using the [wild card selector](http://api.jquery.com/attribute-starts-with-selector/). Give an id to you textboxes and append some index to that id and use wild card selector to bind the jQuery method for validation. And you can accept the answer or vote up if this helps you. – NullPointerException Apr 10 '13 at 15:51

@GCJavaDeveloper how to get text of dynamic textbox here using the code but did nt get text of textbox at submit button:here is my code: $('#saveDBValue').on('click',function() {toggleForm(true); console.log("username:" + $('#nameedit').text()); }); where nameedit is the id of my dynamic textbox – Erum Apr 11 '13 at 06:56

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

2

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

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

It has been answered Here

edited May 23 '17 at 10:29

Community

1
1

answered Apr 10 '13 at 14:04

Tony

186
1
4

David Hedlund · Answer 3 · 2013-04-10T14:08:45.587

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.

@ErumHannan: Sure, I suspected as much. Disregard that part then. The rest of the answer still goes. — David Hedlund, Apr 10 '13 at 14:13
wait trying to implement it anyways but let me knmow where to write this LOC :function toggleForm(disabled) { $('#contentid :input').prop('disabled', disabled); } — Erum, Apr 10 '13 at 14:25

How to set readonly property of dynamic textbox using jQuery?

3 Answers3

Linked