.val does not work on Ubmit button

Asked

Viewed 40 times

1

I have a Ubmit 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 wanted to change his text when sending, but when I use the .val nothing happens. But if I use .text it changes the text but takes out the <span> and he needs to continue. My JS ( is already inside Document ready ):

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

    You can use the command .html writing the span with the desired text.

  • 1

    .val() It does not work for this, this jQuery method is to take values of form elements such as inputs, selects, etc... Not to pick up button text!

  • 1

    Igor, .val, as the "name" already says, it is for attribute value=, obviously does not apply to your case (no value on your button). @Robertobraga would be nice to post as an answer, so close the question

1 answer

5


We have some points to consider:

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

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

One solution: Use the function html().

Even then the content that is on the button will be overwritten, for that, just add again your span and after inserting the intended text.

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

Browser other questions tagged javascript jquery

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