Question

我有一个登录表单，我希望在提交表单时Sign in按钮的文字更改为Signing in。

最好的方法是什么？

我希望使用Meteor方式实现的示例:(加载状态示例）

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

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

2 个答案: