JavaScriptで「送信したら」という条件はつくれますか？

Question

もし、sumitしたら、formの中をクリアにするということがしたいです。

<form id="form" action="send.php" name="form" onsubmit="validate()"　target="_blank">
  <input id="need" type="text" name="name" required>
  <div id="error" style="display: none;">
    <p>お名前を入力してください</p>
  </div>

  <input id="need" type="text" name="kana" required>
  <div id="error" style="display: none;">
    <p>ふりがなを入力してください</p>
  </div>

  <input id="need" type="text" name="old" required>
  <div id="error" style="display: none;">
    <p>年齢を入力してください</p>
  </div>

  <button type="submit">送信する</button>
</form>

<script type="text/javascript">
function validate(){
  const form = document.getElementById("form");
  const need = document.getElementById("need");

if(need.value == null){
  return false;
}else{
  return true;//ここで送信後form.reset();がしたいです。
}
</script>

以下を試してみましたが、うまくいきませんでした。
submitしてしまったら、その後は何もできないのでしょうか？

if(form.submit()){
  form.reset();
}

もしくはphpでエラー判定をしているので、エラーだったときに、もとのページを表示するということはできますか？
readfile()を試しましたがうまくいきませんでした。

Comments

[takasima20]

submit 直前に初期化したら初期化後の値が送られますね。
php 云々の話は全体の造りが分からないとなんとも。
現実的なのは Ajax 的な方法で送信後に初期化するのかな?
ただ、なんで初期化するのか意図がみえません…

[zzziiii]

コメントありがとうございます。
Ajaxですか、、、私にはまだ早そうですが調べてみます。

コンタクトフォームを作っています。
申し込み完了ページを別ウインドウで開く仕様にしたくて。。。
で、もとのページ見た時に値が入力されたままなのが違和感あったので、送信後入力部分がリセットされてたらいいな〜と思いまして。。。

phpは、こんな感じです。。。

$email = $_POST['email'];

$addHeader ="From:".mb_encode_mimeheader($sender)."<".$mailFrom.">\n";
$addHeader .= "Reply-to: ".$replyTo."\n";
$addHeader .= "X-Mailer: PHP/". phpversion();

$addOption = '-f'.$mailFrom;

$content = <<< EOD
ーーーーーー
テスト
ーーーーーー
EOD;

$messageAdmin = <<< EOD
ーーーーーー
通知テスト
ーーーーーー
EOD;

if( empty($email) ){
echo "必須項目がすべて入力されていないため、メールの送信に失敗しました。";
}
else{
//自動返信メール送信設定
mb_send_mail($email,"お申し込みありがとうございます",$content,$addHeader,$addOption);

// 管理者確認用メール送信設定
mb_send_mail($adminEmail,"お申し込みがありました",$messageAdmin,$addHeader,$addOption);
readfile('../api/thanks.html');
}

[takasima20]

そういう話なら、新たに開いたページから元のページの入力を初期化するのが素直な気がします。

[zzziiii]

なるほど、教えてくださってありがとうございます。

Answer 1

フォームの target が iframe だと、その iframe のロードイベントを待つことができますが _blank だとそれは無理ですね。

HTMLの仕様上、submit イベントの直後にフォームコントロールの値が集められるはずなので、submitイベントリスナからさらに setTimeout(..., 0) をやってその中でクリア処理をすれば大丈夫そうです。

もしくはphpでエラー判定をしているので、エラーだったときに、もとのページを表示するということはできますか？

これもしたいとなると上記の方法では無理ですね。PHPで出力するページで、親 window の関数を呼ぶようにして、エラーが無ければクリア、エラーがあればクリアしないという挙動をJavaScriptで実装します。

Comments

[zzziiii]

教えてくださってありがとうございます。☺
setTimeout(..., 0)やってみます！

もしよければ、もう一つ教えていただきたいことがあります。
target = "blank";をせずに、そのままのウインドウで申し込み完了ページを開き、
formに戻ると、PCの場合はform内はリセットされています。
しかし、SPで見た場合は、form内はリセットされていません。

これはなぜでしょうか？またPCのようにSPもリセットすることはできますか？