HTML読み込み途中でボタンがクリックされた場合のエラー | システムエンジニアライフ

画面読み込み途中でボタンが押された時の動作

ヘッダー広告
スポンサードリンク

私はWebアプリケーションの保守開発をしているのですが、開発しているWebアプリケーションで、実行ボタンが押された時にリクエストパラメータとして必ず渡されるinput属性の値が入らない事象が発生しました。

今回はその対応で学んだことを書いていこうと思います。

input属性に値が入らない

事象について

今回問題となったのは、以下のような画面でした。

●test.html (画面1)
この画面では、ボタンが2つ存在し、次画面遷移する際にどちらのボタンが押されたのかを、hiddenで渡すという処理を行っています。
今回は省略していますが、実行ボタンからhiddenパラメータ『selData』までの間には数千行の明細データが入っているHTMLの想定です。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>値を渡す画面</title>
</head>
<body>

  <form action="next.php" method="post">
      フォーム内の隠しテキストボックスの値を表示<br><br>

      <input type="submit" name="Decide_1" onclick="RadioChange(1)" value="1を実行"> &nbsp;
      <input type="submit" name="Decide_2" onclick="RadioChange(2)" value="2を実行"><br>
      <br>
      <script>
          alert("処理中断");
      </script>
      表示の確認
      <input type="hidden" id="selData" name="selData" value="">
  </form>

  <script>
  function RadioChange(num){

    document.getElementById('selData').value = num

  }
  </script>

</body>
</html>

●next.php (画面2)
遷移先画面では、test.htmlで選択されたボタンがどのボタンかを表示する処理を行います。

<?php

$selData = $_POST['selData'];

?>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>確認画面</title>
</head>
<body>
<h1>確認画面</h1>

<?php echo $selData."を実行しました。"; ?>


</body>
</html>

以下は事象の再現です。

再現1
●test.htmlを表示。javascriptをブラウザが読み込む前に中断(今回はalertで処理を中断しています。)
※私が体験した事象は、ここで読み込み途中に再現2のようにボタンがクリックされます。


再現2
●処理中断後の確認画面を表示。処理を途中で止めたので、「表示の確認」メッセージは出力していない。
 そのまま『1を実行』をクリックする。


●次画面に遷移しますが、『selData』パラメータが存在しないため、エラーとなってしまう。


このように、最後にjavascriptでパラメータを渡す処理がある場合に、ブラウザがHTML読み込み途中にも関わらず、処理を実行するボタンがクリックされてしまうと、想定外のエラーとなってしまいます。

対応方法1


この事象に対応する方法を、ブラウザ側の対応とサーバ側の対応それぞれ1つずつ紹介します。
まずブラウザ側(html側)の対応方法になります。

  • デフォルトでボタンを表示しないようにする。

  CSSにて『hiddenButton』クラスを作成します。
そしてspanでボタンを囲み初期表示でボタンを表示しないようにするものです。

<style&gt .hiddenButton {visibility:hidden;} </style&gt

  • 読み込み完了時にボタンを表示するようにする。

  jqueryにて『$(document).ready)} 』を使用して、読み込み完了時に『hiddenButton』クラスを削除する。

<script&gt $(document).ready)function() { $(“#DecideButton1”).removeClass(“hiddenButton”); $(“#DecideButton2”).removeClass(“hiddenButton”); }) </script&gt

これによって、画面の描画が終わる前にボタンがクリックされるのを防ぐことができます

以下は画面のhtml全文ソースになります。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>値を渡す画面</title>
<script type='text/javascript' src='external/jquery/jquery.js'></script>
<style>
  .hiddenButton {visibility:hidden;}
</style>
</head>
<body>

  <form action="next.php" method="post">
      フォーム内の隠しテキストボックスの値を表示<br><br>

      <span id="DecideButton1" class="hiddenButton">
        <input type="submit" name="Decide_1" onclick="RadioChange(1)" value="1を実行"> &nbsp;
      </span>
      <span id="DecideButton2" class="hiddenButton">
        <input type="submit" name="Decide_2" onclick="RadioChange(2)" value="2を実行"><br>
      </span>
      <br>
      <script>
          alert("処理中断");
      </script>
      表示の確認
      <input type="hidden" id="selData" name="selData" value="">
  </form>

  <script>
  function RadioChange(num){

    document.getElementById('selData').value = num

  }

  $(document).ready)function() {
	    $("#DecideButton1").removeClass("hiddenButton");
	    $("#DecideButton2").removeClass("hiddenButton");
  })
  </script>

</body>
</html>

対応方法2

こちらはサーバ側の対応方法になります。
サーバ側は、本来渡されるべきpostパラメータに値がない場合に、エラーを返却するようにします。
今回はPHPでのエラーチェックをご紹介します

isset($_POST[‘selData’]))』を使用してパラメータの存在確認を行います。
こちらはpostするパラメータに対しては基本入れるのではないでしょうか?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>確認画面</title>
</head>
<body>
<h1>確認画面</h1>

<?php
if (!isset($_POST['selData'])) {
	echo '選択値が送信されていません';
} elseif ($_POST['selData'] === '') {
	echo '選択値が送信されていません';
}else{
    $selData = $_POST['selData'];
    echo $selData."を実行しました。";
}
?>


</body>
</html>

まとめ

このように対応1と対応2を行うことで、HTMLの読み込み途中でボタンがクリックされた場合に想定外のエラーが発生しないようになります。
基本的には対応2だけで問題ないと考えておりますが、画面に明細行が多く出力されるなどHTMLの行数が多くなる可能性がある場合には、
対応1の読み込み完了までボタンを表示しないという対応も検討する必要があると考えます。

フッター広告

スポンサードリンク



シェアする

  • このエントリーをはてなブックマークに追加

フォローする