• ベストアンサー
  • すぐに回答を!

JQueryの変数の扱いで弱っています。

  • 質問No.7656619
  • 閲覧数729
  • ありがとう数3
  • 気になる数0
  • 回答数3
  • コメント数0

お礼率 71% (28/39)

お世話になります。
JQuery初心者です。

3日程、ハマリ、行き詰まったので、相談させて下さい。

アマゾンのレビューの「レビューは参考になりましたか?」「はい」「いいえ」の
様なものを作りかけています。

その際、以下の様な記述をしています。
(肝心な部分抜粋)

----------------------------------------------
大元   正常に稼働
----------------------------------------------
<!-- JQuery -->
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
<!--

$(document).ready(function(){

$("#form1").submit(function() {        //●●●この  #form1  の部分を変数にしたい
var str = $(this).serialize();

処理

}};

-->
</script>
</head>

<body>

<form id="form1" method="post" action="">    //●●●#form1とはコノ部分
<select name="option">
<option value="yes" selected>参考になった</option>
<option value="no">参考にならなかった</option>
</select>
<input type="submit" name="submit" value="投票する"/>

</body>
</html>


----------------------------------------------

上記の記述で正常に稼働しています。
が、1つのページにフォームを複数作り、それぞれのフォームにIDをふって、
それぞれ正常に稼働させたいのです。
そこで、javascriptの

$("#form1").submit(function() { 

ここの   #form1   部分を変数にして、複数のフォームに対応させたいと思っています。

が!
以下の様に改良したところ、正常に稼働しません。

----------------------------------------------
以下、改良部分   うまく稼働せず
----------------------------------------------

-------javascript部分

$("input").click(function(){ //●●●ここを改良 変数作成
id2= $(this).attr("class");
sharp="#form";
id3 = sharp + id2;
});

$("id3").submit(function() {       //●●●ここを改良 変数指定

-------フォーム部分

<form id="form1" method="post" action="">
<input type="submit" name="submit" value="投票する" class="1"/>     //●●●ここを改良 class="1" を追加

-------------------------------------------------

つまり、classの「1」をjavascript部分で読み取って、#form の文字列と組み合わせて    #form1
として、機能させたいのですが、うまくいきません。
(何故か、$("#form"+id2) の部分がうまく機能しません。)
※要は複数のフォームのidに、1つのjavascriptで対応させたいだけで、
上記の様な、まわりくどいやり方には全くこだわっていません。

どうか、迷える子羊に愛の手を!

質問者が選んだベストアンサー

  • 回答No.3
  • ベストアンサー

ベストアンサー率 51% (1060/2054)

こんにちは。

何度もすいません。

$('form').submit ( function() {
alert ( $(this).attr('id') );
return false;
});

スマートにこれでも良いですね。
わざわざeach()を使う必要ありませんでした。
お礼コメント
keeeeeeen

お礼率 71% (28/39)

重ね重ね、ありがとうございます!

>わざわざeach()を使う必要ありませんでした。
>スマートにこれでも良いですね。

なるほど!
こちらの方がサーバー負荷が少なそうですね!
こちらを元に改造させていただきます!
ありがとうございます!
投稿日時:2012/08/22 12:46

その他の回答 (全2件)

  • 回答No.1

ベストアンサー率 51% (1060/2054)

こんにちは。

全てのformを対象にして良いなら以下のような感じになると思います。
(ちなみにclass名に数字だけは良くないです)
以下のサンプルはボタンを押すとsubmitが実行され、そのフォームのidを表示しています。
$(this).submit(funciton() {
});
ここに処理を書けば、全てのフォームで同じものを実行できます。

==== HTML
<form id="form1">
<input type="submit" value="form1" />
</form>
<form id="form2">
<input type="submit" value="form2" />
</form>
<form id="form3">
<input type="submit" value="form3" />
</form>
<form id="form4">
<input type="submit" value="form4" />
</form>

==== JavaScript
$().ready ( function() {
$('form').each ( function() {
$(this).submit ( function() {
alert ( $(this).attr('id') );
return false;
});
});
});
お礼コメント
keeeeeeen

お礼率 71% (28/39)

回答ありがとうございます!

その様なシンプルで洗練された方法があるとは全く思いつきませんでした。
早速、教えていただいたメソッドを組み入れて改造したいと思います。
重ね重ね、ありがとうございます!


ちなみに、何故、私が改造した方法で、うまくいかなかったか、先ほど判明しましたので、ご報告します。
つまり、

$("id3").submit(function() {

何故、上記 $("id3")の部分に、変数id3の値が代入されなかったかです。
実験として直前に、わざと

id3="#form1";
$("id3").submit(function() {

とやっても、うまく稼働しませんでした。
(つまり、変数id3の値が  $("")の中で展開されていない)

そこで、これは
$("id3").submit(function() {
を起点にして稼働しはじめるのだから、それ以前の変数の値は関係なくなるのかな?
との着想の元、この行の前に

$("input").click(function(){

を入れて、これ起点で起動させ、これにつづけて、

id3="#form1";

をかませる事によって、

$("id3").submit(function() {

が、うまく稼働しはじめました。
以上、何故変数の値が括弧内で展開されなかったか、ご報告させていただきました。
(もし、この推論が間違っていたらご指摘下さい)
投稿日時:2012/08/22 11:28
  • 回答No.2

ベストアンサー率 51% (1060/2054)

こんにちは。

動かなかった部分ですが、括弧内でどうのこうのというより
$(id3).submit(function() {
});
では無いでしょうか。
$('id3')ではid3というタグをセレクトしている気がします。
’’で囲っているため
お礼コメント
keeeeeeen

お礼率 71% (28/39)

ご指摘、ありがとうございます!

>括弧内でどうのこうのというより
>$(id3).submit(function()

実験したみたところ、おっしゃるとおりでした!
単に「’’」や「""」で囲っているため、3日間、悪戦苦闘していたのでした!(泣)
勉強になりました!
投稿日時:2012/08/22 12:40
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
関連するQ&A

その他の関連するQ&Aをキーワードで探す

ピックアップ

ページ先頭へ