2009-07-01 77 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(“新文本”)(本);代替。

希望这可以帮助别人。

相关问题