🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

1回答

2053閲覧

メールフォームでエラーが出て入力画面に戻る時の位置を指定したい

Keichi_Negishi

総合スコア25

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2021/03/12 07:29

編集2021/03/12 07:33

前提

・メールフォームを入力・確認・完了画面でファイルを分けずに、index.php1つで実装しています。
ページフラグが0の場合は入力画面を、1の場合は確認画面を、2の場合は完了画面を表示するようにしています。
$_POST['back']がある場合はページフラグ0の入力画面に戻ります。
・xamppを使用しています。

実現したい事と困っている事

メールフォームでエラーが出て確認画面から入力画面に戻る時の戻る位置を、メールフォームのすぐ上の所に指定したいです。
問題なのは、入力画面のメールフォームがWebページの下の方にあるのに、確認画面から入力画面に戻った際に、
入力画面の一番上が表示されてしまい、面倒という点です。

試した内容や調べた事

(1)if文で$_POST['back']がある時に、urlに#contactのハッシュタグを付け、HTMLのid="contact"の位置まで飛ばそうとした。
しかしやり方が分からなかった。

(2)header('Location:href')を使用し、HTMLのid="contact"の位置まで飛ばそうとしたがページが停止してしまった。

PHP

1 2<?php 3//index.php 4 5session_start(); 6 7require_once('./common.php'); 8 9//メールフォームのバリデーション 10$errors = validation($_POST); 11//入力、確認、完了画面切り替えのためのフラグ 12$pageFlag = 0; 13 14if(!empty($_POST['back'])){ 15 echo $_SERVER['REQUEST_URI']; 16} 17if(!empty($_POST['btn_confirm']) && empty($errors)){ 18 $pageFlag = 1; 19} 20 21if(!empty($_POST['btn_submit'])){ 22 $pageFlag = 2; 23} 24 25?> 26<!------ 中略。上の方にもHTMLがたくさんある。 -------> 27<section class="contact_wrapper"> 28 <?php 29 if(!isset($_SESSION['csrfToken'])){ 30 $csrfToken = bin2hex(random_bytes(32)); 31 $_SESSION['csrfToken'] = $csrfToken; 32 } 33 $token = $_SESSION['csrfToken']; 34 ?> 35 <div id="contact"></div><!--/#contact --> 36 <h2 class="en_hd_block"> 37 <span class="en_hd_font">Contact</span> 38 </h2><!--/.en_hd_block --> 39 <p class="lead"><span class="block"><span class="en">Matterport</span>の導入についてご相談されたい方は、</span> 40 <span class="block">下記メールフォームまたはお電話にてお気軽にご連絡ください。</span></p> 41 <form class="form" action="index.php" method="post"> 42 <?php 43 if(!empty($_POST['btn_confirm']) && !empty($errors)){ 44 echo '<ul class="error_ul">'; 45 foreach($errors as $error){ 46 echo '<li class="error">' . $error . '</li>'; 47 } 48 echo '</ul>'; 49 } 50 ?> 51 <div class="form_block"> 52 <h3 class="form_hd">お名前<span class="required">※必須項目</span></h3> 53 <input type="text" value="<?php if(!empty($_POST['your_name'])){echo $_POST['your_name'];} ?>" 54 name="your_name" placeholder="あああ" maxlength="10"> 55 </div><!--/.form_block --> 56 <div class="form_block"> 57 <h3 class="form_hd">おなまえ(かな)<span class="required">※必須項目</span></h3> 58 <input type="text" value="<?php if(!empty($_POST['kana'])){echo $_POST['kana'];} ?>" 59 name="kana" placeholder="あああ" maxlength="20"> 60 </div><!--/.form_block --> 61 62 <div class="form_block"> 63 <h3 class="form_hd">会社名<span class="required">※必須項目</span></h3> 64 <input type="text" value="<?php if(!empty($_POST['company'])){echo $_POST['company'];} ?>" 65 name="company" placeholder="株式会社ああああ" maxlength="20"> 66 </div><!--/.form_block --> 67 68 <div class="form_block"> 69 <h3 class="form_hd">メールアドレス<span class="required">※必須項目</span></h3> 70 <input type="email" value="<?php if(!empty($_POST['email'])){echo $_POST['email'];} ?>" 71 name="email" placeholder="xxxxx@aaaaaa.co.jp" maxlength="50"> 72 </div><!--/.form_block --> 73 74 <div class="form_block"> 75 <h3 class="form_hd">電話番号<span class="required">※必須項目</span></h3> 76 <input type="tel" value="<?php if(!empty($_POST['tel'])){echo $_POST['tel'];} ?>" 77 name="tel" placeholder="0312345678" maxlength="10"> 78 </div><!--/.form_block --> 79 80 <div class="form_block"> 81 <h3 class="form_hd">ご相談内容<span class="required">※必須項目</span></h3> 82 <textarea name="textarea" placeholder="例)ああああ"><?php if(!empty($_POST['textarea'])){echo $_POST['textarea'];} ?> 83 </textarea> 84 </div><!--/.form_block --> 85 <input class="btn_big" type="submit" name="btn_confirm" value="お問い合わせ内容を確認する"> 86 <input type="hidden" name="csrf" value="<?php echo $token ?>"> 87 </form><!--/.form --> 88 </section><!--/.contact_wrapper --> 89 </main> 90 <?php endif; ?><!--入力画面のendif --> 91 92<!--確認画面 --> 93 <?php if($pageFlag == 1 && empty($errors)) : ?> 94 <section class="contact_wrapper page_flag_1"> 95 <h2>確認画面</h2> 96 <!--/.入力データ表示用のformタグ --> 97 <?php if($_POST['csrf'] == $_SESSION['csrfToken']) : ?> 98 <div class="form"> 99 <div class="form_block"> 100 <h3 class="form_hd">お名前</h3> 101 <p class="form_data"><?php echo h($_POST['your_name']) ?></p> 102 </div><!--/.form_block --> 103 <div class="form_block"> 104 <h3 class="form_hd">おなまえ(かな)</h3> 105 <p class="form_data"><?php echo h($_POST['kana']) ?></p> 106 </div><!--/.form_block --> 107 <div class="form_block"> 108 <h3 class="form_hd">会社名</h3> 109 <p class="form_data"><?php echo h($_POST['company']) ?></p> 110 </div><!--/.form_block --> 111 <div class="form_block"> 112 <h3 class="form_hd">メールアドレス</h3> 113 <p class="form_data"><?php echo h($_POST['email']) ?></p> 114 </div><!--/.form_block --> 115 <div class="form_block"> 116 <h3 class="form_hd">電話番号</h3> 117 <p class="form_data"><?php echo h($_POST['tel']) ?></p> 118 </div><!--/.form_block --> 119 <div class="form_block"> 120 <h3 class="form_hd">ご相談内容</h3> 121 <p class="form_data"><?php echo h($_POST['textarea']) ?></p> 122 </div><!--/.form_block --> 123 124 <!--/.入力データ送信用のformタグ --> 125 <form action="index.php" method="post"> 126 <div class="btn_flex"> 127 <input class="btn" type="submit" name="btn_submit" value="入力内容を送信する"> 128 <input class="back_btn" type="submit" name="back" value="入力内容を修正する"> 129 </div><!--/.btn_flex --> 130 <input type="hidden" name="your_name" value="<?php echo $_POST['your_name'] ?>"> 131 <input type="hidden" name="kana" value="<?php echo $_POST['kana'] ?>"> 132 <input type="hidden" name="company" value="<?php echo $_POST['company'] ?>"> 133 <input type="hidden" name="email" value="<?php echo $_POST['email'] ?>"> 134 <input type="hidden" name="tel" value="<?php echo $_POST['tel'] ?>"> 135 <input type="hidden" name="textarea" value="<?php echo $_POST['textarea'] ?>"> 136 <input type="hidden" name="csrf" value="<?php echo $_POST['csrf'] ?>"> 137 </form> 138 <?php endif; ?><!--csrfのendif --> 139 </div><!--/.form --> 140 </section><!--/.contact_wrapper --> 141 <?php endif; ?><!--確認画面のendif --> 142 143 <!--完了画面 --> 144 <?php if($pageFlag == 2) : ?> 145 <?php 146 147 $_POST['your_name']; 148 149 ?> 150 <section class="contact_wrapper page_flag_2"> 151 <h2>お問い合わせを受け付けました</h2> 152 <p style="text-align: center;">お問い合わせありがとうございます。確認用のメールをお送りしましたのでご確認ください。</p> 153 <div class="btn_flex"> 154 <form action="index.php" method="post"> 155 <input class="btn" type="submit" name="back" value="入力内容を送信する"> 156 </div><!--/.btn_flex --> 157 </section><!--/.contact_wrapper --> 158 <?php endif; ?><!--完了画面のendif --> 159<!------ 中略。------->

PHP

1 2<?php 3//こちらはcommon.php。 4 5header('X-FRAME-OPTIONS:DENY'); 6 7function h($str){ 8 return htmlspecialchars($str, ENT_QUOTES, 'UTF-8'); 9} 10 11if($_POST){ 12 var_dump($_POST); 13} 14 15//バリデーション 16function validation($request){ 17 $errors = []; 18 if(empty($request['your_name'])){ 19 $errrors[] = '※お名前は必須です。'; 20 } 21 if (empty($request['kana']) || !preg_match("/^[あ-ん゛゜ぁ-ぉゃ-ょー「」、]+/", $request['kana'])) { 22 $errors[] = '※おなまえをひらがなで入力してください。'; 23 } 24 if(empty($request['company'])){ 25 $errors[] = '※会社名は必須です。'; 26 } 27 if(empty($request['email']) || !filter_var($request['email'], FILTER_VALIDATE_EMAIL)){ 28 $errors[] = '※メールアドレスは必須です。正しい形式で入力してください。'; 29 } 30 if (empty($request['tel']) || !preg_match("/^[0-9]+$/", $request['tel'])) { 31 $errors[] = '※電話番号は半角の数字で入力してください。'; 32 } 33 if(empty($_POST['textarea']) || 200 < mb_strlen($request['textarea'])){ 34 $errors[] = '※お問い合わせ内容を200文字以内で入力してください。'; 35 } 36 return $errors; 37} 38 39?> 40

ご教示頂けますと幸いです。ご回答よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

バリデーションをAjaxで行い、結果を受け取りバリデーション掛かったときにスクロール位置をJavaScriptで指定するのが良いと思います。

form送信でも「スクロール位置をJavaScriptで指定」は同じですが、バリデーションをビュー側のソースに混在させるとごちゃごちゃになりやすいので、別々にしたほうが良いと思います。

投稿2021/03/12 07:43

m.ts10806

総合スコア80875

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

Keichi_Negishi

2021/03/12 08:11

ご回答ありがとうございます。 実際にやるのは来週になってしまいますが、調べてみます。
m.ts10806

2021/03/12 08:13

可能なら、試してみて解決してから解決済みにしてもらったらと。
Keichi_Negishi

2021/03/12 08:18

そのようにします。 しばらくベストアンサーは保留にしておきます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問