如何獲得隱藏/取消隱藏按鈕以發送發佈請求？

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/