davideghz davideghz - 2 months ago 7
jQuery Question

JQUERY Disable and insert HTML into button on submit

I would like to change text and disable the button of a form on submit. The code below does not work..

// DISABLE SUBMIT BUTTON ON CLICK
$('#contactform').submit(function() {
$(this).find("button[type='submit']").text("<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>");
$(this).find("button[type='submit']").prop('disabled',true);
});


EDIT

The HTML is:

<button type="submit" id ="myButtonLead" name="myButtonLead" class="btn form-cta">
RICHIEDI INFORMAZIONI</br>
<p class="sub">&Egrave; GRATIS!</p>
</button>


Expected behaviour is to change the button's HTML content (replace the current text with the font awesome icon).
Any hint? :)

Answer
.text("<i class="fa fa-cog fa-spin fa-3x fa-fw"></i>");

should be

.html("<i class='fa fa-cog fa-spin fa-3x fa-fw'></i>");

Please check below snippet for more understanding.

// DISABLE SUBMIT BUTTON ON CLICK
$('#contactform').submit(function() {
  $(this).find("button[type='submit']").html("<i class='fa fa-cog fa-spin fa-3x fa-fw'></i>");
  $(this).find("button[type='submit']").prop('disabled',true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="contactform">
  <button type="submit" id ="myButtonLead" name="myButtonLead" class="btn form-cta">
    RICHIEDI INFORMAZIONI</br>
  <p class="sub">&Egrave; GRATIS!</p>
  </button>
</form>