モーダルフォームからログインをして違うページに遷移したいです。バリデーションエラーメッセージを実装したいのでJS側でサブミットした時モーダルフォームが消えないようにpreventDefault()で遷移しないようにしています。fetch()でPHP側に$_POSTを送りユーザとパスワードが一致したらheader()で違うページに遷移したいのですが、一致した場合、chromeのNetworkをみたら302foundがでてました。preventDefault()が原因でheader()がうまく機能してない気がします。どう対処すればページ遷移ができるでしょうか?
ご助力の方宜しくお願いします。
HTML
1コード 2 <button type="button" class="btn btn-light col-lg-12" data-toggle="modal" data-target="#Modal">ログイン</button> 3 <form action="" id="login_form" method="post"> 4 <div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="Modal" aria-hidden="true"> 5 <div class="modal-dialog modal-md" role="document"> 6 <div class="modal-content"> 7 <div class="modal-header"> 8 <h5 class="modal-title col-lg-12 text-center" id="Modal">ログインする</h5> 9 </div> 10 <div class="modal-body"> 11 <?php if ($error['login'] === 'failed') : ?> 12 <span class="col-lg-12 text-center" id="valid">入力されたユーザー名やパスワードが正しくありません。</span> 13 <?php endif; ?> 14 <div class="input_area col-lg-12 text-center"> 15 <input type="text" class="border border-primary" name="user" placeholder="メールアドレスまたはユーザーネーム" maxlength="50"> 16 </div> 17 <div class="input_area col-lg-12 text-center"> 18 <input type="password" class="border border-primary" name="password" placeholder="パスワード"> 19 </div> 20 </div> 21 <div class="modal-footer "> 22 <button type="submit" class="btn btn-primary" id="login">ログインする</button> 23 </div> 24 </div> 25 </div> 26 </form>
js
1コード 2const form = document.getElementById('login_form'); 3 4 form.addEventListener('submit', (e) => { 5 e.preventDefault(); 6 const postData = new FormData(document.forms.login_form); 7 for (let setPost of postData) { 8 postData.set(setPost[0], setPost[1]); 9 console.log(setPost); 10 } 11 12 const data = { 13 method: 'post', 14 body: postData 15 }; 16 17 fetch('top.php', data) 18 .then((res) => { 19 if (res.status !== 200) { 20 throw new Error("system error."); 21 } 22 return res.text(); 23 }).then((text) => { 24 console.log(text); 25 }).catch((e) => { 26 console.log(e.message); 27 }).finally(() => { 28 console.log('done!') 29 // location.reload(); 30 }); 31 });
PHP
1コード 2session_start(); 3 4var_dump($_POST['user']); 5if ($_POST['user'] !== null && $_POST['password'] !== null) { 6 $login = $db->prepare('SELECT * FROM members WHERE user=? AND password=? OR mail=? AND password=?'); 7 $reg_str = '/^[^ ]+@[^ ]+.[a-z]{2,3}$/'; 8 //メールアドレスかユーザ名かでDBに渡す値を分岐する 9 if (preg_match($reg_str, rtrim($_POST['user']))) { 10 $login->execute(array('', sha1($_POST['password']), $_POST['user'], sha1($_POST['password']))); 11 } else { 12 $login->execute(array($_POST['user'], sha1($_POST['password']), '', sha1($_POST['password']))); 13 } 14 $user = $login->fetch(); 15 16 if ($user) { 17 $_SESSION['id'] = $user['id']; 18 $_SESSION['user'] = $user['user']; 19 $_SESSION['time'] = time(); 20 header('location: ../main.php'); 21 exit(); 22 } else { 23 $error['login'] = 'failed'; 24 } 25}
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。