フォーム送信時に送信日時を取得してメールに表示させる方法

<form id="form">
（省略）
  <button id="buttton">
    <input type="hidden" name="Time" id="Time">
    <span>送信</span>
  </button>
</form>

//外部スクリプトの読み込み
//エラーがなければsubmitボタンにvalidation::okを発生させている

<script>
//サーバーから送信日時を取得
function getTime() {
  var request = new XMLHttpRequest();
  request.open('HEAD', window.location.href, true);
  request.send();
  request.onreadystatechange = function() {
    if (this.readyState === 4) {
      var time = new Date(request.getResponseHeader('Date'));
      document.getElementById("Time").value = time;
      console.log(document.getElementById('Time'));
    }
  }
}

$(function(){
  var $form = $("#form"),
  $submit = $("#button");
  $submit.on('validation::ok', function(event, $form) {
    if($submit.not('error')){
      getTime();
      $form.submit();
    }
  });
});
</script>

フォーム送信日時を取得して、hiddenで渡し、メール本文に記載したいと思っています。
こちらのフォームの送信ボタンを押すと、
コンソールログにはTimeの値（送信日時）が表示されるのですが、
メール本文にはの値が表示されません。

試しに、

function getTime() {
（略）
}

と

$(function(){
（略）
});

の間にgetTime();を記載してみたところメール本文にも日時が表示されるのですが、
これだとブラウザにアクセスした時間になってしまうので、
送信のタイミングで実行させたいのですが。。。

解決のためのアドバイスをいただければ幸いです。

よろしくお願いします。

行動規範の内容に同意します

回答2件

ベストアンサー

getTime()が非同期なメソッドだからですね。

getTime()で時刻設定指示を出す→$form.submit();でフォームデータを送信する→request.onreadystatechangeで時刻を設定する、の順番になっています。

順番通りに動作させるためには、

if($submit.not('error')){
  getTime($form);
}

として呼び出しして、

if (this.readyState === 4) {
	var time = new Date(request.getResponseHeader('Date'));
	document.getElementById("Time").value = time;
	console.log(document.getElementById('Time'));
	$form.submit();
}

とすれば、時刻設定後に$form.submit();が実行されることを保証できますので、おそらくうまくいくでしょう。

ただ、そのまえにjavascriptでnew Date()で生成した時刻じゃダメなんだろうかとか、サーバ側でフォーム処理するときに時刻処理できないんだろうか、とか疑問点はありますが。

投稿2017/08/04 02:26