- 締切済み
POST中にローダーを表示
Javascriptにつきまして、ちょっと困っておりまして、どなたか助けていただけないでしょうか。。 <form>のpost中にローダー画像（GIFアニメ）を表示したいと思っています。 そこで、以下のようにしたのですが、GIFアニメが出ません。 これはどのようにしたらよいのでしょうか。 <form method="post" action="index.php"> <input type="text" name="tel" value="" > <input type="submit" name="submit" value="送信" onclick="loader();"> </form> <script type="text/javascript"> function loader() { jQuery('<div />').css ({ position: 'fixed', top: 0, left: 0, width: '100%', height: '100%', backgroundColor: '#fff', opacity: 0.7 }).html('<table style="width:100%;height:100%;"><tr><td style="text-align:center;vertical-align:middle;"><img src="loader.gif"></td></tr></table>').appendTo(jQuery("body")); } </script> 因みに、GIFアニメではなく、テキストでしたら普通に表示されます。 ブラウザはchrome, FF, IE7, IE8で試しましたがどれも一緒でした。 よろしくお願いします。
- gogoyamada
- お礼率92% (98/106)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- JaneDue
- ベストアンサー率75% (263/350)
確認しました。 submit後に、table生成と画像の読み込みをしているのが原因かと。 方法としては、 cssやtable、imgは通常通り記述して display:none としておけばあらかじめ読み込みされます。クリック時には onClick="$('#テーブルのID').show();" だけにすればよいでしょう。 ただし、IEはjqueryやJavaScriptに関係なく、送信の瞬間に通常のimgタグのgifアニメでさえすべて停止してしまいます。また、先の方法ではFirefoxやChromeでもヒストリーで戻った場合には、ローディング中のままになってしまいます。 個人的には、これは送信元で処理するのではなく、送信先のindex.php側で処理すべきかと。 phpをお使いのようですので、重い処理の前にとりあえずloading部分を強制的に出力し、処理が終了次第loadingを隠す逆の方法です。 ざっくりとなら index.phpにて <?php header("Content-type: text/html; charset=utf-8"); ?> <html> <head> <script type="text/javascript" src="jquery.js"></script> <script>$(function(){$('#loading').hide();});</script> </head> <body> <table id="loading" ～ <?php flush(); ?> //バッファ分を強制的にブラウザに送信します 重い処理～
関連するQ&A
- メールフォームについて
この中にどのようなHTMLを書けば自分のPCにメールが届く ようになりますか？よろしくお願いします。 <h2>■MAIL FORM</h2> <div class="text"> <form><table><tr><td width="100" align=right> NAME</td><td align=right><input type="text" name="Name" size="34"></td></tr><tr><td width="100" align=right> MAIL</td><td align=right><input type="text" name="Mail" size="34"></td></tr></table> <TEXTAREA NAME="Comments" ROWS="8" COLS="39" value="comments"></TEXTAREA> <br> <table><tr><td width="100" align=right> </td> </tr><tr> <td width="100" align=right> URL</td><td><input type="text" name="URL" value="http://" size="34"></td></tr><tr><td></td><td align="right"> <INPUT TYPE="reset" VALUE=" Reset "> <INPUT TYPE="submit" VALUE=" Send "></FORM> </td></tr></table><br></div>
- ベストアンサー
- HTML
- テーブルのテーブルの間に間ができるのでしょうか？
はじめまして、超html初心者のものです。 なぜ同じようテーブルを３つ書いているのに一番上のテーブルと真ん中のテーブルの間が開いてしまっているのかがわかりません。 あと、一番上のテーブルの-から先をもう少し左に寄せることもうまくいきません。 なにかアドバイスをよろしくお願いします。 ↓これがソースです。 <html> <head><title>test</title> </head> <form> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">日付け：</th> <td width=284> <input type="text"><input type="button"> </td> <td> - </td> <td><input type="text"><input type="button"></td> </tr> </table> <table border=1 cellspacing=0 cellpadding=2 width=760> <tr> <th width=95 height=30 align="right">部署：</th> <td width=100> <select name="busyo"></select> </td> <th width=80 align="right">営業所：</th> <td width=100> <select name="eigyousyo"></select> </td> <th width= 80 align="right">担当コード:</th> <td width=450> <select name="tantocode"></select> </td> </tr> </table> <table border=1cellspacing=0cellpadding=2width=760> <tr> <th width=80 align="right">権限:</th> <td width=700> <select name="kengen"></select> </td> </tr> </table> </form> </html>
- 締切済み
- HTML
- ボタンクリックでフォーカス移動
JavaScript超ビギナーなので方法がよくわかりません。 フォームにテキストボックス（配列）４個あり ボタンを押すたびに未記入のテキストボックスにカーソルを移動したいのですが。どのようにしたらいいでしょうか。 <form name="form1" method="post"> <table width="200" border="1"> <tr><td ><input type="submit" name="Submit" value="送信"></td></tr> <tr><td ><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> <tr><td><input type="text" name="name1"></td></tr> </table> </form>
- ベストアンサー
- JavaScript
- htmlでインプットボックスを横並びに表示したい。
ホームページを作成しておりますが、tdの中にinput type="text"にてテキストボックスを4つ作成したいと考えております。 こちらで拝見いたしましたチェックボックスの右側に文字を表示される方法をご参考にさせていただき、下記を作成しましたが、縦並びになってしまいます。 何とかして縦2×横2に置き換えることはできないでしょうか？ ブラウザはIE11を使用しており、コードはVisualStudioCodeを使用しております。 <div style="top : 161px;left : 8px; position : absolute; z-index : 4; width : 847px; height : 252px; " id="Layer5"> <div style="background: white; padding: 10px; margin-bottom: 10px; border: 1px solid #333333"> <table border="1" height="252" width="818"> <tr bgcolor="gray" style="color:white" height="50"> <th height="42" width="92"><b>列1</b></th> <th height="42" width="212">列2・列3<br>列4・列5</th> <th height="42" width="137">列7/列8</th> <th height="42" width="189"><b>列9/列10</b></th> </tr> <tr bgcolor="lightyellow"> <td align="center" height="47" width="92"> <input type="text" name=列1 style="background:white; color:#000000;" align="middle" value="83行目"> </td> <td align="center" height="47" width="312"> <input type="text" name=列2 style="background:white; color:#000000;" align="middle" value="86行目"> <input type="text" name=列3 style="background:white; color:#000000;" align="middle" value="87行目"> <input type="text" name=列4 style="background:white; color:#000000;" align="middle" value="88行目"> <input type="text" name=列5 style="background:white; color:#000000;" align="middle" value="89行目"> </td> <td align="center" height="47" width="137"><input type="text" name=列7 style="background:white; color:#000000;" align="middle" value="92行目"> <span> <input type="text" name=列8 style="background:white; color:#000000;" align="middle" value="93行目"> </span> </td> </div> <td align="center" height="47" width="189"><input type="text" name=列9 style="background:white; color:#000000;" align="middle" value="96行目"> <input type="text" name=列0 style="background:white; color:#000000;" align="middle" value="97行目"> </td> </tr> <tr> <td align="center" height="47" width="92"></td> <td align="center" height="47" width="212"></td> <td align="center" height="47" width="137"></td> <td align="center" height="47" width="189"></td> </tr> </table> </div> </div> 【上記で表示させた場合】 ーーーーー｜ 86行目 ｜ーーーーー｜ ーーーーー｜ 87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目 ｜ 92行目｜ 97行目 ーーーーー｜ 89行目 ｜ーーーーー｜ 【やりたいこと】 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜ ーーーーー｜ 86行目｜87行目 ｜ーーーーー｜ 96行目 83行目 ｜ 88行目｜89行目 ｜ 92行目 ｜ 97行目 ーーーーー｜ーーーーーーーーーー｜ーーーーー｜
- ベストアンサー
- JavaScript
- 楽天アフィの検索窓(form)の左右中央化
こんにちは。 ホームページを製作しているものです。楽天ブックスの検索窓を設置しようと考えています。それが下記です。 <form method=get action="http://pt.afl.rakuten.co.jp/c/秘密にさせて下さい/"><input type=hidden name=sv value=6><input type="hidden" name="sid" value="213310"> <input type="hidden" name="su" value="rakutenbooks"> <input type="hidden" name="sn" value="楽天ブックス"> <input type="hidden" name="cord" value="s"><table width=150 border=0 cellspacing=0 cellpadding=1 bgcolor=#107400><tr><td align=center><table cellspacing=0 cellpadding=3 border=0 width=100% bgcolor=#FFFFFF><tr> <td bgcolor=#107400 align=center><b><font size=2 color=#FFFFFF>楽天ブックスで探す</font></b></td> </tr><tr bgcolor=#fffcdd><td nowrap align=center><input type=text size=14 name=sitem value=></td></tr><tr bgcolor=#fffcdd><td align=center><input type=submit value=商品検索 name=submit></td></tr><tr><td nowrap align=center><img src=https://image.books.rakuten.co.jp/books/img/bookimg/_h1529_bookslogo.gif width=145 height=27 border=0 alt=楽天ブックス></td></tr></table></td></tr></table><input type="hidden" name="scid" value="af_ich_link_search"></form> この<form>を<center>タグではなくCSSで左右中央化がどうCSSで指定しても出来ませんでした。 CSSファイルで下記を記述し<form>を挟んでも不可でした。 .cent { margin-left:auto; margin-right:auto; text-align:center; } お分かりの方、どなたかご教示願えないでしょうか？ 何卒よろしくお願い申し上げます。
- ベストアンサー
- CSS
- width="150" に収まるように・・・
ドリームウェーバーでページを触っているんですが、メルマガ登録のソースをいじると送信ボタンが効かなくなります。以下のソース部分をwidth="150"の場所に収まるようにしてフォームを小さくして、別のページに貼り付けたいのですが・・・ <table border="0" cellpadding="5" cellspacing="2" width="53%" bgcolor="#8888cc"> <tr> <td bgcolor="#ddddff"> <table border="0" cellpadding="0" cellspacing="2" width="100%"> <tr> <td colspan="2" valign="top"><span class="m_p"><b>■登録申込み（購読無料）</b></span></td> </tr> <tr> <td width="586" align="right"> <form action="http://e2.wingmailer.com/wingmailer/mr.cgi" method="post"> <input type="hidden" name="uid" value="E048"> <nobr>E-mail：</nobr></td> <td width="130"> <input type="text" name="email" size="24"> </td> </tr> <tr> <td width="586" align="right"><nobr>お名前：</nobr></td> <td width="130"> <input type="text" name="opt1" size="24"> </td> </tr> <tr> <INPUT TYPE="hidden" NAME="opt2" VALUE="エヴィエ"> <td width="586"> <input type="submit" value="購読する"></form> </td> </tr> </table> </td> </tr> </table>
- 締切済み
- HTML
- form要素とtable要素
元はこちらです。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1483846324 <table> <tr><td><input form="form1" type="text" value="text1"></td></tr> <tr><td><input form="form1" type="submit" value="submit1"></td></tr> <tr><td><input form="form2" type="text" value="text2"></td></tr> <tr><td><input form="form2" type="submit" value="submit2"></td></tr> </table> <form id="form1" action="cgi1.cgi" method="POST"></form> <form id="form2" action="cgi2.cgi" method="POST"></form> 上記はHTML5の仕様に従って書いていますが、これを、HTML4.01の仕様に反さないように書くと、どの様にすればいいのでしょうか。 添付画像は、実際のテーブルの様子です。
- ベストアンサー
- HTML
- テーブルを作ったんですが…
はじめまして 画像テーブルを作ったのですが、スクロールバーがでません。 タグを載せておきますので暇でしたら解答してください。 <style TYPE="text/css"> <!--.auto {border:solid;height:450pt;width:500pt;overflow:auto;}--> </style> <TABLE align="left" width="500" cellpadding="0" cellspacing="0" border="0"> <TBODY> <TR> <TD width="420" height="27"><IMG src="01.gif" width="42" height="27" border="0"></TD> <TD background="02.gif"></TD> <TD width="0" height="0"><IMG src="03.gif" width="40" height="27" border="0"></TD> </TR> <TR align="left"> <TD background="04.gif"></TD> <TD width="100%" height="350" bgcolor="white"><pre>テスト<BR> </TD> <TD background="06.gif"></TD> </TR> <TR> <TD width="416" height="25"><IMG src="07.gif" width="42" height="46" border="0"></TD> <TD background="08.gif"></TD> <TD width="0" height="0"><IMG src="09.gif" width="40" height="46" border="0"></TD> </TR> </TBODY> </TABLE>
- ベストアンサー
- その他（インターネット・Webサービス）
- Submitを違うテーブルに設置
submitボタンについての質問です。 原則 <form> <INPUT TYPE="TEXT"> <INPUT TYPE="SUBMIT"> <\form> のような形にしなければいけないと思うのですが。 テーブルを使って、このようにしたいのです. <table><tr><td> <input type="submit"> <!-- このボタンでデータを次に送りたい--> <\td> <td> <H2>Welcome to My HP<\h2> <form> <!--ここにもすでにちがう<form>があります.--> <\form> <form action="aaa.cgi" mothod="post"> <input type="text"><!-- ここの内容を送りたい--> <\form> <\td><\tr> <\table> Javascriptを使えばどうにかできるのではないかと思っているのですが、ぜひやり方を教えてください。宜しくお願いします。
- ベストアンサー
- JavaScript
- メールフォームについて質問です。
メールフォームについて質問です。 <h3>ご注文ご依頼メール</h3> <span style="font-weight: bold;"></span> <center> <form style="margin-left: 0px; width: 800px;" method="post" action="当方アドレス" enctype="text/plain" name="メールフォーム"><br /> <table style="width: 694px; height: 202px;"> <tbody> <tr> <td style="text-align: center;"><b>お名前</b></td> <td style="width: 599px; text-align: left;"><input size="40" name="name" type="text" /></td> </tr> <tr> <td style="text-align: center;"><b>郵便番号</b></td> <td style="text-align: left;"><input size="20" name="郵便番号" /></td> </tr> <tr> <td style="text-align: center;"><b>ご住所</b></td> <td style="width: 599px; text-align: left;"><input size="80" name="jyusho" type="text" /></td> </tr> <tr> <td style="text-align: center;"><b>お電話番号</b></td> <td style="text-align: left;"><input size="40" name="電話番号" type="text" /> <font color="#ff0000">（記入例）000-0000-0000</font></td> </tr> <tr> </tbody> </table> <br /> ご希望の商品名・数量などをお書き込みください。<br /> <table> <tbody> <tr> <td colspan="2" align="center"><b><font color="#ff00ff">ご記入内容に問題がなければ、送信するのボタンをクリックして下さい。</font></b></td> </tr> <tr> <td style="text-align: center;" colspan="2"> <input value="送信する" type="submit" /> <input value="取り消す" type="reset" /></td> というメールフォームを作ったのですが、送信ができません。 どこが間違っているのでしょうか？ 全くの素人なのでどこが違うのか見当もつきません。 それから、送信後に送信確認ページを表示させたいのですが、どうしたらよろしいでしょうか？
- ベストアンサー
- その他（メールサービス・ソフト）
お礼
教えて頂きましてありがとうございました。 そのような方法は思いもよらず、びっくりしました。 早速試してみたいと思います。 御礼遅くなりましてすいませんでした。