如何在提交表單時設置按鈕加載文本？

Question

我有一個登錄表單，當表單提交時，我希望Sign in按鈕的文本更改爲Signing in。

這樣做的最好方法是什麼？

的想什麼，我使用流星的方式來實現實例：（負載狀態的例子）

http://getbootstrap.com/javascript/#buttons

Answer 1

下面是一些樣板代碼，你可以玩的：

HTML

<template name="myForm"> 
    <form> 
    <button type="submit" disabled={{loading}}> 
     {{! display different text based on a reactive helper}} 
     {{#if loading}} 
     Signing in... 
     {{else}} 
     Sign in 
     {{/if}} 
    </button> 
    </form> 
</template> 

JS

Template.myForm.created=function(){ 
    // attach a reactive var to the template instance 
    // you need to meteor add reactive-var first ! 
    this.loading=new ReactiveVar(false); 
}; 

Template.myForm.helpers({ 
    loading:function(){ 
    // return the value of the reactive var attached to this template instance 
    return Template.instance().loading.get(); 
    } 
}); 

Template.myForm.events({ 
    "submit":function(event,template){ 
    // mandatory to prevent page refresh inherent to classic from submission 
    event.preventDefault(); 
    // set loading var to true 
    template.loading.set(true); 
    // we use Meteor.loginWithPassword as an example, but you could use 
    // any method call to the server here 
    Meteor.loginWithPassword(...,function(error){ 
     // reset the reactive var even if the login failed (to allow retries) 
     template.loading.set(false); 
     // 
     if(error){ 
     console.log(error); 
     return; 
     } 
     // success code goes here 
    }); 
    } 
}); 

編輯：爲按鈕免費添加禁用狀態。

Answer 2

你可以改變你的按鈕對登錄的單擊事件文本，例如：

$("#yourbuttonid").click(function() { 
    $("#yourbuttonid").val("Signing in"); 
});