Ändern Hintergrundfarbe der Schaltfläche nach gesendeten Aktion (nach einem Klick)

Question

Hallo Ich habe ein Kontaktformular Ich möchte es mit PHP machen. Und ich habe die Submit-Taste, ich möchte, wenn alle Felder bereit sind zu drücken, wenn die E-Mail gesendet wurde, um meine Schaltfläche zu ändern. Zuerst in meiner Taste ist ein Text mit Hintergrundfarbe gelb und der Text ist "Senden". Wenn ich den Knopf drücke und die E-Mail gesendet wird, möchte ich die Hintergrundfarbe in Rot ändern und ich möchte ein Symbol neben dem Text hinzufügen, der Text wird in "Gesendet" geändert. Wie kann ich das machen?

Answer 1

<script src="jquery.min.js"></script> 

<script > 
function button(){ 
    //your ajax code for sending data 
    /* function retrieveData(){ 
     $.post('server.php',{}, function(data){ 
    });*/ 

    $("#button").attr('value', 'Sent'); 
    $("#button").css("background-color","red") 
} 
</script> 

<input type="button" id="button" name="button" value="Send" onclick="button()"> 

Versuchen Sie dies. Sie können es mit Javascript tun.

Answer 2

Sie haben ein Formular mit einigen Eingaben und einem Absenden-Button.

Sie möchten die Schaltfläche "Senden" bearbeiten, nachdem alle Formularfelder ausgefüllt wurden, und sie schließlich erneut bearbeiten, nachdem auf die Schaltfläche "Senden" geklickt wurde.

Was Sie tun müssen, ist ein wenig Javascript schreiben (entweder Plain-Vanilla oder jQuery, wählen, was Ihnen am besten passt) zwei Dinge in Ihrem Formular Eingabe des

1. Ihre Formularfelder behandeln (zum ersten Absenden-Button change): Hängen Sie ein Ereignis an die Eingabefelder an, um die Validierung nach Ihren Wünschen zu überprüfen, und ändern Sie die Übermittlungsschaltfläche entsprechend.
2. Die Schaltfläche zum Absenden des Formulars (für die zweite Schaltfläche zum Senden): Fügen Sie ein Klickereignis an den Absenden-Button an (und vergewissern Sie sich, dass der Standardwert nicht geändert wird möchte.

ich Ihnen ein Beispiel, wo in meinem Szenario, das ich zwei haben schrieb Eingang in meiner Form habe und ein Absenden-Button, die standardmäßig deaktiviert und ausgegraut ist. Sobald alle Formularfelder filled- sind In (nicht leer) wird die Übergabeschaltfläche aktiv (deaktiviertes Attribut entfernt und Farbänderung) - schließlich wird die Schaltfläche beim Klicken auf die Schaltfläche zum Senden auf grün umgestellt, um anzuzeigen, dass darauf geklickt wurde.

$('#myForm input').on('keyup',function(){ 
    var validated = true; 
    $('#myForm input').each(function(){ 
     if($(this).val() === ''){ 
     validated = false; 
    } 
    }); 
    if(validated){ 
     $('#submitBtn').removeClass('disabled').prop('disabled',false); 
    }else{ 
     $('#submitBtn').addClass('disabled').prop('disabled',true); 
    } 
}); 

$('#submitBtn').on('click',function(e){ 
    e.preventDefault(); 
    e.stopImmediatePropagation(); 
    $(this).addClass('submited').prop('disabled',true); 

    // the rest of your code for submission.. 
}); 

Hier ist die einfache voll funktionsfähiges Beispiel: mit diesem als Anleitung https://jsfiddle.net/wx9gonrh/

Natürlich können Sie dieses Beispiel verwenden und ändern Sie es an Ihre eigenen Bedürfnisse oder Ihre eigenen von Grund auf neu schreiben.

In Ihrem Fall, dass Sie (ein Ajax komplettes \ done Ereignis zum Beispiel) gesendet wurden ein asynchrones Verfahren zu übernehmen für die Änderung der Submit-Button erst, nachdem die E-Mails wünschen können erfolgreich

Hoffen, es hilft!