普段お世話になっている Web 系の技術も、Windows のアプリや、iPhone アプリなど Web に関係するけど、直接は触らない様にしていると、いざっ！って時に動きはわかるけど、実現方法がわからなかったりと苦労します。
今回も、そのノリです。
会社で簡単なページを作成したけど、未完だから仕上げてくれと言われました。
内容は、タイトル通り、Form の Submit をしたら、処理はするけどページの遷移が行われるのを抑制してくれといった内容。
まあ、単純に Submit 後に画面遷移させなきゃ良いだろうと、そのままの考えで居たけれど、はて？どうやってやるの？っと。。。
流石に、この手の業界にいるので、簡単にわかりませんとも言えないし、うかつにも言ってしまうと、冷たい目線で見られるのがわかっているので、調べてみました。
ここまで、長かったので結論から言うと、iframe を使えば良いということでした。
こんな感じ
<form action="/postMessage" method="post" enctype="plain" id="sendMessageForm" target="sendMessage">
<div class="form-group">
<label for="name1">お名前</label>
<input type="name" name="name" class="form-control" id="name1" placeholder="Your Name">
</div>
<div class="form-group">
<label for="email1">Emailアドレス</label>
<input type="email" name="email" class="form-control" id="email1" placeholder="Enter email">
</div>
<div class="form-group">
<label>内容</label>
<textarea class="form-control" name="question" rows="3"></textarea>
</div>
<br>
<button type="button" id="sendMessageTrigger" class="btn btn-large btn-success">送信</button>
</form>
<iframe name="sendMessage" style="width:0px;height:0px;border:0px;"></iframe> ← ここが重要
...
<script>
...
var $form = $('#sendMessageForm'),
$trigger = $('#sendMessageTrigger'),
$iframe = $('iframe[name="sendMessage"]');
$trigger.click(function() {
$form.submit();
$form[0].reset(); // フォームをリセット
return false;
});
$form.submit(function() {
$iframe.unbind().bind('load', function() {
// 結果が見たい場合はココで処理
});
});
...
</script>
これで、「Form 送信してかつ画面遷移なし」が実現できました。
ただ、送信後に何もメッセージを出すようにしていないので、とてもそっけない。
本当なら処理結果をもらって判定して、それなりのダイアログを出す様にした方が良いですね。
ここに行き着く前には、subtmit ボタンの onclick に return false を入れたり、form タグの onsubmit に return false を入れたりして、一向に動かないと悩んでいました。
それは当然、これらは submit 自体を取りやめると言う内容でしたから。。。
分かれば、楽なんですけどね。
ちらっと見ての判断ではなかなか思っている内容なのかわかりませんでした。
あと、普段 jQuery に触れていないので、この書き方で良いものか？気になってしょうがない。
Web の畑の耕し方を勉強する必要がありそうです。
GeoHex by sa2da is licensed under a Creative Commons 表示-継承 2.1 日本 License.
