環境
MacOSX Sierra
MAMP 4.1.1
GooGle Chrome
質問
teratail
もそうですが、
「質問する」ボタンを押してもページ遷移は起こらず、
リロードしても再度フォームに送信するか聞かれることもなければ二重に送信されることもないサイトがあると思うのですが、あれはどうやって実装してるのでしょうか?
是非私のサイトでも取り入れたいので教えていただけると嬉しいです。
やった事
「submitしても画面遷移がなくリロードしても確認メッセージが出ないあれ」
で検索しました。
一番近かったのが
画面遷移せずに確認ページ表示できるお問合せフォーム_技術三昧ブログ_zanmai.net
でしたが、フォームに入力された値を確認するページへは遷移なしでしたが、確認して送信する時はPOSTで自分自身へ遷移していました。
「post without transition reload」
で検索した限りでは
Submit The Form Without Page Refresh Using Ajax and jQuery On TalkersCode.com
ここがそうなのかなと思いましたが、リロードすると「フォーム再送信の確認」が出てきます。
やりたい事
フォームの送信ボタンを押すとデータが送信され、
その時ページ遷移は伴わず、
リロードしても再送信の確認が出てこないwebページを作りたいです。
困っていること
上記機能を実現するためgoogle検索をし続けてるのですがいいサイトが見つからず困っています。
よろしくお願いします。
引き続きやった事 2017.10.19.8.36
teratail
の様な動きを作りたければteratal
のソースを参考にすればいいと思い、
次のようなソースを書きました。
と作ったソースを載せようとしたのですが、
「通常のコードと違う・・・」というセキュリティーを考慮したメッセージが出てここには載せられませんでした。
要約すると、teratailの質問するボタンを押した画面でソースを参照し、関連していそうなform
を抜き出し、ヘッダで呼んでるcss
をローカルに保存して読み込むようにし、javascript
はpc.js
しか関連しそうなのがなかったのでcss
と同様に保存して呼び出すようにしました。
ファイルは次のように配置しました。
teratail ├── css │ ├── front │ │ └── head.css │ ├── material-icons.css │ ├── plugins │ │ ├── bootstrap-markdown.min.css │ │ ├── highlight │ │ │ └── pc │ │ │ ├── default.css │ │ │ └── highlight.css │ │ └── perfect-scrollbar.min.css │ └── questions │ └── input_new.css ├── input.html └── js ├── jquery-2.1.4.js ├── pc.js └── sizzle.js
sizzle.js
だけ必要そうだけどどう使えば良いのか分からずただ置いてある状態です。
.js
が使えてないのかなと思うのですが、元ソースのヘッダなどを見ても特に.js
ファイルを読み込んでるのも見当たらず、壁にぶつかっています。
お知恵をお貸しくださいませ。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/10/19 01:21
2017/10/19 02:43