Использование jQuery для изменения текста кнопки ввода через несколько секунд

Question

Я использую форму и 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; 
}); 

Answer 1

Первый аргумент 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; 
}); 

Я не могу проверить этот код прямо сейчас. Дайте мне знать, если это не сработает.

EDIT: Как было предложено redsquare, имеет смысл создать закрытие из самой кнопки отправки.

Answer 2

Вы, вероятно, хотите, чтобы обернуть действие в функции:

setTimeout(function(){$(this).find(":submit").attr('value', 'Update')}, 2000); 

Answer 3

$("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; 
}); 

Answer 4

Я хотел бы предложить, возможно, другой (на мой взгляд лучше) интерфейс, чтобы дать обратную связь, чем изменение текста кнопки , Вы можете использовать jGrowl или виджет dialog, чтобы отображать сообщение через обратный вызов из почтового метода.

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

Answer 5

Если это действительно тег «button», то для его изменения вы использовали бы.

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

Конечно, если вы брикетирование этого OnClick для этой кнопки, то вы можете легко просто передать (это) в функцию в качестве объекта и $ (это) .html («New Text»); вместо.

Надеюсь, это поможет кому-то.