1

Tenho um botão de submit com um span dentro:

<div class="btn-toolbar justify-content-center">
    <button type="submit" class="btn btn-primary btn-loading">
      <span class="circle"></span> Próxima etapa
    </button>
  </div>

e queria mudar o texto dele quando estiver enviando, porem quando eu uso o .val não acontece nada. Porem se eu usar .text ele muda o texto mas tira o <span> e é preciso que ele continue. Meu JS ( já esta dentro de document ready ):

var btnsubmit = $(":submit");
var loadingcircle = $("span.circle");
loadingcircle.show();
btnsubmit.prop('disabled', true).val("Validando CNPJ");
3
  • 3
    Você pode usar o comando .html escrevendo o span com o texto desejado. Commented 9/10/2018 às 15:14
  • 1
    .val() Não funciona para isto, este método do jQuery é para pegar valores de elementos de formulários, como inputs, selects, etc... Não para pegar texto de botão!
    – LeAndrade
    Commented 9/10/2018 às 15:17
  • 1
    Igor, .val, como o "nome" já diz, é para atributo value=, obviamente não se aplica ao seu caso (não tem value no seu button). @RobertoBraga seria legal postar como resposta, assim fecharia a questão
    – Largato
    Commented 9/10/2018 às 15:17

1 Resposta 1

5

Temos alguns pontos a considerar:

1- O uso da função val() não é viável nesse caso pois o seu button não tem o atributo value.

2- Usando text() você conseguirá mudar o texto do botão, porém, todo conteúdo que tiver dentro dele será sobrescrito.

Uma solução: Usar a função html().

Mesmo assim o conteúdo que estiver no botão será sobrescrito, para isso, basta adicionar novamente seu span e após inserir o texto pretendido.

Ficará assim:

$('.btn-loading').on('click', function(){
    $(this).html("<span class='circle'></span> Carregando...");
});
.circle:before {
  content: "♦";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn-toolbar justify-content-center">
    <button type="submit" class="btn btn-primary btn-loading">
      <span class="circle"></span> Próxima etapa
    </button>
  </div>

1
  • Entendi, obrigado! Commented 9/10/2018 às 15:25

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .