How to set readonly property of dynamic textbox using jQuery?

javascript jquery html cordova

41,503

Solution 1

You have to use live for capturing the click event

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

I have created an Example

Example for dynamic textboxes

Solution 2

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

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

It has been answered Here

41,503

Author by

Erum

Updated on April 11, 2020

Comments

Erum about 4 years

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?

David Hedlund about 11 years

Why would that be necessary?
David Hedlund about 11 years

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

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

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

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
Erum about 11 years

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

@ErumHannan Added an example for dynamic textboxes
David Hedlund about 11 years

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
NullPointerException about 11 years

I was talking about the inputs that are created dynamically after the DOMReady
David Hedlund about 11 years

Yes. They don't need for #edit to have a live handler either.
NullPointerException about 11 years

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
Erum about 11 years

stackoverflow.com/questions/15850303/…
Erum about 11 years

@GCJavaDeveloper pls can u give me answer of above link i was trying to insert <li> item dynamically at the same place where i put textboxes dynamically but i was failed to edit text of dynamic li item
Erum about 11 years

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: jsfiddle.net/erum/Ztn2a
NullPointerException about 11 years

Try using the wild card 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.
Erum about 11 years

@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