<!DOCTYPE html>
<html>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta charset="utf-8">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.7/js/tether.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/css/bootstrap.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.0/js/bootstrap.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.4/toastr.min.js"></script>
<style>
body {
margin: 20px;
}
</style>
<script>
// ▼ このコードのみでのテスト用変数
var submit_type = "pass1";
//var submit_type = "pass2";
$(function(){
if ( submit_type == "pass1" ) {
$("[name^='fld_'],#ref_btn").prop('disabled', true);
}
if ( submit_type == "pass2" ) {
$("input[name='key_code']").prop('readonly', true);
$("[name^='fld_'],#ref_btn").prop('disabled', false);
}
// **************************************
// 確認処理
// **************************************
$("#base").on( "submit", function(event){
// 更新確認ダイアログの表示の為、本来の送信処理はキャンセル
event.preventDefault();
// 入力したコードよりデータを取得する
if ( submit_type == "pass1" ) {
console.log("key_code");
console.log(key_code);
// Ajax で GET する
$.get({
url: "app-get.php",
cache: false,
data: { "key_code" : $(this).find("input[name='key_code']" ).val() }
})
.done(function( data, textStatus ){
console.log( "status:" + textStatus );
console.log( "data:" + JSON.stringify(data, null, " ") );
if ( data.status == 0 ) {
// *************************************
// コード部分を入力不可に設定
// *************************************
$("input[name='key_code']").prop('readonly', true);
// *************************************
// 明細部分を入力可能に変更
// *************************************
$("[name^='fld_'],#ref_btn").prop('disabled', false);
// 氏名
$("input[name='fld_name']").val( data.row["氏名"] );
// フリガナ
$("input[name='fld_kana']").val( data.row["フリガナ"] );
// 給与
$("input[name='fld_kyuyo']").val( data.row["給与"] );
// 所属
$("input[name='fld_syozoku']").val( data.row["所属"] );
$("#ref_syozoku").text( data.row["所属名"] );
// 性別
$("select[name='fld_seibetu']").val( data.row["性別"] );
// 生年月日
$("input[name='fld_birth']").val( data.row["生年月日"].substring(0,10) );
// フォーカスを設定
$("input[name='fld_name']").focus();
// コードをローカルストレージに保存
localStorage["code"] = parent.$("input[name='key_code']").val();
// エラーが無ければ次の処理を行えるようにする
submit_type = "pass2";
}
// 対象データが無い場合
if ( data.status == 1 ) {
// エラーメッセージを表示
toastr.error("入力された社員コードは存在しません");
// エラー部分にフォーカスをセット
$("input[name='key_code']").focus();
// エラーが発生したフィールド内の文字列を選択する
$("input[name='key_code']").select();
}
if ( data.status == -1 ) {
// エラーメッセージを表示
toastr.error("システムエラーです : SQL にあやまりがあります");
}
})
// 失敗
.fail(function(jqXHR, textStatus, errorThrown ){
console.log( "status:" + textStatus );
console.log( "errorThrown:" + errorThrown );
// エラーメッセージを表示
toastr.error("システムエラーです");
})
// 常に実行
.always(function() {
})
;
}
// Bootstrap の モーダルダイアログの表示
if ( submit_type == "pass2" ) {
$("#update_check").modal();
}
});
// **************************************
// Bootstrap OK ボタン
// ※ ここで第二パスの送信処理を確定
// **************************************
$("#data_update").on("click", function(){
// Ajax で POSTする
// 新規送信用オブジェクト
var formData = new FormData();
// ファイルオブジェクト
formData.append("key_code", $("input[name='key_code']").val() );
formData.append("fld_name", $("input[name='fld_name']").val() );
formData.append("fld_kana", $("input[name='fld_kana']").val() );
formData.append("fld_seibetu", $("select[name='fld_seibetu']").val() );
formData.append("fld_birth", $("input[name='fld_birth']").val() );
formData.append("fld_kyuyo", $("input[name='fld_kyuyo']").val() );
formData.append("fld_syozoku", $("input[name='fld_syozoku']").val() );
// **************************************
// サーバ呼び出し
// **************************************
$.ajax({
url: "app-update.php",
type: "POST",
data: formData,
processData: false, // jQuery がデータを処理しないよう指定
contentType: false // jQuery が contentType を設定しないよう指定
})
.done(function( data, textStatus ){
console.log( "status:" + textStatus );
console.log( "data:" + JSON.stringify(data, null, " ") );
// *************************************
// コードを入力可に設定
// *************************************
$("input[name='key_code']").prop('readonly', false);
// *************************************
// 明細部分を入力不可に変更
// *************************************
$("[name^='fld_'],#ref_btn")
.prop('disabled', true);
// 氏名のクリア
$("input[name='fld_name']").val( "" );
// フリガナのクリア
$("input[name='fld_kana']").val( "" );
// 給与のクリア
$("input[name='fld_kyuyo']").val( "" );
// 所属のクリア
$("input[name='fld_syozoku']").val( "" );
$("#ref_syozoku").text("");
// 性別の初期化
$("select[name='fld_seibetu']").val( "0" );
// 生年月日の初期化
$("input[name='fld_birth']").val( "" );
// フォーカスを設定
$("input[name='key_code']").focus();
// エラーが無ければ次の処理を行えるようにする
submit_type = "pass1";
toastr.info("更新されました");
})
.fail(function(jqXHR, textStatus, errorThrown ){
console.log( "code:" + jqXHR.status );
console.log( "status:" + textStatus );
console.log( "errorThrown:" + errorThrown );
})
.always(function() {
})
;
});
});
</script>
</head>
<body>
<div style='float:right'>
<input
id="action_reset"
type="button"
value="リセット"
class="btn btn-danger mr-3"
onclick="location.href='syain-upd.html'">
<input
id="action_copy"
type="submit"
value="送信"
class="btn btn-primary"
onclick="$('#action').click();">
</div>
<form id="base" method="post" target="_self" style='clear:both'>
<div>
<div class="left">社員コード</div>
<div class="right">
<input
type="text"
id="key_code"
name="key_code"
class="unit"
value="" required >
</div>
</div>
<div>
<div class="left">氏名</div>
<div class="right">
<input
type="text"
id="fld_name"
name="fld_name"
class="unit"
value="" required >
</div>
</div>
<div>
<div class="left">フリガナ</div>
<div class="right">
<input
type="text"
id="fld_kana"
name="fld_kana"
class="unit"
value="" >
</div>
</div>
<div>
<div class="left">給与</div>
<div class="right">
<input
type="text"
id="fld_kyuyo"
name="fld_kyuyo"
class="unit"
value="" required maxlength='7' pattern='\d+' >
</div>
</div>
<div>
<div class="left">所属</div>
<div class="right">
<div class="input-group">
<input
type="text"
id="fld_syozoku"
name="fld_syozoku"
class="unit"
value=""
maxlength="4">
</div>
</div>
</div>
<div>
<div class="left">性別</div>
<div class="right">
<select class="unit" name="fld_seibetu" id="fld_seibetu" >
<option value="0">男性</option>
<option value="1">女性</option>
</select>
</div>
</div>
<div>
<div class="left">生年月日</div>
<div class="right">
<div class="input-group">
<input type="text" id="fld_birth" name="fld_birth">
<button
type="button"
class="btn"
onclick='$(this).prev().val("");'>×</button>
</div>
</div>
</div>
<div>
<input
id="action"
type="submit"
value="送信"
class="btn btn-primary unit mt-5"
title="mt5 は margin-top の略で 1〜5">
</div>
</form>
<div class="modal fade" id="update_check" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">確認</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
更新しますか?
</div>
<div class="modal-footer">
<button id="data_update" type="button" class="btn btn-default" data-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</body>
</html>
デモページ1( INPUT要素 type="file" )
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
