- ベストアンサー
JQueryの変数の扱いで弱っています。
LancerVIIの回答
- LancerVII
- ベストアンサー率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; }); }); });
関連するQ&A
- 変数内容をHTML内で表示する方法
javascript初心者です（主にはperlを使っています）。 ajaxに手をだしたところ、perlとの変数の取り扱い方が基本的なところで違っていて戸惑っています。 例えばperlの場合、タグ内の変数（例えば$msg）は、ホームページで表示する際は、その内容が展開表示されるので、 javascriptでも、変数（例えばmsg）を、それと同様に扱ったところ、全く展開表示されずに困っています。 javascriptで変数（例えばmsg）の内容を、htmlタグ内で表示させるには、どうしたらよいのか教えて下さい。 （あれこれ検索してみましたが、何故か、その方法が見つかりませんでした） 具体的には、、、、、 （以下のソース参照） 「チェック」ボタンをクリックしたら、それをきっかけにして、外部プログラムが起動し そこからの返答として、javascriptの変数msgの中に 「exist」もしくは「noexist」が代入されて返ってきます。 それに基づき、javascriptの変数 resultの中に「有 msg」又は「無 msg」が代入され、 それが、<div id="note$id"></div>の部分に表示されます。 が、その際、変数msgの内容を表示させたいのですが、それができません。 例えば result = '有 document.write(msg);'; とやったのですが、それでも表示されません。 msgの内容をHTMLタグ内で表示させる方法を教えて下さい。 よろしくお願いします。 --------------------------------------------- 実際のソース（肝心な部分だけを抽出） --------------------------------------------- ＜header部分＞ <!-- JQuery --> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> <script type="text/javascript"> <!-- // When DOM is ready $(document).ready(function(){ // ------- Form ------- $("input").click(function(){ id2= $(this).attr("class"); sharpform="#form"; sharpfields="#fields"; sharpnote="#note"; formid = sharpform + id2; fieldsid= sharpfields + id2; noteid= sharpnote + id2; $(formid).submit(function() { var str = $(this).serialize(); $.ajax({ type: "POST", url: "./外部ブログラム名.cgi", data: str, success: function(msg) { // Message Sent? Show the 'Thank You' message and hide the form if(msg == 'exist') { result = '有 msg'; $(fieldsid).hide(); } else if(msg == 'noexist') { result = "無 msg"; $(fieldsid).hide(); } else { result = msg; } $(noteid).html(result); } }); return false; }); }); }); --> </script> --------------------------------------------- ＜body部分＞ <div id="note$id"></div> <div id="fields$id"> <form id="form$id" method="post" action=""> <input type="hidden" name="method" value="post"> <input type="hidden" name="check" value="$check"> <input type="submit" value="チェック" class="$id"/> </form> </div> ※html表示時には、$idには、1や２等の数字が入って表示されます。 ---------------------------------------------
- ベストアンサー
- JavaScript
- jQuery 変数の使い方について
jQuery 変数の使い方について 【やりたいこと】 ラジオボタンが複数ある為現在のアクションをまとめたい。 ■ $("input:radio[name='radio01']:checked").val(); の'radio01'の部分に変数を使いたい。 ■document.forms["MON"].hradio02.value の"MON"のフォーム名と、「hradio02」name部分に変数を使いたい。 http://kaicoo.blogspot.jp/2012/03/query_30.html 等を参考に元のソースから JSをまとめてみましたが、うまくいきません。 jQuery内の変数の記述方法を 教えていただけませんでしょうか？ よろしくお願いいたします。 ★JSをまとめたサンプルソース <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal(obj) { var formname = obj.form.name; var radioname = obj.getAttribute('name'); alert(formname); alert(radioname); //選択したラジオのvalueをhiddenに格納する document.forms[formname].h '+ radioname +' .value = $("input:radio[name='+ radioname +']:checked").val(); alert(document.forms[formname].h '+ radioname +'.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr> <td> 結果: </td> <td> <input type="radio" name="radio01" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html> ★元のソースのサンプル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <META http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <META http-equiv="Content-Style-Type" content="text/css"> <script src="jquery.js"></script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_01(obj) { document.forms["MON"].hradio01.value = $("input:radio[name='radio01']:checked").val(); alert(document.forms["MON"].hradio01.value); } //--> </script> <script type="text/javascript" language="JavaScript"> <!-- function setVal_02(obj) { document.forms["MON"].hradio02.value = $("input:radio[name='radio02']:checked").val(); alert(document.forms["MON"].hradio02.value); } //--> </script> </head> <body> <table border="1"> <FORM name="MON"> <tr><td> 結果: </td> <td><input type="radio" name="radio01" value="良好" onClick="setVal_01(this);" >良好 <input type="radio" name="radio01" value="不良" onClick="setVal_01(this);"> 不良 <input type="hidden" name="hradio01" value="未入力です。"> </td> </tr> <tr> <td> 結果2: </td> <td> <input type="radio" name="radio02" value="良好" onClick="setVal_02(this);" >良好 <input type="radio" name="radio02" value="不良" onClick="setVal_02(this);"> 不良 <input type="hidden" name="hradio02" value="未入力です。"> </td> </tr> </table> </Form> </body> </html>
- ベストアンサー
- JavaScript
- AJAXで新規表示されたボタンが稼働しない
下記のようなものを作りました。 1 通常は下記のような <100購入>というボタンが表示されています。 <button class="button8" type="submit" name="volume" value="100">100購入</button> 2 <追加表示ボタン>を押すと、 <button class="button8" type="submit" name="volume" value="500">500購入</button>という<500購入>ボタンが新たに追加されます。 3 <100購入>ボタンか<500購入>ボタンを押すと、お好きな数値が購入できます。 前提条件 <100購入>ボタンは、当初から<form></form>内に直接記載されているボタンです。 <500購入>ボタンは、<追加表示ボタン>を押した際、AJAXにより、<form></form>内に新たに設置されるボタンです。 問題点 <100購入>ボタンは問題なく稼働します。 しかしながら、AJAXにより新たに設置された<500購入>ボタンを押しても、Formが稼働しません。 どのようにすれば、AJAXにより新たに設置された<500購入>ボタンが稼働するようになるでしょうか? よろしくお願いいたします。 +++++++++++++++++++++++++++++++++++++++++++++++++++ 当方が作ったソース <script type="text/javascript" src="./js/jquery.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <div id="msg">ここへ出力</div> <button class="button8" type="submit" name="volume" value="100">100購入</button </form> <BR> <button id="btn0">追加表示</button> <script type="text/javascript"> jQuery(function($){ $("#btn0") .click(function () { $.ajax({ beforeSend:function(BTN){ $("#msg").append("<BR>新規ボタンを表示します<BR>"); }, complete: function (BTN, textStatus) { $("#msg").append("<button class=\"button8\" type=\"submit\" name=\"volume\" value=\"500\">500購入</button><BR>"); } }); }); }); </script>
- ベストアンサー
- JavaScript
- ｊQuery UIについて
今ｊQueryUITabｓというプラグインを使ってタブによる切り替えを行おうとしています。 このプラグインでは、タブの内容をajaxのように他のページを読み込めるとのことで 以下のようなコードを書いてみました。 この場合に、tabs.htmlの方で、読み込んだ先のフォームがクリックされたのを検知するには どうしたらよいのでしょうか。 単純に、tabs.htmlのスクリプトの部分に次のようなコードを書いても「Undifined」が表示されてしまいました。 $("#form1").submit(function(){ alert($("#form1_text").val()); }); もし解決策をご存知でしたら、ご教授お願いいたします。 --------- Tabs.html ------------------ ++++++script++++++++ $(function(){ $("#tabs").tabs(){}); }) ++++++script++++++++ ++++++html++++++++ <div id ="tabs"> <ul> <li><a href = "test1.html">テスト１のフォーム</a></li> <li><a href = "test2.html">テスト２のフォーム</a></li> </ul> </div> ++++++html++++++++ --------- Tabs.html ------------------ --------- test1.html ------------------ <form id = "form1"> <input type = "text" id = "form1_text"> <input type = "submit" id = "form1_submit"> </form> --------- test1.html ------------------ --------- test2.html ------------------ <form id = "form2"> <input type = "text" id = "form2_text"> <input type = "submit" id = "form2_submit"> </form> --------- test2.html ------------------
- 締切済み
- JavaScript
- Javascriptでセレクトメニューの選択チェックの方法
Javascriptでセレクトメニューのフォームをチェックしたいのですが、 リストメニューの「選択して下さい」を選んだままだと、「番号を選択して下さい。」とエラーを出したいのですが、下記の様に書いてみたのですが、うまく動きません…どのように書けばいいか教えて下さい。宜しくお願いします。 <script language=＼"JavaScript＼"> <!-- function Check() { var str = document.form.a.value; if(document.form.a.value == "0") { alert("番号を選択して下さい"); } //--> </script> <form id="form" name="form" method="post" action="##"> <select name="a" onblur="Check();"> <option value="0">選択して下さい</option> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> </select> <input type="submit" name="Submit" value="登録" onClick="Check();"> </form>
- ベストアンサー
- JavaScript
- 変数に値を引き渡すについて
Win2000、JavaScript です。 入力フォームでチェックボックスがあります。 現在は... －－－－－－－－－－－－－－－－－－－－－－－－－ <script language="javascript"> <!--// var strSelectValue; function SetValueC2(objCheck) { strSelectValue = objCheck.value; } //--> </script> <BODY> <FORM METHOD="POST" NAME="MainForm"> <input type="checkbox" name="C2" value="1" onclick="SetValueC2(this)"> －－－－－－－－－－－－－－－－－－－－－－－－－ のように、同じフォーム上で チェックがされたら SetValueC2() へ 値 "1" を引き渡して、 変数 strSelectValue に値を入れています。 それを、 同じフォーム上ではなく function SetValueC2(objCheck) { strSelectValue = objCheck.value; } の部分を別ファイル(.js)へ引き渡ししたいのですが、 引き渡し方がわかりません。 多分 onclick="SetValueC2(this) の部分が違うと思うのですが... どなたか教えてください 宜しくお願いします。
- 締切済み
- JavaScript
- jquery の clickイベント
いつもお世話になっております。 当方jQueryは初めてで試行錯誤しながら使っています。 標題について質問です。 <form> <input type="text" id="code[1]" value="00001"> <input type="submit" id="add[1]"> <input type="submit" id="del[1]"> </form> 上記のフォーム文で、 jQuery.noConflict(); jQuery(document).ready(function($){ $("input").click(function(){ var e = $(this).attr("id"); }); }); とし、上のform文を直接書いた場合は押されたボタンが認識されるのですが、 form文をajax通信でinnerHTMLで出力されたボタンを押した時は ボタンを押してもイベントを認識してくれません。 これはinnerHTMLで出力しているからなんでしょうか。 何度やっても分からず質問させて頂きました。 以上、宜しくお願い致します。
- ベストアンサー
- JavaScript
- jQueryのblockUIをformのボタンから呼ぶ際に、うまくいか
jQueryのblockUIをformのボタンから呼ぶ際に、うまくいかない。 blockUIを以下のように呼んでいます。 <script type="text/javascript" src="jquery/plugin/jquery.blockUI.js"></script> <script type="text/javascript"> // unblock when ajax activity stops $(document).ajaxStop($.unblockUI); $(document).ready(function() { $('#run').click(function() { $.blockUI({ message: '<h1>お待ちください...</h1>' }); $.ajax({ url: 'xxxx', cache: false }); }); }); </script> その上で、 <input id="run" type="submit" value="お待ちください" /> というボタンを単独でつけて押すと、「お待ちください」と表示するところまで 確認できています。 最終的に実現したいことは、formのsubmitボタンを押すことにより、 パラメータを渡した上で、cgiプログラムを実行することです。 <form action="cgi-bin/search.cgi" method="post"> この中に選択条件（パラメーター） <input id="run" type="submit" value="検索開始"> </form> 現在、blockUIを使わずに、submitボタン押すと、検索CGIが適切に 動くことは確認できています。 そこで、 form action=にどのように書けばパラメーターを持ったまま、BlockUIを呼べるのか。 $.ajax({ url: 'xxxx', cache: false }); の url部分にどのように記述すると cgiを呼べるのか。（cgi-bin/search.cgi）では動きませんでした。 そのあたりをご教授お願いいたします。 blockUIの解説ページでは、CGIの実行や別ページへの遷移のサンプルがなく 困っております。 宜しくお願いします。
- ベストアンサー
- AJAX
- ajax反映後のjqueryが動かない
色々と簡略化してますが、以下のようなajaxを交えたコードを書いています。 <script type="text/javascript"> $(function() { /* 初期変数処理 */ ............ /* HTML内object操作 */ ............ /* ある箇所をclickでイベント */ $('#hoge').click(function(e) ←(1)画面アニメーション { test3(); } /* 数秒後に(1)を自動実行 setInterval(function(){ ...... } /* formを使って検索 */ $('#form').submit(function(event) { event.preventDefault(); ........(中略) $.ajax({ type:"POST", url: "hoge.php", data:{data: data}, timeout: xxxxx, beforesend: { ........ }, complete: { ........ } success: function(data){ ......... ← (2)HTML内object操作、jquery部分は避ける test2(); } }); return false; }); function test1(){ ........ }; function test2(){ ........ }; function test3(){ ........ }; }); </script> [HTML] <form id = "form"> <input name="list"/> <button>送信！</button> </form> <div id="hogehoge"> ................. ←(3)検索で内容変更する箇所 </div> としているのですが、一度送信ボタンを押して(2)の処理を行った後、 (1)のアニメーションも含め、すべてのjquery要素が使用できなくなってしまいました。 http://semooh.jp/jquery/api/events/live/type,+fn/ によればliveを使えばclick処理はできるとありましたが、これでも動きません。 setIntervalの効果や、submitイベントすら動きませんでした。 なお、検索前は問題なく動作します。通常時は問題ないのですが、submit後からおかしいので、 ajaxに関してなにか見逃している箇所があるとは思うのですが、 どこが悪いのかはっきりと検討がついていません。 どなたかお知恵をお貸しいただけませんでしょうか。宜しくお願いします。
- ベストアンサー
- JavaScript
- JQUERYをはじめて導入したのですが、
JQUERYをはじめて導入したのですが、 読込み部分の記述が間違っているのか 「$(document).ready(function(){」のところで一箇所エラーとなります。 「オブジェクトでサポートされてないプロパティまたはメソッドです」となります。 設定内容の、現状は下記です。 「validate」設定を実現したいためにjqueryを導入。 ・JQUERYは現在の最新版のものを入手。 ・読み込んだファイルは全く編集などはしてないもの。 ・パスなどの記述は間違っていないようです。確実にファイルは存在しております。 ・一応パーミッションも確認済みです。 ・id"form-host"もformタグに設定しております。 <script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.pack.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.js"></script> <script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/common/js/additional-methods.js"></script> <script type="text/javascript" src="/common/js/messages_ja.js"></script> <script type="text/javascript"> //入力チェック関数に対象フォームIDを指定 $(document).ready(function(){ $("#form-host").validate(); }); </script> jsファイルの読込みの順序が違うのでしょうか、 不必要なjsファイルを読み込んでしまっている？為なのか； validate関連を導入した事があるからいらっしゃれば、 ご教授願います。
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます！ その様なシンプルで洗練された方法があるとは全く思いつきませんでした。 早速、教えていただいたメソッドを組み入れて改造したいと思います。 重ね重ね、ありがとうございます！ ちなみに、何故、私が改造した方法で、うまくいかなかったか、先ほど判明しましたので、ご報告します。 つまり、 $("id3").submit(function() { 何故、上記 $("id3")の部分に、変数id3の値が代入されなかったかです。 実験として直前に、わざと id3="#form1"; $("id3").submit(function() { とやっても、うまく稼働しませんでした。 （つまり、変数id3の値が $("")の中で展開されていない） そこで、これは $("id3").submit(function() { を起点にして稼働しはじめるのだから、それ以前の変数の値は関係なくなるのかな？ との着想の元、この行の前に $("input").click(function(){ を入れて、これ起点で起動させ、これにつづけて、 id3="#form1"; をかませる事によって、 $("id3").submit(function() { が、うまく稼働しはじめました。 以上、何故変数の値が括弧内で展開されなかったか、ご報告させていただきました。 （もし、この推論が間違っていたらご指摘下さい）