Question

我的代码允许通过单击按钮时隐藏/显示的输入来编辑字段。它工作正常，但它只在本地更改页面上的数据（没有更新我的数据库。这意味着当用户编辑他们的配置文件时，它保存在数据库中）。我知道如何在没有使用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);
});

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

我是jquery和网络编程的新手，所以如果我没有解释这一点，那就很抱歉。如果它有帮助这里的html与上面的js代码一起使用： 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>

Answer 1

如果我理解正确，只需按照$（'＃savevalue'）中的http://api.jquery.com/jQuery.post/所述执行AJAX帖子。点击（function（e）{...}）`函数。像这样的东西：

$('#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生成

如何获取隐藏/取消隐藏按钮以发送帖子请求？

1 个答案: