Verwenden von jQuery zum Ändern der Eingabe Schaltfläche Text nach ein paar Sekunden

Question

Ich benutze ein Formular und jQuery, um eine schnelle Änderung auf einer Website zu machen. Ich möchte den Schaltflächentext in 'Gespeichert!' Ändern. Ändern Sie ihn nach einigen Sekunden wieder in Update, damit der Benutzer den Wert erneut ändern kann. Natürlich können sie das jetzt 'Gespeicherte!' Taste erneut, aber es sieht nicht gut aus.

$("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

Das erste Argument für setTimeout ist die Funktion. So wickeln Sie Ihren Code in einer anonymen Funktion und Sie sind gut zu gehen.

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

Ich bin nicht in der Lage, diesen Code jetzt zu testen. Lass es mich wissen, wenn es nicht funktioniert.

BEARBEITEN: Wie von redsquare vorgeschlagen, ist es sinnvoll, Schließung von der Übermittlungsschaltfläche selbst zu erstellen.

Answer 2

Sie wollen wahrscheinlich die Aktion in einer Funktion wickeln:

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

ich vorschlagen würde vielleicht eine andere (meiner Meinung nach besser) -Schnittstelle Feedback zu geben, als den Text der Schaltfläche Ändern . Sie können jGrowl oder das dialog Widget verwenden, um eine Nachricht über einen Rückruf von der Post-Methode anzuzeigen.

Answer 5

Wenn es tatsächlich ein "Knopf" -Tag ist, dann zu ändern, würden Sie verwenden.

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

Natürlich, wenn Sie diesen onClick für diese Schaltfläche sind Vorformen dann könnte man leicht passieren einfach (dies) in die Funktion als Objekt und $ (this) .html (‚New Text‘); stattdessen.

Ich hoffe, das hilft jemandem.