Question

您好我有大约6个现在只读的字段。我现在必须让它们可编辑。所以我想有一个图像/按钮，onclick将触发编辑功能。所以点击那个按钮，我就会有一个表单加载，它会有文本框，这使得这些字段可以编辑。我试图用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", "");
});

如果您坚持使用<div>，则必须在某些事件后将<div>代码转换为<input>代码。

您可以通过许多方式实现目标;以上只是我脑海中浮现的解决方案。

Answer 2

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

基本上，您为字段定义显示div / label以及 data-for 属性，然后调用 $（'formCssSelector'）。editables（）将使它们全部显示编辑。并设置 onFreeze 功能，您可以定义使用首选验证系统，如果所有字段都有效，请使用 $ .ajax

jquery editable html 5 technique

的示例页面

Answer 3

你看过jeditable了吗？我认为它可以很好地满足您的需求。

编辑以发表评论。

这是一个起点

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

Answer 4

您是否只是询问如何取消设置已禁用的属性？

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

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");
   });

这样整个显示就会被表格所取代。然后，您可以在表单上添加取消按钮以返回显示。

使表单/ div可编辑

5 个答案: