2011-11-09 6 views
3

私は、2つの異なる送信ボタンを持つフォーム送信中にクリックされたボタンのid属性を選ぶクロスブラウザ互換の方法を探しています。私はFireFoxでこれを次のように達成できましたが、explicitOriginalTargetをサポートしていないためIE 8またはChromeでは動作しません。chromeとIEの代わりにexplicitOriginalTarget.idに8

$("#postForm, #dialogPostForm, #pastPostForm").live('submit', function(event) { 
    event.preventDefault(); 
    if (event.originalEvent.explicitOriginalTarget.id === 'pastPosts'){ 
    ...SNIP... 

誰かがこれに対応するクロスブラウザを提案できますか?

私は答えをHow can I get the button that caused the submit from the form submit event?から試してみましたが、.live jqueryメソッドを使用し、イベントオブジェクトを使用して元の入力サブミットIDを選択したいと思います。

<form id="postForm" action="{% url account_tracker mashup.pk %}?fuzzy=true" method="post"> 
    <div class="mygoal">Update Your Progress: {{ form.post }} 
    <input type="submit" value="+ 1" class="formbtn" style="font-size:18px;"/> 
    <input type="submit" value="This week" style="font-size:18px;" id="pastPosts" class="formbtn"/>   
    <span id="result" class="results"></span> 
    </div> 
</form> 

私は私自身の解決策を考え出したUPDATE:ここ

UPDATEは、私は、発信元からボタンIDを提出取得しようとしています私のフォームです。フォームに「名前」属性を追加するonclick属性を追加します。次に、フォーム処理で、フォーム名が「過去」であるかどうかを確認し、何らかの処理を行い、フォームが処理を終了した後に属性を削除します。これは私が知る限りすべてのブラウザで動作します。考える

<input type="submit" value="This week" style="font-size:18px;" id="pastPosts" class="formbtn" onclick="$('#postForm').attr('name', 'past');" /> 
+0

[送信ボタンはどれですか?](http://stackoverflow.com/questions/7442483/which-submit-button-was-pressed) –

答えて

0

:私は上をクリックすると、この私にクローム、IE9、およびFF8の '子' を提供します(更新)

$('#parent').live('click', function(e){ 
    var target = e.originalEvent || e.originalTarget; 
    console.log($(target.srcElement || target.originalTarget).attr('id')); 
}); 

<div id="parent"> 
    <div id="child"> 
     clicky 
    </div> 
</div> 

を私たちは、次のロジックを適用することができます子。

+0

入力タイプ= submit idを探しています2つの固有の送信ボタンがあるため、フォーム送信を開始しました。これは私にフォームIDを与え、私は入力を得ることができますが、どちらがイベントを開始したのでしょうか? – ender

+0

その場合、実際にはより多くのデータ(特にHTMLの例)を提供する必要があります – Matt

+0

私はそれを更新してフォームターゲットを表示しました。 – ender

3

代替手段はありません。

これはFirefox専用のプロパティです。

これは本当に古い質問です。回答する必要があります。

私はこれについてGoogleで検索し、基本的には、フォーカスのある要素を取得しようとhttp://www.webmuse.co.uk/blog/using-forms-with-multiple-submit-buttons-and-jquery-events/

上の解決策を見つけました。

例:

(function($){ 
 
    $(document).ready(function(){ 
 
    
 
    $('#user_form').submit(function(event){ 
 
     
 
     event.preventDefault(); //stops submission 
 
     
 
     $('#name_submit') 
 
     .text(
 
      //searches all the submit buttons 
 
      $('input[type="submit"], button[type="submit"]',this) 
 
      .filter(':focus') //finds the focused one 
 
      .attr('name') //takes the name 
 
     ); 
 
     
 
    }); 
 
    
 
    }); 
 
})(jQuery);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
 

 
<form action="#" id="user_form"> 
 
    <input type="email" placeholder="Email"/><br> 
 
    <input type="password" placeholder="Password"/><br> 
 
    
 
    <input type="submit" name="login" value="Login"/> 
 
    <input type="submit" name="register" value="Register"/> 
 
</form> 
 
<br> 
 
Clicked submit name: <span id="name_submit">(none)</span>

私はこれをテストしたのだが、IE7とFirefox(少なくとも現在のバージョン)で動作します。

+0

フォームがEnterによって提出された場合、 ':focus'は失敗し、最初に' submit'要素 – andreymal