.val does not work on submit button

Question

.val does not work on submit button

Navigation

#1 by (5 votes)

1

I have a submit button with a span inside:

<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>

and I wanted to change the text of it when sending, but when I use .val nothing happens. But if I use .text it changes the text but takes out <span> and it needs to continue. My JS (already in document ready):

var btnsubmit = $(":submit");
var loadingcircle = $("span.circle");
loadingcircle.show();
btnsubmit.prop('disabled', true).val("Validando CNPJ");

javascript jquery

asked by anonymous 09.10.2018 / 17:00

1 answer

Foreach running only once What is the Fortran language used for? [closed]

score 5 · Accepted Answer

We have some points to consider:

The use of the val() function is not feasible in this case because its button does not have the value attribute.

2- Using text() you will be able to change the texto of the button, however, any content inside it will be overwritten.

One solution: Use the html () function.

Even though the contents of the button will be overwritten, you just need to add your span and after entering the desired text.

It will look like this:

$('.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><divclass="btn-toolbar justify-content-center">
    <button type="submit" class="btn btn-primary btn-loading">
      <span class="circle"></span> Próxima etapa
    </button>
  </div>