jquery form plugin to edit an entire form in place - forms

Question

I've been searching a bit for a jquery plugin that could help me to edit an entire form in place without having to write markup for both the form and displaying the data. Where you can just click "edit" and then the form fields would appear instead of the text, and then save and the form fields would turn into text again.
Does anyone know of one?

Answer 1

Here's the plugin in its crudest form:
(function( $ ){
var YesNo = new Array();
YesNo["true"] = "Yes";
YesNo["false"] = "No";
$.fn.inline = function() {
this.each(function(){
if ($(this).is('table')) {
$(this).find('input, select, textarea').not('[type=button],[type=submit]').each(function(){
if($(this).attr("type")=="checkbox"){
$(this).parent().append("<span class=\"editable\">"+YesNo[$(this).attr('checked')]+"</span>");
$(this).hide();
//$(this).append("<span>"+$(this).val()+"</span>");
$(this).bind('blur',function(){
var t = YesNo[$(this).attr('checked')];
$(this).hide().next().show().text(t);
});
}
else{
$(this).parent().append("<span class=\"editable\">"+$(this).val()+"</span>");
$(this).hide();
//$(this).append("<span>"+$(this).val()+"</span>");
$(this).bind('blur',function(){
var t = $(this).val();
$(this).hide().next().show().text(t);
});
}
});
$(this).find('td').live('dblclick', function(){
$(this).children('.editable').hide().prev().show().focus();
});
}
});
};
})( jQuery );
Call to plugin:
<script type="text/javascript">
$().ready(function () {
$('#dataform').inline();
});
</script>
And the supporting example markup:
<table id="dataform">
<tr>
<td class="label">First Name</td>
<td><input type="text" value="Robin" /> </td>
<td class="label">Last Name</td>
<td><input type="text" value="Maben" /> </td>
</tr>
<tr>
<td class="label">City</td>
<td><input type="text" value="Bangalore" /> </td>
<td class="label">Country</td>
<td><input type="checkbox" checked="checked" /> </td>
</tr>
<tr>
<td class="styleLabel">Status</td>
<td class="styleControl">
<select id="Select1" class="styleDrop">
<option>Active</option>
<option>Inavtive</option>
<option>Pending</option>
</select></td>
</tr>
<tr>
<td>Description</td><td><textarea>Hello World</textarea></td>
</tr>
<tr>
<td>
<input type = "button" value="Click" />
<input type = "submit" />
</td>
</tr>
</table>