総ありがとう 4,728万
詳細
検索
  • ベストアンサー
  • すぐに回答を！

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

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

お礼率 71% (28/39)

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

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

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

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

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

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

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

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

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

こんにちは。

何度もすいません。

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

スマートにこれでも良いですね。
わざわざeach()を使う必要ありませんでした。
通報する
共感・感謝の気持ちを伝えよう！ ありがとう0 （OK-チップをおくる）
お礼コメント
keeeeeeen

お礼率 71% (28/39)

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

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

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

その他の回答 （全2件）

  • 回答No.2

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

こんにちは。

動かなかった部分ですが、括弧内でどうのこうのというより
$(id3).submit(function() {
});
では無いでしょうか。
$('id3')ではid3というタグをセレクトしている気がします。
’’で囲っているため
通報する
共感・感謝の気持ちを伝えよう！ ありがとう0 （OK-チップをおくる）
お礼コメント
keeeeeeen

お礼率 71% (28/39)

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

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

実験したみたところ、おっしゃるとおりでした！
単に「’’」や「""」で囲っているため、３日間、悪戦苦闘していたのでした！（泣）
勉強になりました！
投稿日時：2012/08/22 12:40
  • 回答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;
});
});
});
通報する
共感・感謝の気持ちを伝えよう！ ありがとう0 （OK-チップをおくる）
お礼コメント
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
結果を報告する
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,600万件のQ&Aを分析して最適な回答をご提案します。

送 信
関連するQ&A

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

ピックアップ

カテゴリ

[ 一覧 ]

AIがおススメ！知っておきたいQ&A

ページ先頭へ
ページの先頭へ

あなたを助けてくれる人がここにいる あなたも誰かを助けることができる

誰かの疑問に誰かが答えることでQ&A が出来上がり、後で見に来たたくさんの人の悩みの解決に役立てられています。
あなたもQ&A で誰かの悩みに答えてみませんか？ 詳しくはこちら
カテゴリ別にQ&Aを見る
キーワードでQ&Aを検索する
詳細検索
コンテンツ
コンタクト
関連サービス
OKWAVE bestanswer
Copyright © 2019 OKWAVE, Inc. All Rights Reserved.