76回目授業内容 jQuery Mobileの続き・Mobile版、お問合せフォーム
[授業][Dreamweaver][PhotoShop][JavaScript][jQuery]
jQuery Mobileの続き
- Mobile版、お問合せフォーム
- 下記のcheckboxのif文で時間を取られました。
チェックphpで入力されていない項目をif文で振り分けたかったのですが、チェックボックスはまだまだわかっていません。勉強が足りませんでした・・・。
次回頑張ります!
- って事で帰ってから「Mobile版、お問合せフォーム」を完成させました。
- index.html
<div data-role="page" id="contact"> <div data-role="header"> <h1>TQS Contact</h1> </div> <div data-role="content"> <h2>jQuery Mobileのフォーム</h2> <form id="Contents" action="php/form.php" method="post"> <div data-role="fieldcontain"> <label for="name">お名前:</label> <input type="text" name="name" id="name" value="" placeholder="お名前を入力"> </div> <div data-role="fieldcontain"> <label for="email">メールアドレス:</label> <input type="email" id="email" name="email" placeholder="メールアドレスを入力"> </div> <div data-role="fieldcontain"> <fieldset data-role="controlgroup" data-type="horizontal"> <legend>お問い合わせ種類を選んで下さい。</legend> <input type="checkbox" name="checkbox[]" id="check1" value="web" data-theme="d"> <label for="check1">Web製作</label> <input type="checkbox" name="checkbox[]" id="check2" value="music" data-theme="d"> <label for="check2">音楽製作</label> <input type="checkbox" name="checkbox[]" id="check3" value="question" data-theme="d"> <label for="check3">ご質問</label> </fieldset> </div> <div data-role="fieldcontain"> <label for="textarea-a">お問い合わせ内容:</label> <textarea name="message" id="message"></textarea> </div> <div data-role="fieldcontain"> <label for="gender">性別:</label> <select name="gender" id="gender" data-role="slider" data-theme="b"> <option value="男性">男性</option> <option value="女性">女性</option> </select> </div> <div data-role="fieldcontain"> <label for="select-choice">オプション:</label> <select name="shipper" id="shipper"> <option>選択してください</option> <option value="プロフェッショナル">プロフェッショナル</option> <option value="スタンダード">スタンダード</option> <option value="エンタープライズ">エンタープライズ</option> </select> </div> <div data-role="fieldcontain"> <label for="slider">満足度:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="5" data-theme="d" data-track-theme="d"> </div> <div class="ui-grid-a"> <div class="ui-block-a"> <input type="reset" id="reset" data-theme="c" value="リセット"> </div> <div class="ui-block-b"> <input type="submit" id="submit" data-theme="b" value="送信"> </div> </div> </form> </div><!--content-->
-
- form.php
<?php $name = $_POST['name']; $email = $_POST['email']; $checkbox = implode(", ", $_POST['checkbox']); $message = $_POST['message']; $gender = $_POST['gender']; $shipper = $_POST['shipper']; $slider = $_POST['slider']; $name = htmlspecialchars($name); $email = htmlspecialchars($email); $checkbox = htmlspecialchars($checkbox); $message = htmlspecialchars($message); $gender = htmlspecialchars($gender); $shipper = htmlspecialchars($shipper); $slider = htmlspecialchars($slider); ?> <!DOCTYPE html> <html> <head> <title>入力確認画面</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script> $(document).bind("mobileinit", function() { $.mobile.page.prototype.options.addBackBtn = true; }); </script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> <div data-role="page" data-add-back-btn="true" data-back-btn-text="戻る"> <div data-role="header" data-position="inline"> <h1>確認画面</h1> </div><!-- /header --> <div data-role="content" id="Contents"> <?php if ($name==''){ print '<th>お名前</th><td>' . 'お名前が入力されていません。</td></tr><br>'; } else { print '<th>お名前:</th><td>' . $name. ' 様。</td></tr><br>'; } if ($email==''){ print '<th>メールアドレス</th><td>メールアドレスが入力されていません。</td></tr><br>'; } else { print '<th>メールアドレス:</th><td>' . $email . '</td></tr><br>' . "\n"; } if ($checkbox==''){ print '<th>種類</th><td>種類が入力されていません。</td></tr><br>'; } else { print '<th>種類:</th><td>' . $checkbox . '</td></tr><br>' . "\n"; } if ($message==''){ print '<th>お問合せ内容</th><td>お問合せ内容が入力されていません。</td></tr>'; } else { print '<th>お問合せ内容:</th><td>' . $message . '</td></tr><br>' . "\n"; } if ($gender==''){ print '<th>性別</th><td>性別が入力されていません。</td></tr>'; } else { print '<th>性別:</th><td>' . $gender . '</td></tr><br>' . "\n"; } if ($shipper==''){ print '<th>オプション</th><td>オプションが入力されていません。</td></tr>'; } else { print '<th>オプション:</th><td>' . $shipper . '</td></tr><br>' . "\n"; } if ($slider==''){ print '<th>満足度</th><td>満足度が入力されていません。</td></tr>'; } else { print '<th>満足度:</th><td>' . $slider . '</td></tr><br>' . "\n"; } ?> <div data-role="fieldcontain"> <?php if ($name=='' || $email=='' || $checkbox=='' || $message=='' || $gender=='' || $shipper=='' || $slider==''){ print '<form>' . "\n"; print '<input type="button" onClick="history.back()" value="戻る">'; print '</form>' . "\n"; } else { print '<form action="thanks.php" method="post">' . "\n"; print '<input type="hidden" name="name" value="' . $name . '">'; print '<input type="hidden" name="email" value="' . $email . '">'; print '<input type="hidden" name="checkbox" value="' . $checkbox . '">'; print '<input type="hidden" name="message" value="' . $message . '">'; print '<input type="hidden" name="gender" value="' . $gender . '">'; print '<input type="hidden" name="shipper" value="' . $shipper . '">'; print '<input type="hidden" name="slider" value="' . $slider . '">'; print '<input type="button" onClick="history.back()" value="戻る">'."\n"; print '<input type="submit" value="送信">' . "\n"; print '</form>' . "\n"; } ?> </div> </div><!-- /content --> <div data-role="footer" class="footer-docs ui-bar" id="footer" data-theme="c"> <div data-role="controlgroup" data-type="horizontal"> <a href="#about" data-role="button" data-icon="back" data-rel="back" data-direction="reverse">Back</a> <a href="#portfolio" data-role="button" data-icon="star">portfolio</a> <a href="#access" data-role="button" data-icon="home">access</a> <a href="#contact" data-role="button" data-icon="check">contact</a> </div><!--controlgroup--> <form method="get" action="/doc/jquery_mobile/" style="float:left;margin-left:5px;"> <input type="search" name="q" value="" data-theme="d" placeholder="ドキュメント検索..." /> </form> <div style="float:right; margin-top:10px; margin-right:10px;"> <a href="http://twitter.com/TokiyoTQS"><img src="http://dev.screw-axis.com/img/twitter.gif" /></a> <a href="http://facebook.com/ttokiyo"><img src="http://dev.screw-axis.com/img/facebook.png" /></a> <a rel="author" href="https://plus.google.com/103040855988995841420/posts"><img src="https://www.google.com/images/icons/ui/gprofile_button-16.png" width="16" height="16"></a> </div> </div><!--footer--> </div><!-- /page --> </body> </html>
-
- thanks.php
<!DOCTYPE html> <html> <head> <title>お問合せありがとうございました</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script> $(document).bind("mobileinit", function() { $.mobile.page.prototype.options.addBackBtn = true; }); </script> <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script> </head> <body> <div data-role="page" data-add-back-btn="true" data-back-btn-text="戻る"> <div data-role="header" data-position="inline"> <h1>ありがとうございました</h1> </div><!-- /header --> <div data-role="content" id="Contents"> <?php $dsn = 'mysql:dbname=_emailxxxxx;host=mysqlxxx.heteml.jp'; $user = 'xxxxxxx'; $password = 'xxxxxxxxx'; $dbh = new PDO($dsn, $user, $password); $dbh -> query('SET NAMES UTF8'); $name = $_POST['name']; $email = $_POST['email']; $checkbox = $_POST['checkbox']; $message = $_POST['message']; $gender = $_POST['gender']; $shipper = $_POST['shipper']; $slider = $_POST['slider']; $name = htmlspecialchars($name); $email = htmlspecialchars($email); $checkbox = htmlspecialchars($checkbox); $message = htmlspecialchars($message); $gender = htmlspecialchars($gender); $shipper = htmlspecialchars($shipper); $slider = htmlspecialchars($slider); print $name . '様<br>' . "\n"; print 'お問合せありがとうございます。<br>' . "\n"; print '種類「'.$checkbox.'」<br>' . "\n"; print 'お問い合わせ内容「'.$message.'」<br>' . "\n"; print '性別「'.$gender.'」<br>' . "\n"; print 'オプション「'.$shipper.'」<br>' . "\n"; print '満足度「'.$slider.'」を<br>' . "\n"; print $email . 'にメールでお送り致しましたのでご確認下さい。' . "\n"; // メール本文の組み立て mb_language("Ja"); mb_internal_encoding("UTF-8"); $mail_head = 'From:tokiyo@tqs.jp'; $subject = "お問い合せを受け付けました。"; $to = "tokiyo@tqs.jp, {$email}"; $title = "【メールフォームより】"; $body = <<<EOM -------------------------------------------------- 【Tokyo Q Studio からのメール】 お問合せありがとうございました。 ・お問合せ内容は お名前:{$name} メールアドレス:{$email} 種類:{$checkbox} メッセージ:{$message} 性別:{$gender} オプション:{$shipper} 満足度:{$slider} です。 -------------------------------------------------- EOM; // メール送信の実行 $rc = mb_send_mail($to, $title, $body, $mail_head); $sql = 'INSERT INTO email_temp(name, email, checkbox, message, gender, shipper, slider) VALUES("'.$name.'","'.$email.'","'.$checkbox.'","'.$message.'","'.$gender.'","'.$shipper.'","'.$slider.'")'; $stmt = $dbh -> prepare($sql); $stmt -> execute(); $dbh = null; ?> </div><!-- /content --> <div data-role="footer" class="footer-docs ui-bar" id="footer" data-theme="c"> <div data-role="controlgroup" data-type="horizontal"> <a href="#about" data-role="button" data-icon="back" data-rel="back" data-direction="reverse">Back</a> <a href="#portfolio" data-role="button" data-icon="star">portfolio</a> <a href="#access" data-role="button" data-icon="home">access</a> <a href="#contact" data-role="button" data-icon="check">contact</a> </div><!--controlgroup--> <form method="get" action="/doc/jquery_mobile/" style="float:left;margin-left:5px;"> <input type="search" name="q" value="" data-theme="d" placeholder="ドキュメント検索..." /> </form> <div style="float:right; margin-top:10px; margin-right:10px;"> <a href="http://twitter.com/TokiyoTQS"><img src="http://dev.screw-axis.com/img/twitter.gif" /></a> <a href="http://facebook.com/ttokiyo"><img src="http://dev.screw-axis.com/img/facebook.png" /></a> <a rel="author" href="https://plus.google.com/103040855988995841420/posts"><img src="https://www.google.com/images/icons/ui/gprofile_button-16.png" width="16" height="16"></a> </div> </div><!--footer--> </div><!-- /page --> </body> </html>
脱線話(復活)
最近は色々と仕事が入ってくるようになりました。
頑張らないといけません!
やるぞ!
[http://tokiyo.hateblo.jp:title=四十路男Tokiyoの人生再スタートblogもやってます。