お問い合わせフォームに入力された情報をjQuery-UIダイアログ内に表示、確認させる。
<form action="post.php" method="post" id="form" name="form">
名前を入力してください<br>
<input type="text" name="namae" id="namae" value="" onkeypress="return handleEnter(this, event)"><br>
メールアドレスを入力して下さい<br>
<input type="text" name="email" id="email" value="" onkeypress="return handleEnter(this, event)"><br>
メッセージを入れてください<br>
<textarea name="comment" rows="5" cols="30"></textarea><br>
<input type="submit" value="ここを押すと送信されます">
</form>
こんなフォームがあったときに、jQuery-UIのダイアログ内に記入された内容を表示して、送信してもいいかどうかを確認したいです…と。
まずは、フォームの下（でもどこでもいいので）以下のHTMLを追加。
<!--▼ ui-dialog ▼-->
<div id="dialog" title="送信内容の確認">
<p class="item">お名前</p>
<span id="namae"></span>
<p class="item">メールアドレス</p>
<span id="email"></span>
<p class="item">お問い合わせ内容</p>
<span id="comment"></span>
</div>
<!--▲ ui-dialog ▲-->
<style>
/*ダイアログ内のフォントまわり*/
#dialog p,span{ font-size:12px; }
#dialog span{ font-weight:bold; }
</style>
そしたら、後はjQuery-UIの読み込みです。
<link type="text/css" href="ui/css/ui-lightness/jquery-ui-1.8.17.custom.css" rel="stylesheet" />
<script type="text/javascript" src="ui/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="ui/js/jquery-ui-1.8.17.custom.min.js"></script>
んでもって設定を書く…と。
<script type="text/javascript">
//エンターキー押下時に次のフィールドへ
function handleEnter (field, event) {
var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if (keyCode == 13) {
var i;
for (i = 0; i < field.form.elements.length; i++)
if (field == field.form.elements[i])
break;
i = (i + 1) % field.form.elements.length;
field.form.elements[i].focus();
return false;
}
else
return true;
}
$(function(){
// jQuery UI ダイアログの設定
$('#dialog').dialog({
autoOpen: false,
width: 400,
modal: true,
resizable: true,
buttons: {
"送信する": function() {
//送信を実行
document.form.submit();
},
"キャンセル": function() {
//ダイアログを閉じる
$(this).dialog("close");
}
}
});
//送信ボタンが押されたときに呼び出される
$('form').submit(function(e){
e.preventDefault();
var noneStr = '未入力';
//各項目を取得してダイアログ内に追加
//ホントは$("input")→$(this)で同じことを書かないようにしなきゃだけど
//今回は見逃してください…orz
if ( $("input#namae").val() != "" ){
$("span#namae").html( $("input#namae").val() );
}
else{
$("span#namae").html(noneStr);
}
if ( $("input#email").val() != "" ){
$("span#email").html( $("input#email").val() );
}
else{
$("span#email").html(noneStr);
}
if ( $("textarea").val() != "" ){
$("span#comment").html( $("textarea").val() );
}
else{
$("span#comment").html(noneStr);
}
//ダイアログを開く
$('#dialog').dialog('open');
});
});
</script>
ここまでは授業でさらっとやりましたね（笑）。
文字が入力されていたら、このようにダイアログ内に表示されます。
文字が入力されていなかったらこんなふうに「 noneStr = '未入力'」で設定した文字がかわりに表示される…と。
問題は<form>の「action=""」で呼び出されるPHPの方です。
この当たりの記事にも書いてあるようなメールアドレスのバリデートを行なったり…と、やることは結構ありますが、今回は簡易処理を。
簡易処理…ということで、全部ソースのっけちゃいます。
<?php
//名前の入力があったら「$_POST['namae']」を、無かったら'未入力'を
$name = (empty($_POST['namae'])) ? '未入力' : $_POST['namae'];
//メアドの入力があったら「$_POST['email']」を、無かったら'未入力'を
$email = (empty($_POST['email'])) ? '未入力' : $_POST['email'];
//コメントの入力があったら「$_POST['comment']」を、無かったら'未入力'を
$comment = (empty($_POST['comment'])) ? '未入力' : $_POST['comment'];
//件名をセット。わかりやすく変えてね
$subject = "件名";
//メールを受け取るアドレス（送信したいアドレス）を入れてね
$to="example@gmail.com";
//メール送信に失敗したら戻るURL
$turn_url = "index.html";
//メール送信に成功したら、メール送信完了ページへ
$success_url = "success.html";
//メッセージ内容成型
$message = "お名前: $name \n";
$message .= "E-mail: $email \n";
$message .= "お問い合わせ内容: $comment \n";
//送信に成功したら、送信完了ページへ
if( mail( $to,$subject,$message,"From: $email") ) {
header("Location: $success_url");
}
//送信できなかったら、元のページに戻す…と。
else {
header("Location: $turn_url");
}
?>
まずはempty()でPOSTされてきた変数の中にデータが入っているかどうかを判別します。
もし、中身が入っていなかったら、'未入力'という文字列を入れることにします。
件名や成功時に移動するページ、あるいは失敗時に戻るページ（つまりフォームを置いてあるページ）…それからメールアドレスは直接自分で指定してください。
あとは、mail()関数でメールを送信。
成功したら「header("Location: $success_url");」で送信完了ページへリンク。
失敗したらフォーム入力ページへ戻します。
一応、ここにZipで固めて置いておきます。
今日は最終日。
正真正銘最後の授業…ということになるのでしょうか。
最後は、色々とあって（精神的に参ってしまった）という終わり方となってしまって、大変申し訳なく思っています。
会社の方からもあれやこれや「脅しかな？」とも受け取れるようなメールが来たりと大変でしたが、Twitter、FaceBookでメッセージをくれた生徒さんに助けられてしまいました。
気持ちは分かるけど、そういうしようもないところに力を注いでもあんま意味ないんじゃないすか？
それで楽しいんなら別だけど。。。(^^;
それよりもキャバ、美容室、ラーメンの方にリキ入れて楽しい
思いをしましょうヨ。
Uさんの事、考えて「ううむ」よりキャバクラに行って
「うひひ」の方がいいですヨ。。。((爆))
いやぁ…全くその通りですよね。
キャバクラがどうかはさておき。
いちいち相手しててもしょうがないので、力入れてスマホ用Webアプリ…それから電子書籍を作ってます。
やっぱりコードを書いてる時が一番楽しいですね。
とりあえず、４月までには「沖縄ラーメン100 with ラーコミュ」を電子書籍化！…を目標に頑張ってみます。
おっと…「100シリーズ」パクってまたひと悶着ありそうな悪寒？（笑）
あ、そだ。
Twitterで僕を探してフォローしてやってください。
金髪時代の僕が拝めるらしいです。
できたら、このブログにもコメント下さい。
ちゃんと見てますので。
こんなこと出来ませんか？系のコメントもよろしくお願いします。
ブログのネタになるのであれば、頑張らせていただきます。
そんなこんなで2月ももう終わり。
3月1日から、新しい職場でのお仕事が待っています。
今度の職場はメディア系です。
具体的には観光ガイドブックの編集部なんですが、僕が担当するのはDTPではなくネットの方。
最近は紙媒体もそれだけでは食っていけなくて、クロスメディア戦略でもって収益の向上を図らなければならない…ということで。
既にPC＆スマホのポータルサイト制作が２件決まっているので、のんびり…という訳にはいかなさそう。
求人メディアも絡んでるみたいなので、お仕事検索アプリなんかも作ってみたいし、そもそもDTPの会社なので、過去のリソースを電子化して出版…というところも提案してみたら、あっさりオーケー。
なにこのレスポンスの良さ！
もちろん、ECサイトの案件も結構あります。
お店単独ではなく、地域ぐるみでモールのようなことをやりたい…という案件もあったりして、なんだか楽しそうな感じです。