如何在提交表单时设置按钮加载文本？

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