formのsubmitボタンからjQueryのblockUIを呼ぶ方法は？
- jQueryのblockUIをformのsubmitボタンから呼ぶ方法について教えてください。
- formのsubmitボタンを押すことで、パラメータを渡してcgiプログラムを実行し、同時にblockUIを表示したいです。
- 現在はblockUIを使わずにsubmitボタンを押すと検索CGIが動作していますが、blockUIを適用する方法が分かりません。お手数ですが、教えていただけますか？
- ベストアンサー
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の実行や別ページへの遷移のサンプルがなく 困っております。 宜しくお願いします。
- sf1234
- お礼率80% (8/10)
- AJAX
- 回答数2
- ありがとう数9
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
補足、 ajax.start:でブロックしたんじゃ使い道がないですね。 クリック時点でブロックして、ajax成功したらアンブロックしましょう。 ※（全角空白は半角空白に変えてください） <body> <form id="sub_form"> <input name="parm1" value="hoge"> <input name="parm2" value="fuga"> <input id="run" type="button" value="検索開始"> </form> <div id="result"></div> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.4");</script> <script type="text/javascript" src="/jslib/jquery.blockUI.js"></script> <script type="text/javascript"> $(function(){ $('#run').click(function() { $.blockUI({ message: '<h1>お待ちください...</h1>' }); $.ajax({type:"POST",url:"cgi-bin/search.cgi",cache:false, data:$("#sub_form").serialize(), success:function(data){ $.unblockUI(); $("#result").html(data); } }); }); }); </script> </body>
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
誤解されてる部分が、あるかと思います。 ajaxというのはページ遷移をともなわずにcgiへのリクエストを受け取る 機能です。フォームのサブミットはajaxリクエストではありません。 おっしゃてるイメージを無理やりajaxで書けば↓となります。フォームのサブミット はしません。 <form id="sub_form"> <input name="parm1" value="hoge"> <input name="parm2" value="fuga"> <input id="run" type="button" value="検索開始"> ＜＝注意サブミットじゃない </form> <div id="result"></div> <script type="text/javascript"> $(function(){ $('#run').click(function() { $.ajax({type:"POST",url:"cgi-bin/search.cgi",cache:false, // フォームのエレメントをpostパラメーターにシリアライズ data:$("#sub_form").serialize(), start:function(){$.blockUI({ message: '<h1>お待ちください...</h1>' })}, success:function(data){ $.unblockUI(); alert("検索終了しました"); $("#result").html(data); // ＜－例です } }); }); });
お礼
ありがとうございました。 ご回答いただいたとおり、根本的に勘違いしていたようです。 丁寧な回答ありがとうございました。 かきこんでいただいたコードを参考にしてみます。
関連するQ&A
- formのボタンをsubmitしたときにアラート
javascript で、formのボタンをsubmitしたときに アラートが出るようにしたいと思います。 下記のように作ってみましたが、うまく動きません。 どのようにすれば動くでしょうか? ご教示いただきたくお願いいたします。 <script type="text/javascript"> function(){ $('form1').submit(function(){ $.ajax({ type: 'POST', data: postData, url: 'buy.php', success: function(data){alert("購入できました");} error: function(){alert('購入できませんでした。再度お試しください');} }); return false; }); } </script> <form name="form1" id="form1" method="POST" name="form1" value="form1" action="buy.php"> <input type="hidden" name="id" value="100" /> <input type="hidden" name="name" value="高橋" /> <input type="submit" value="Save"> <form/>
- ベストアンサー
- JavaScript
- jQueryにてformの中を書き換えました。
jQueryにてformの中を書き換えました。 具体的には、 $.ajax({ url: "add.php", type: "get", dataType: "html", timeout: 10000, cache: false, data: { "name" : "test", }, success: function(html){ $("#list").html(html); } }); を実行し、結果を #list に置き換えています。 結果は、 <input name='item_name' value='1' id='item_name_1' type='radio'> <label for='item_name_1'>ほげほげ</label> となっています。 しかし、Postをしてみると、item_name が取得することができず NULL として帰ってきます…。。 ajaxで書き換えたformから値を取得したいです。
- ベストアンサー
- AJAX
- 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
- 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 の 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
- <FORM> </FORM> の中に さらに <FORM> </FORM>があるときのSUBMITボタンについて
今、 <FORM ACTION="aaa.asp" METHOD="POST" Name="form1"> <input type="SUBMIT" value="ボタン１"> <FORM ACTION="bbb.asp" METHOD="POST" Name="form2"> <input type="SUBMIT" value="ボタン2"> </FORM> </FORM> としていて、ボタン２を押すとbbb.aspに 飛んでほしいのでに、aaa.aspに飛んでしまいます。 こういう場合どのようにすればよいのでしょうか？ それぞれのボタンは hidden の値をそれぞれの フォームの中の値を渡したいので どうしてもSubmitがいいのです。
- ベストアンサー
- HTML
- javascriptでボタン作成
こんばんわ，htmlでボタンを表示してcgiを動かすコードを書いています． 現在のhtmlのコードです．my_mkdir.cgiはディレクトリを２つ作るcgiです． <form action="/cgi-bin/my_mkdir.cgi" method="get" target"_self"> <input type="hidden" name="$args[0]"> <input type="hidden" name="$args[1]"> <input type="submit" name="button" value="PowerON"> </form> ボタンを押す→cgi実行の流れまではよいのですが，cgiでhtmlのコードがないとブラウザ上でエラーがでます． 対策として，cgiコード（python）でこのようにリロードするようにして回避しています． print "Location: リロードするURL\n\n" これでは不格好なので，ボタンを押す→cgi実行を可能にするにはjavascriptだとできるかもしれないと聞きました． javascriptでこのようなことは可能でしょうか？hiddenで渡しているパラメータはどのようにすればよいのでしょうか？ html・javascript共に初心者です．よろしくおねがいします．
- ベストアンサー
- JavaScript
- ＦＯＲＭタグのテキストの中身に始めから値を入れることはできますか？
<FORM ACTION="./cgi-bin/regist.cgi" METHOD=POST> <INPUT TYPE=TEXT NAME="USR" SIZE=20><BR> <INPUT TYPE=SUBMIT VALUE="xxxx"><BR> </FORM> このUSRのテキストエリアの中身に始めから、文章をいれておきたいのですが、可能でしょうか？ もし可能であれば、ソースの提供をどなたか宜しくお願い致します。
- ベストアンサー
- HTML
- 1つのformで複数のactionをボタン１つで
質問です。 １つのformで複数のactionを１つの送信ボタンで実行したいと思っています。 やりたいことは、１つのframeから他の2つのframeにデータを渡すことです。 フレームは以下のように3つに分かれています。 <frameset cols="60%, 40%"> <frame name="test1" src="xxxx.php"> <frameset rows="50%, 50%"> <frame name="test2" src="yyyy.php"> <frame name="test3" src="zzzz.php"> </frameset> </frameset> xxxx.php内のデータをyyyy.php, zzzzphpの２つに渡したいです。 <script language="javascript"> function send(){ document.form1.target = "test2"; document.form1.action = "yyyy.php"; document.form1.submit(); document.form1.target = "test3"; document.form1.action = "zzzz.php"; document.form1.submit(); } </script> <form name ="form1" method="POST" action="yyyy.php"> <input type="hidden" name="string" value="string" > <input type="button" value="送信" onClick="send()"> </form> 現在、上記のように試したり、過去の質問【一つのformから複数のactionを実行】url：http://okwave.jp/qa/q4234502.htmlを参考にしていますがうまくいきません。 わかる方アドバイスお願い致します。
- ベストアンサー
- JavaScript
- <form>タグに２つのボタン
<form>タグで２つのボタンを表示させ、以下のようにそれぞれのボタンで フィールドに別の値を入れて送信させることはできますでしょうか？ できればHTMLで、できなければJavaScriptでできますでしょうか？ ・button1を押したときは フィールド「CASE」に1を入れて送信、 HTMLで書くと、<input type="hideen" name="CASE" value="1"> ・button2を押したときは フィールド「CASE」に2を入れて送信、 HTMLで書くと、<input type="hideen" name="CASE" value="2"> ===== HTML ====================== <form action="test.cgi" method="post"> <input type="text" name="text1"> <input type="submit" value="button1"> <input type="submit" value="button2"> </form> 宜しくお願いします。
- ベストアンサー
- HTML
お礼
ご丁寧に回答いただいていたにもかかわらず。 気づいておらずにお礼書きもれ、大変失礼いたしました。 本当に申し訳ございませんでした。 教えていただいたように今後試してみます。