フォーム送信時に複数のフォームボタンを無効にしても、正しいアクションが実行される方法

Question

複数の送信ボタンがあるフォームがあります。私は単に、いずれかが押されるとそれらを無効にしたいと思います.submit（）JQueryハンドラでそれらを無効にするまではすべて正常に動作します。この場合、フォームはボタン名/値情報をフォームと共に送信しなくなります。ボタンを無効にするにはどうしたらいいですか？

フォーム

<form action="myaction" method="post" name="sendgift" id="sendgift" > 
    ....input, etc ....  
    <input type="submit" name="_action_go" value="Looks great! Do it" id="sendgiftbtn" /> 
    <input type="submit" name="_action_index" value="I need to make changes" id="gobackbtn" /> 
</form> 

JS：

<script type="text/javascript"> 
    $("#sendgift").submit(function() { 

     //if I remove these two lines, everything works 
     $("#sendgiftbtn").attr('disabled', 'disabled'); 
     $("#gobackbtn").attr('disabled', 'disabled'); 

     console.log("disable buttons called"); 
     return true; 
    }); 


</script> 

Answer 1

その場合には代わりのボタンがdisabledクラスを追加して、いつでもあなたはsubmitformこのクラスをチェック無効。クラスがある場合はreturn false else trueそしてtrueを返す前にdisabledクラスをsubmitのbuttonsのすべてのクラスに追加します。

$("#sendgift").submit(function(e) { 

     if(!$(e.target).hasClass('disabled')){ 
      //if I remove these two lines, everything works 
      //$("#sendgiftbtn").attr('disabled', 'disabled'); 
      //$("#gobackbtn").attr('disabled', 'disabled'); 

      //console.log("disable buttons called"); 

      $(this).find('input[type=submit]').addClass('disabled'); 

      return true; 
     } 
     return false; 
    }); 

定義disabled属性は、設計によってフォームの送信から要素を削除

.disabled{ 
    padding: 0px 6px 0px 6px; 
    border: 2px outset ButtonFace; 
    color: GrayText; 
    cursor: inherit; 
} 

Answer 2

としてdisabledボタンのスタイル：http://www.w3schools.com/tags/att_input_disabled.asp

3つのアプローチ：

1. フォーム要素が無効になっていることを「表示」するには、 フィールドの値を隠し変数 <input type='hidden' value='[the value of the disabled field]' name='[name of disabled field]' />に保存してから、表示される の入力を無効にします。

2. フィールドを無効にしてスタイリングし、ユーザーがフィールドを再度変更しようとするたびにフィールドblur()がオンになるonfocusイベントを追加することもできます。

3. 無効な属性が設定された 入力を無効にするフォームにonsubmitイベントを追加すると、通常どおりに が送信されます。