How to disable button after sending message?

Asked

Viewed 681 times

3

I have an Ionic app that sends messages. Already helped me, here in the same forum, to make a way that does not allow the user to touch the send button, without having typed anything, so the message does not go blank. Blz, it works cool

<button class="button button-clear button-positive" ng-disabled="msgForm.msg.$invalid && disableButton" ng-click="enviarMsg(mensagem)">Enviar</button>

controller:

$scope.enviarMsg = function (mensagem) {
    $scope.disableButton = true;

    var dia = moment().format(); //2016-02-16 T 16:05:52-02:00
    var diaP = dia.split('T');
    var dia = diaP[0];

    var horaP = diaP[1];
    var horaP2 = horaP.split(':');
    var hora = horaP2[0]+':'+horaP2[1];

    var enviaMsg = {
        mensagem: mensagem,
        idUsuario: $window.localStorage.getItem('idUsuario'),
        idCep: $window.localStorage.getItem('idCep'),
        nome: $window.localStorage.getItem('nome'),
        dia: dia,
        hora: hora
    }
    $http.post("http://www.vigilantescomunitarios.com/www/php/enviaMsgLogra.php", enviaMsg).success(function (data){
        $scope.disableButton = false;
        pegaMsgsLogra();
        $scope.mensagem = {
          msg: ""
        }

    });
}

However, as sometimes the message takes time to leave, I would like the button is also disabled and the field, too, until the message is sent. How could I do that? because I’m already using ng-disabled on the button.

angularjs ionic

  • http://answall.com/questions/115273/comordisablilitar-campo-e-bot%C3%A3o-em-Angularjs

  • Friend, this post that you posted here, I who made and helped me in a part of my doubt. Now the doubt is another.

  • According to what you described it seems the same thing.. Improve your question a little bit.

  • What is your suggestion of question? For they seem the same but it is not kkkk

  • 1

    ng-disabled="msgForm.msg.$invalid && condicaoMensagem"

  • Blz! I’m gonna try

  • Dude, it didn’t work... I’ll put my current code here in the post

  • Put the entire code where you make the request

Show 3 more comments

2 answers

3


You can try it this way:

//Controller

$scope.disableButton = false;

function myController(){
$scope.disableButton = true;
//Requisição
....
//Após o fim da requisição disableButton volta a ser false
$scope.disableButton = false;
}

Html:

<input type="text" ng-disabled="disableButton"/>
<button class="button button-clear button-positive" ng-disabled="msgForm.msg.$invalid || disableButton" ng-click="enviarMsg(mensagem)">Enviar</button>

Example: http://jsfiddle.net/Lvc0u55v/3787/

  • Thanks a lot, I’ll try...

  • I already have this statement, up there, at the beginning of the whole controller, along with the initialization of other variables, the $Scope.disableButton = false;

  • But I’ll try anyway.

  • @Gustavosevero I updated the code, use || instead of &&. I also put an example.

  • Thanks Diego. What does this "ng-disabled="disableButton" in the input field/

  • Disables input field when message is being sent.

  • Right. But funny that only after I put ng-disabled in the input field then the button worked tb, was disabled, while the message was not sent

Show 2 more comments

0

Do the following thing: In the tag form, enter the following code:

 onsubmit="this.enviar.value = 'Enviando...'; this.enviar.disabled = true;"

After, on the Ubmit button, enter the following code: 

name="enviar" id="enviar-contato"

It will look for the button with the name, after Submit, it will disable, and could not see more can be clicked until the upload is done.

Browser other questions tagged angularjs ionic

You are not signed in. Login or sign up in order to post.