実現したいことは以下です。
- ユーザーがメールフォームに入力し内容確認ボタン押す
- ページ全体は遷移せずに、フォーム枠部分のみが内容確認の表示に置きかわる
- →内容確認し送信ボタンを押すと、同じく「送信しました」の表示に置きかわる(前のページに戻るを押すと、同じくフォーム枠だけが戻る)
上記を動作させるためBarba.jsを組み込んだのですが、うまく機能しません。
フォームの表示自体は、ご覧のようにphpで切り替わるようにしたのですが、
ボタンを押すとページがリロードされトップ位置に戻ってしまいます。
長いシングルページのため、
最下部のフォーム位置までまたスクロールしないと確認できない状態です。
ajax初心者なのですが、記載場所や記法などに誤りがあるでしょうか。
ネット情報を探し回りましたが、お手上げ状態です..。
ご存知の方、ご教示頂けないでしょうか。
また、ほかにわかりやすい方法があれば代替策でもいいので、
どうかよろしくお願いします。
php
1<!-- 上記略 --> 2 <section class="contact_form py-5"> 3 4 <?php 5 // 変数の初期化 6 $page_flag = 0; 7 if( !empty($_POST['confirm']) ) { 8 $page_flag = 1; 9 } elseif( !empty($_POST['submit']) ) { 10 $page_flag = 2; 11 } 12 ?> 13 14 <div id="barba-wrapper"> 15 <div class="barba-container"> 16 17 <?php if( $page_flag === 1 ): ?> 18 19 <?php require('confirm.php'); ?> 20 21 <?php elseif( $page_flag === 2 ): ?> 22 23 <?php require('done.php'); ?> 24 25 <?php else: ?> 26 27 <div class="container"> 28 <h1 class="bolder pb-3">以下のフォームにご記入いただき、<span class="inlineblock">「送信ボタン」をクリックしてください。</h1> 29 <p class="small text-dimgray text-center">※必要な場合をのぞいて、こちらから何度もメール<span class="inlineblock">することはございませんので、ご安心ください。<span class="inlineblock"></span></p> 30 </div> 31 <div class="contact_form_wrapper px-3"> 32 <form action="" method="post"> 33 <p class="form_flex"> 34 <label class="formtitle" for="name">お名前<span class="required">【必須】</span></label><input type="text" id="name" name="name" placeholder="山田太郎" required/> 35 </p> 36 <div class="jobs"> 37 <p class="formtitle"> 38 <span>ご職業 <span class="required">【必須】</span></span> 39 </p> 40 <div> 41 <!-- 中略 --> 42 </div> 43 </div> 44 <p class="form_flex"> 45 <label class="formtitle" for="mail">メールアドレス<span class="required">【必須】</span></label><input id="mail" type="email" name="mail" placeholder="example@mail.jp" required/> 46 </p> 47 <p class="form_flex textarea"> 48 <label class="formtitle" for="comment">その他</label><textarea id="comment" type="textarea" name="message" placeholder="疑問点などがございましたらご記入ください"></textarea> 49 </p> 50 <div class="btn_wrapper"> 51 <p class="submit"> 52 <input type="submit" name="confirm" value="入力内容を確認する" /> 53 </p> 54 <p class="reset"> 55 <input type="reset" value="リセット" /> 56 </p> 57 </div> 58 </form> 59 </div> 60 61 <?php endif; ?> 62 63 </div> 64 </div> 65 </section> 66 67 68 </main> 69 <footer> 70 </footer> 71 72 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 73 <script src="js/jquery.pjax.js"></script> 74 <script src="https://unpkg.com/@barba/core@next"></script> 75 <script src="https://www.promisejs.org/polyfills/promise-6.1.0.min.js"></script> 76 77 78 <script> 79 $(function() { 80 Barba.Pjax.start(); 81 }); 82 </script> 83 84<!-- 以下略 -->
php
1<!-- confirm.php --> 2 3<div id="barba-wrapper"> 4 <div class="barba-container"> 5 6 <div class="container"> 7 <h1 class="bolder pb-3">以下の内容でよろしければ、下の<span class="inlineblock">「送信する」をクリックしてください。</span></h1> 8 </div> 9 <div class="contact_form_wrapper px-3"> 10 <form class="confirm_form" action="" method="post"> 11 <div class="form_flex"> 12 <p class="formtitle">お名前</p><p class="confirm_item"><?php echo $_POST['name']; ?></p> 13 </div> 14 <div class="form_flex"> 15 <p class="formtitle">ご職業</p><p class="confirm_item"><?php echo $_POST['job']; ?></p> 16 </div> 17 <div class="form_flex"> 18 <p class="formtitle">メールアドレス</p><p class="confirm_item"><?php echo $_POST['mail']; ?></p> 19 </div> 20 <div class="form_flex"> 21 <p class="formtitle">その他</p><p class="confirm_item"><?php echo $_POST['message']; ?></p> 22 </div> 23 24 <div class="btn_wrapper"> 25 <p class="submit"> 26 <input type="submit" name="submit" value="送信する" /> 27 </p> 28 <p class="reset"> 29 <input type="submit" name="goback" value="もどる" /> 30 </p> 31 </div> 32 33 <input type="hidden" name="name" value="<?php echo $_POST['name']; ?>"> 34 <input type="hidden" name="job" value="<?php echo $_POST['job']; ?>"> 35 <input type="hidden" name="mail" value="<?php echo $_POST['mail']; ?>"> 36 <input type="hidden" name="message" value="<?php echo $_POST['message']; ?>"> 37 </form> 38 </div> 39 40 </div> 41</div>
回答1件
あなたの回答
tips
プレビュー