2014-09-26 3 views
1

У меня есть форма для входа, и я хочу, чтобы текст кнопки Sign in изменился на Signing in, когда форма отправляется.Как установить кнопку загрузки текста при отправке формы?

Каков наилучший способ для этого?

Пример того, что я хотел бы достичь, используя путь метеора: (загрузка состояния пример)

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

ответ

2

Вот некоторые шаблонный код, который вы можете играть с:

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

EDIT: добавлено отключенное состояние для кнопки бесплатно.

+0

Советов: используйте 'отключена = "{{нагрузку}}"' вместо '{{ инвалидов}} '. –

+0

Не понял, спасибо за советы: https://github.com/meteor/meteor/wiki/Using-Blaze#conditional-attributes-with-no-value-eg-checked-selected – saimeunt

0

Вы можете изменить текст вашей кнопки на событии нажатия Знамения в. Например:

$("#yourbuttonid").click(function() { 
    $("#yourbuttonid").val("Signing in"); 
}); 
Смежные вопросы