jQueryと多くの形態の中で取得1 1つの隠れた値

Question

私はそうのような複数のフォームを持っている：

<form method="post" action="change.php" id="form1"> 
    <input name="product_id" type="hidden" value="abc" /> 
    <input name="button_name" id="submit1" type="submit" value="ADD" /> 
</form> 

<form method="post" action="change.php" id="form2> 
    <input name="product_id" type="hidden" value="xyz" /> 
    <input name="button_name" id="submit2" type="submit" value="ADD" /> 
</form> 

など

私は私ができるだけで一つの値を取得しますが、どのようにする方法を一つの形を知っています私はボタンのクリックに対応する隠し値を取得する？ たとえば、form2のボタンをクリックすると「xyz」が表示されます。

または、私のページ全体に大きなビッグフォームを作成し、隠し値をボタン自体に付ける方がよいでしょうか？ （私はchange.phpに渡す必要がある1つの値しか持っていません）

Answer 1

次のコードは、すべてフォームにハンドラをアタッチしますが、現在の提出イベントに関連するものだった方のフォームで隠しフィールドの値を取得します。

$("form").submit(function() { 
    var $product_id = $(this).find('input[name="product_id"]'); 
    alert("Value within form " + this.id + ": " +$product_id.val()); 
}); 

デモ：http://jsfiddle.net/jB88N/

明らかに、値を警告するだけでなく、もっと上手くいくことができます。ハンドラ内では、thisが送信されるフォームです。

Answer 2

すべてのフォームに対して1つのイベントハンドラを作成できます。

$('form[id^="form"]').on('submit', function() { 
    var hiddenValue = $('input[name="product_id"]', this).val(); 
}); 

しかし、AJAXを使用する方が良いでしょう。