0

我的代码允许通过单击按钮时隐藏/显示的输入来编辑字段。它工作正常，但它只在本地更改页面上的数据（没有更新我的数据库。这意味着当用户编辑他们的个人资料时，它保存在数据库中）。我知道如何使用 jquery 在不刷新的情况下提交表单，但我不明白如何将两者结合起来，以便有人可以编辑一个字段（就地），然后当他们点击完成时提交它而不刷新（如 facebook）。

问题是使用“编辑”按钮下方的代码（这只是一个锚点）变成“保存”按钮然后回到“编辑”。我以为我要提交字段，我需要按钮作为提交按钮吗？

这是我用来进行就地编辑的代码：

$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
   var showNew = $('#changevalue').val();
   $('#altervalue').hide();
   $('#storedvalue').show();
   $('#storedvalue span').text(showNew);
});

我从这里的教程中学习了如何在不刷新的情况下提交表单。我不确定如何将它们组合起来以获得我想要的效果，但我不确定这是否是解决问题的正确方法。有没有办法获取showNew变量并将其作为帖子提交而无需用户单击提交按钮（可能在用户单击保存时触发）？

我对 jquery 和网络编程非常陌生，如果我没有正确解释这一点，我很抱歉。如果它有帮助，这里是与上面的 js 代码一起使用的 html：PHP jQuery 示例：

<div id="wrapper">
   <div id="container">
      <div id="storedvalue"><span>Hello</span> [<a href="javascript:void(0);" id="editvalue">edit</a>]</div>
      <div id="altervalue" style="display:none;"><input type="text" name="changevalue" id="changevalue" value="Hello"> [<a href="javascript:void(0);" id="savevalue">save</a>]</div>
   </div>
</div>
4

1 回答 1

1

如果我理解正确，只需按照http://api.jquery.com/jQuery.post/中的描述在 $('#savevalue').click(function(e){...})中发布 AJAX 帖子`函数。像这样的东西：

$('#editvalue').click(function(e){$('#storedvalue').hide();$('#altervalue').show();});
$('#savevalue').click(function(e){
    var showNew = $('#changevalue').val();
    $('#altervalue').hide();
    $.post("test.php", { val: showNew } );
    $('#storedvalue').show();
    $('#storedvalue span').text(showNew);
});

这会将单个字段发布到 test.php 页面。您也可以（并且应该）添加成功/失败回调，以查看一切是否按预期进行。

当然，这个值必须在 PHP 端进行处理。

编辑：具有更通用代码的示例，包括http://jsfiddle.net/X8Rsg/4/处的 html 生成

于 2012-07-11T17:10:27.320 回答