アクション後のボタンの背景色を変更する（ワンクリック後）

Question

こんにちは私はお問い合わせフォームを持っています。私はPHPでやりたいです。そして私は送信ボタンを持っています。メールが送信されたときにすべてのフィールドが押される準備が整ったら、私のボタンを変更したいと思っています。私のボタンの中の最初のものは背景色が黄色のテキストで、テキストは「送信」です。ボタンを押して電子メールを送信すると、背景色を赤色に変更したいので、テキストにアイコンを追加したい場合は、テキストを「送信済み」に変更します。これどうやってするの？

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()"> 

これを試してください。あなたはjavascriptでそれを行うことができます。

Answer 2

フォームには入力と送信ボタンがあります。

すべてのフォームフィールドが入力された後に送信ボタンを操作し、送信ボタンをクリックすると、最後に再び操作します。あなたがする必要がどのような

は、フォームで

1. フォームの入力フィールドを二つのことを処理するために（プレーンバニラやjQueryのいずれかで、あなたが最もよく合ったものを選択）少しJavaScriptを書くことである（最初のボタンを提出するために変更）： 入力フィールドにイベントを添付して、必要に応じて検証をチェックし、それに応じて送信ボタンを変更します。
2. フォームの送信ボタン（2番目の送信ボタンの変更用）： 送信ボタンにクリックイベントをアタッチします（デフォルトを避けるようにしてください。送信ボタンをクリックすると、願い。
私はあなたに私のシナリオでは、私は2つの私の形式で入力し、無効とグレー表示デフォルトでは、送信ボタンを持っている例を、書いている。 とすぐにすべてのフォームフィールドがfilled-あるよう

（空ではない）、送信ボタンがアクティブになります（属性の削除と色の変更を無効にします）。最後に送信ボタンをクリックすると、クリックされたという表示として緑色に変わります。

$('#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.. 
}); 

ここでは簡単な完全に動作する例を示します：もちろん https://jsfiddle.net/wx9gonrh/

あなたはこの例を使用し、独自のニーズに合わせて変更したり、ガイダンスとして、これを使用してゼロから独自のものを書くことができます。あなたは電子メールが正常に送信された後にのみ、送信ボタンを変更するための非同期メソッドを組み込むこともできますあなたの場合は

（例えばアヤックス完全な\イベントを行って）

はそれが役に立てば幸い！