jQueryで複数のボタンから1つのスクリプトへPOSTする
WEBプログラマー＋WEBデザイナーなZARU日記 さんの コチラのエントリー より。
「 jQuery を使ってAjaxで複数のボタンから１つのスクリプトへPOSTする。」ってのを、 自分なりにちょっとやってみたよ。(X)HTMLの構成に左右されますが、こんな感じでいかがでしょう？
まずはHTMLはこんな感じのを用意。ちょっとやりやすく変えてます。
<div>
<input type="text" name="textarea1" id="textarrea1" />
<input type="hidden" name="id1" id="id1" />
<input type="button" value="post" />
</div>
<div>
<input type="text" name="textarea2" id="textarrea2" />
<input type="hidden" name="id2" id="id2" />
<input type="button" value="post" />
</div>
<div>
<input type="text" name="textarea3" id="textarrea3" />
<input type="hidden" name="id3" id="id3" />
<input type="button" value="post" />
</div>
で、 jQuery ではこんな感じ。
<script type="text/javascript">
//<![CDATA[
$(function ()
{
// divの中にあるtype="button"なinputにイベントを設定。
$('div input:button').click(function ()
{
// ボタンの親要素(div)をjQueryでラップ。
var $$ = $(this).parent('div');
// 必要な値を持ってくる。
var options = {
'textdata' : $$.children('input:text').val(),
'id' : $$.children('input:hidden').val()
}
// スクリプトへPOST。
$.post('post.php', options, function (data)
{
// 後処理とかする。
});
});
});
//]]>
</script>
とりあえずコレで動く（ハズ）。 けど、なんか汚いし手数が多い気がする。 divで括った意味もそんなに無くなってるしなぁ。
なので、divをformに変更してみる。
<form action="post.php" method="post">
<input type="text" name="textarea1" id="textarrea1" />
<input type="hidden" name="id1" id="id1" />
<input type="submit" value="post" />
</form>
<form action="post.php" method="post">
<input type="text" name="textarea2" id="textarrea2" />
<input type="hidden" name="id2" id="id2" />
<input type="submit" value="post" />
</form>
<form action="post.php" method="post">
<input type="text" name="textarea3" id="textarrea3" />
<input type="hidden" name="id3" id="id3" />
<input type="submit" value="post" />
</form>
これだと jQuery ではこんな感じ。
<script type="text/javascript">
//<![CDATA[
$(function ()
{
$('form').submit(function ()
{
// サブミットされたformを軸にする。
$.post(this.action,
$('input:text, input:hidden', this).serialize(),
function (data)
{
// 後処理。
});
// 実際のsubmit処理をキャンセル。
return false;
});
});
//]]>
</script>
かなりすっきりした気がする。 実際は他との衝突を避ける為に、もうちょっと手を加えなくちゃダメだろうけど。
WEBプログラマー＋WEBデザイナーなZARU日記 さんの趣旨とかけ離れてしまっていたらすいません。
- Posted at:
- 2007/09/24 16:43:54
- 2 Comments
- 0 TrackBacks
- Tags:
- JavaScript
- jQuery
- Trackback:
- http://humming.via-kitchen.com/2007/09/24/post-from-plural-to-one-script-on-jquery/trackback/
TrackBacks
まだ登録されていません。
Comments
ZARU
トラックバックありがとうございます。
非常に勉強になりました！
$('div input:button').click(function (){});といった方法を活用しようと思います。というか、これを活用しないと jQuery を使っているメリット半減ですね。
nobu
こちらこそ勉強になりました。
また覗かせていただきますね。