Question

Hello I have around 6 fields which are read only presently. I now would have to make them editable. So I am thinking of having one image/button, which onclick would trigger the edit functionality. So onclick of that button, I would have a form load up which would have the textboxes, which makes those fields editable. I am trying to do this with JQuery, I am unable to understand on how to get a editable form out of read only fields.

How is it possible to load up a form which would have same fields as the one we had earlier and allows the users to edit?

This is my present code, I would have to load my editable form into the id.

<div id="student-infomercial">
<ul>
<label>Name:</label>
<div ><?php echo $name; ?></div>
</li>
<li>
<label>Age:</label>
<div ><?php echo $age; ?></div>
</li>
<li>
<label>Country:</label>
<div ><?php echo $country; ?></div>
</li>
<li>
<label>State:</label>
<div ><?php echo $state; ?></div>
</li>
<li>
<label>City:</label>
<div ><?php echo $city; ?></div>
</li>
<li>
<li>
<label>Zip:</label>
<div ><?php echo $zip; ?></div>
</li>
</ul>
</div>

Answer 1

So I guess you’re asking how to transform your element into ? You can do it, but it probably will be too much trouble. If I were you I would have following html instead:

<div id="student-infomercial">
<ul>
<label>Name:</label>
<input class="disabled" disable="true"><?php echo $name; ?></input>
</li>
<li>
<label>Age:</label>
<input class="disabled" disabled="true"><?php echo $age; ?></input>
</li>
</div>

then in your javascript:

$("#buttonId").bind("click", function(){
   var fields = $(".disabled");
    fields.removeClass("disabled");
    fields.addClass("enabled");
    fields.removeAttr("disabled", "");
});

If you insist on using <div> then you will have to transform the <div> tags to <input> tags upon some event.

There are many many more ways you can achieve your goal; the above is just the solution that pops into my mind.