使表单/div 可编辑

Question

您好，我有大约 6 个目前只读的字段。我现在必须使它们可编辑。所以我正在考虑使用一个图像/按钮，单击它会触发编辑功能。因此，单击该按钮时，我将加载一个包含文本框的表单，这使得这些字段可编辑。我正在尝试使用 JQuery 执行此操作，但我无法理解如何从只读字段中获取可编辑表单。

如何加载一个具有与我们之前的字段相同的字段并允许用户编辑的表单？

这是我现在的代码，我必须将可编辑表单加载到 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

所以我猜你是在问如何将你的元素转换成？你可以做到，但可能会很麻烦。如果我是你，我会改为使用以下 html：

<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>

然后在你的 javascript 中：

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

如果你坚持使用

那么你将不得不转换

在某些事件上将标签添加到 标签。

还有很多方法可以实现您的目标；以上只是我脑海中浮现的解决方案。

Answer 2

开始使用 https://github.com/tectual/jQuery-Editable。它有一个 data-for 属性。

基本上，您可以使用字段的 data-for 属性定义显示 div/标签，然后调用 $('formCssSelector').editables() 将使它们全部可编辑。并设置 onFreeze 函数，您可以定义它以使用您首选的验证系统，如果所有字段均有效，则使用 $.ajax

示例页面提交 jquery 可编辑 html 5 技术

Answer 3

您只是问如何取消禁用属性吗？

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

Answer 4

您看过 jeditable 吗？我认为它会很好地满足您的需求。

编辑以解决评论。

这是一个起点

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

Answer 5

因此，另一个选择是使用可编辑表单创建一个完全独立的页面。使用如下代码表示 form.php：

  <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>

然后在显示页面上，您可以添加一个名为 edit 的按钮，并使用 AJAX 加载表单，如下所示：

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

这样整个显示都将替换为表单。然后，您可以在表单上添加取消按钮以返回到显示。