SUBMIT後に画面上のエラーが発覚した場合、入力内容を維持したい(PHP)
http://www.phppro.jp/school/phpschool/vol6/1
こちらの記事にあるuranai_result.phpを作成して実行してみすると、submitボタン押下前に入力した内容は一体何だったのか、分からないはずです。
このサンプルでは入力項目が一つであり検知されるエラーも単一のため問題にならないと思うのですが、
複数入力項目があって、検知されるエラーがそれ以上に内部に用意されている場合、リクエスト時の入力内容が維持されていることがユーザにとって望ましい気がします。
エラー対象の入力項目だけを再入力すればよいわけで、その他入力項目まで再入力が強いられるのはユーザに易しくないと思いました。
====質問====
Webページの開発が乏しく、初歩的なことをお聞きしてしまいますが、標題の解決策を皆様はどういう方法で対処しているのでしょうか?ASP.NETで以前開発した際、この面ではViewStateという技術を利用していた記憶ですが、内部でhiddenの要素が生成されていたのですね、今回初めて知りました...。
尚、今取り組んでいるWebページですが、テーブルの中に複数行の入力項目がある感じなので、項目数が多いです。(テーブルの行をボタン押下で無限に増やせるようにしています=JQuery)
====PHP====
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>申請画面</title>
<!-- Jquery -->
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/entry.js"></script>
</head>
<body>
<div class="wrapper">
<h1 id="logo"><img src="img/common_header_logo001.gif" width="254" heigth="25" alt=""></h1>
<form method="post" action="">
<div class="ctrl">
<button type="button" class="iabtn">確認</button>
<input type="submit" value="更新" class="exbtn" name="exbtn"><br><br>
<?php include "php_classes/classes.php";
if (isset($_POST["exbtn"])){
$sql1 = "ログインしている当事者の所属コードから、所属長をDBから取得するSQL文";
try {
//DBへ接続 【php_classes/classes.phpに接続先は書いてあります】
$db = new ms0connect();
$conn = $db->dbconnect();
$stmt=$conn->prepare($sql1);
$stmt->bindValue(":branch", $_SESSION["所属コード"], PDO::PARAM_STR);
$stmt->execute();
/************************************************************************************************
* 所属長を導けた場合は、画面上の入力項目を業務テーブルに登録 *
* 当画面の主目的を つらつらとコーディングの予定。 *
* *
* 但し、所属長を導けなかった場合、入力内容を画面上に維持して登録できないことを画面に訴えたい!!*
*************************************************************************************************/
$conn = null;
} catch (PDOException $e) {
error_log("### SQL Serverデータ取得失敗 ⇒".$sql1."###".$e->getMessage(),0);
exit();
}
}
?>
<br><br>
</div>
<div class="appHeader">
<table>
<tr>
<td>コード</td>
<td>品名</td>
</tr>
</table>
</div>
<div class="appLines">
<table>
<tr class="appLineDummy">
<td><input type="text" name="cd" style="width:45px; ime-mode: inactive;"></td>
<td><input type="text" name="amount" style="width:45px;"></td>
<td><button class="rowins" type="button">+</button></td>
<td><button class="rowdel" type="button">-</button></td>
</tr>
</table>
</div>
<div class="appBottom">
<table>
<tr class="appBottom">
<td>伝票備考</td>
<td><input type="text" name="bottomtext" style="width:800px"></td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
====JS====
$(function() {
//この画面ではエンターキーの操作を無効にしました
$("*").keypress(function(e){
if((e.which == 13) || (e.keyCode == 13)){ return false; }
});
//ブラウザの戻るボタン・BSキーを操作しても遷移元ページへ移ることを防ぐ
history.pushState(null, null, null);
window.addEventListener("popstate", function() {
history.pushState(null, null, null);
});
var $dummyRow = $("tr.appLineDummy");
// テーブル行追加
$(document).on("click", ".rowins", function(e) {
var $row = $(e.target).closest("tr");
addRowBelow($row);
});
// テーブル行削除
$(document).on("click", ".rowdel", function(e) {
var row = $(this).closest("tr").remove();
$(row).remove();
downtotalCalc();
});
//### 初回の画面呼び出し時 10行の明細を生成 ###//
$(document).ready(function(){
for(var i = 0; i < 10; i++) {
addRowBelow($dummyRow);
}
});
});