Make a form/div editable

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开发者_如何学JAVA 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>

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.

Start using https://github.com/tectual/jQuery-Editable. it has a data-for attribute.

Basically you define the display div/label with data-for attribute for a field and then calling $('formCssSelector').editables() will make them all editable. and setting onFreeze function you can define to use your preferred validation system and if all fields are valid submit using $.ajax

sample page for jquery editable html 5 technique

Are you just asking how to unset the disabled attribute?

$("#myform input").attr("disabled", "");

Have you taken a look at jeditable? I think it will work well for what you want.

EDIT to address comment.

Here is a starting point

$("li").each(function () {
  var text = $(this).text();
  var $input = $("<input>");
  $input.attr("type", "text");
  $input.attr("value", text);
  $(this).html($input);
});

So another option is to create an entirely separate page with the editable form. Say form.php with code like this:

  <form action="whatever.php" method="POST">
     <ul><li>
       <label>Name:</label>
       <input type="text" value="<?php echo $name; ?>"/>
       </li>
       <li>
         <label>Age:</label>
         <input type="text" value="<?php echo $age; ?>"/>
       </li>
       etc 
 </form>

Then on your display page you can add a button named edit and load the form using AJAX like this:

   $("#editButton").click(function(){
       $("#student-infomercial").load("form.php");
   });

This way the entire display is replaced with a form. You can then add a cancel button on the form to go back to the display.