Question

Je poste des données en utilisant ajax et je veux changer le texte du bouton. Je ne sais pas vraiment par où commencer. Le code que j'ai est jusqu'à présent ci-dessous:

$("input[type='button'][name='Subscribe']").click(function(e){ 
$.ajax({ 
    type: "POST", 
    url: "test.php", 
    data:{ 
    id: $(this).attr('id'), 
    idMembers: $(this).attr('idMembers') 
    }, 
    success: function(msg){ 
     alert("Subscribed"); 

    } 
}) 
}); 

Answer 1

$("input[type='button'][name='Subscribe']").click(function(e){ 
$this = $(this); 
$this.val("processing") // or: this.value = "processing"; 
$this.prop('disabled', true); // no double submit ;) 
$.ajax({ 
    type: "POST", 
    url: "test.php", 
    data:{ 
    id: $this.attr('id'), 
    idMembers: $this.attr('idMembers') 
    }, 
    success: function(msg){ 
     alert("Subscribed"); 
     $this.val("i'm finally done!"); // pfewww, that's was hard work! 
    } 
}) 
}); 

Answer 2

$("input[type='button'][name='Subscribe']").attr('value', 'newvalue here!'); 

Answer 3

Essayez ceci:

$("input[type='button'][name='Subscribe']").click(function(e){ 

$(this).text('My new text'); 

$.ajax({ 
    type: "POST", 
    url: "test.php", 
    data:{ 
    id: $(this).attr('id'), 
    idMembers: $(this).attr('idMembers') 
    }, 
    success: function(msg){ 
     alert("Subscribed"); 

    } 
}) }); 

Answer 4

$("input[type='button'][name='Subscribe']").click(function(e){ 
    var _button = $(e.target); 
    $.ajax({ 
     type: "POST", 
     url: "test.php", 
     data:{ 
     id: $(this).attr('id'), 
     idMembers: $(this).attr('idMembers') 
     }, 
     success: function(msg){ 
      alert("Subscribed"); 
      _button.val('Subscribed') 
     } 
    }) 
    }); 

Answer 5

Voici la meilleure solution parmi toutes celles qui vous donne le contrôle sur le moment vous voulez afficher quel texte-

Il suffit d'ajouter beforeSend et complete méthode dans votre requête jQuery. Voici un exemple

// contact form handling using AJAX 
$('#contact-form').submit(function() { 
    var contactForm = $('#contact-form'), 
     btnSubmit = $('.btn-submit'); 
    $.ajax({ 
     type: contactForm.attr('method'), 
     url: contactForm.attr('action'), 
     data: contactForm.serialize(), 
     beforeSend: function() { // while sending the request the button is disabled and it shows loading spinner 
      btnSubmit.prop('disabled', true); 
      btnSubmit.html('<i class="fa fa-spinner fa-spin fa-fw btn-icon fa-2x"></i>'); 
     }, 
     complete: function() { // after the request is sent, the spinner is gone and now it's back to normal. One can submit again 
      btnSubmit.prop('disabled', false); 
      btnSubmit.html('<i class="fa fa-paper-plane fa-lg btn-icon" aria-hidden="true"></i> Submit'); 
     }, 
     success: function(response) { 
      if (response == 'success') { 
       alert("Hi, your query has been sent. I will be back to you soon. Thank you :)"); 
      } else { 
       var erroMsg = response.split('<br/>').join('\n'); 
       alert(erroMsg); 
      } 
     } 
    }); 
    return false; 
}); 

Comme vous pouvez le voir beforeSend vous permet de contrôler ce qu'il faut faire lorsque la demande est envoyée et complete vous permet de contrôler ce qui se passe lorsque la demande est envoyée avec succès.

Espérons que ça aide. Je vous remercie.