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

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和web编程的超级新手，所以很抱歉如果我没有解释这个权利。如果它帮助这里是与上面的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> 

Answer 1

如果我理解正确的话，根本就截至http://api.jquery.com/jQuery.post/您$里（“＃savevalue”）中描述的AJAX后.click（函数（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端处理。

编辑：例如用更通用的代码，包括HTML生成时http://jsfiddle.net/X8Rsg/4/