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

解決済

質問者：keeeeeeen
質問日時：2012/08/22 01:27
回答数：3件

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

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

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

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

----------------------------------------------
大元　　　正常に稼働
----------------------------------------------

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">

</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に、１つのjavascriptで対応させたいだけで、
上記の様な、まわりくどいやり方には全くこだわっていません。

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

No.3ベストアンサー

回答者： LancerVII
回答日時：2012/08/22 11:37

こんにちは。

何度もすいません。

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

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

- 0
- 件

通報する

この回答へのお礼

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

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

なるほど！
こちらの方がサーバー負荷が少なそうですね！
こちらを元に改造させていただきます！
ありがとうございます！

通報する

お礼日時：2012/08/22 12:46

No.2

回答者： LancerVII
回答日時：2012/08/22 11:32

こんにちは。

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

- 0
- 件

通報する

この回答へのお礼

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

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

実験したみたところ、おっしゃるとおりでした！
単に「’’」や「""」で囲っているため、３日間、悪戦苦闘していたのでした！（泣）
勉強になりました！

通報する

お礼日時：2012/08/22 12:40

No.1

回答者： LancerVII
回答日時：2012/08/22 07:57

こんにちは。

全ての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;
});
});
});

- 0
- 件

通報する

この回答へのお礼

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

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

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

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

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

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

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

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

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

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

id3="#form1";

をかませる事によって、

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

が、うまく稼働しはじめました。
以上、何故変数の値が括弧内で展開されなかったか、ご報告させていただきました。
（もし、この推論が間違っていたらご指摘下さい）