2009-07-01 157 views
7

我使用表單和jQuery在網站上進行快速更改。我想將按鈕文本更改爲「已保存!」然後在幾秒鐘後將其更改回更新,以便用戶可以再次更改該值。當然,他們可以擊中現在的'救了!'按鈕,但它看起來不太好。使用jQuery在幾秒鐘後更改輸入按鈕文本

$("form.stock").submit(function(){ 
    // Example Post 
    $.post($(this).attr('action'), { id: '123', stock: '1' }); 
    $(this).find(":submit").attr('value','Saved!'); 
    // This doesn't work, but is what I would like to do 
    setTimeout($(this).find(":submit").attr('value','Update'), 2000); 
    return false; 
}); 

回答

13

setTimeout的第一個參數是函數。因此,將你的代碼包裝在一個匿名函數中,你很好。

$("form.stock").submit(function(){ 
    // Example Post 
    $.post($(this).attr('action'), { id: '123', stock: '1' }); 
    var submit = $(this).find(":submit").attr('value','Saved!'); //Creating closure for setTimeout function. 
    setTimeout(function() { $(submit).attr('value','Update') }, 2000); 
    return false; 
}); 

我現在無法測試此代碼。讓我知道如果它不起作用。

編輯:正如redsquare建議,從提交按鈕本身創建閉包是有意義的。

+0

謝謝你指出明顯! :) – 2009-07-01 20:01:49

+1

不需要運行提交選擇器兩次,你可以把它放在var中使用setTimeout – redsquare 2009-07-01 20:02:42

+0

同意,修改代碼以反映這種方法。 – SolutionYogi 2009-07-01 20:06:37

0

你可能想包裝在一個函數的操作:

setTimeout(function(){$(this).find(":submit").attr('value', 'Update')}, 2000); 
0
$("form.stock").submit(function(){ 
    var $form = $(this); 
    $.post($form.attr('action'), { id: '123', stock: '1' }); 
    var $submit = $form.find(":submit").attr('value','Saved!'); 
    window.setTimeout(function() { 
     $submit.attr('value','Update') 
    }, 2000); 
    return false; 
}); 
2

我建議,或許,不同的(在我看來更好)接口提供反饋不是改變按鈕的文本。您可以使用jGrowldialog小部件通過post方法的回調顯示消息。

$("form.stock").submit(function(){ 
    $.post(
     $(this).attr('action'), 
     { id: '123', stock: '1' }, 
     function() { $.jGrowl("Your update was successfully saved."); } 
    ); 
}); 
6

如果它實際上是一個「按鈕」標籤,然後改變它,你會使用。

$('#button_id').html('New Text'); 

當然,如果你在這個預成型的onClick該按鈕,那麼你可以很容易地只傳遞到函數作爲一個對象,$(本)的.html(「新文本」)(本);代替。

希望這可以幫助別人。