ShigeoTejima/test.html

## test.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Test</title>
  <script src="js/jquery-3.1.1.min.js"></script>
</head>
<body>
  <div>
    <h1>Hello, world!</h1>
    <form name="form" action="__action__" method="get" target="iframe" enctype="application/x-www-form-urlencoded">
      <dl>
        <dt>Name</dt>
        <dd><input type="text" name="name"> </dd>
      </dl>
    </form>
    <button type="button" name="submit">Submit</button>
  </div>
  <div>
    <span id="message"></span>
  </div>
  <div>
    <iframe name="iframe"></iframe>
  </div>
  <script>
  $(function() {
    $("button[name=submit]").on("click", function() {
      var $form = $("form[name=form]");
      $form.data("result", "ready");
      $("span#message").text("");
      $form.submit();
      var timeoutId = setTimeout(function() {
        var result = $form.data("result");
        if (result !== "ok") {
          $form.removeData("result");
          alert("Timeout!!!");
        }
      }, 5000);
      $form.data("timeoutId", timeoutId);
    });

    $("iframe[name=iframe]").on("load", function() {
      var $text = $(this).contents().text();
      if (!$text) return;

      var $json = $.parseJSON($text);

      var $form = $("form[name=form]");
      var result = $form.data("result");
      if (result === "ready") {
        $form.data("result", "ok");

        $("span#message").text($json.message);
      }
      var timeoutId = $form.data("timeoutId");
      if (timeoutId) {
        clearTimeout(timeoutId);
        $form.removeData("timeoutId");
      }
    });
  });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Test</title>
	<script src="js/jquery-3.1.1.min.js"></script>
	</head>
	<body>
	<div>
	<h1>Hello, world!</h1>
	<form name="form" action="__action__" method="get" target="iframe" enctype="application/x-www-form-urlencoded">
	<dl>
	<dt>Name</dt>
	<dd><input type="text" name="name"> </dd>
	</dl>
	</form>
	<button type="button" name="submit">Submit</button>
	</div>
	<div>
	<span id="message"></span>
	</div>
	<div>
	<iframe name="iframe"></iframe>
	</div>
	<script>
	$(function() {
	$("button[name=submit]").on("click", function() {
	var $form = $("form[name=form]");
	$form.data("result", "ready");
	$("span#message").text("");
	$form.submit();
	var timeoutId = setTimeout(function() {
	var result = $form.data("result");
	if (result !== "ok") {
	$form.removeData("result");
	alert("Timeout!!!");
	}
	}, 5000);
	$form.data("timeoutId", timeoutId);
	});

	$("iframe[name=iframe]").on("load", function() {
	var $text = $(this).contents().text();
	if (!$text) return;

	var $json = $.parseJSON($text);

	var $form = $("form[name=form]");
	var result = $form.data("result");
	if (result === "ready") {
	$form.data("result", "ok");

	$("span#message").text($json.message);
	}
	var timeoutId = $form.data("timeoutId");
	if (timeoutId) {
	clearTimeout(timeoutId);
	$form.removeData("timeoutId");
	}
	});
	});
	</script>
	</body>
	</html>