入力ボタンを押すとポップアップが表示されて閉じるボタンを押すと入力が完了します。
説明
HTMLフォーム
登録された商品リストが表示されます。
<form action="" method="post" id="myForm">
<?php foreach($lists as $list): ?>
<tr>
<input type="hidden" name="id[]" value="<?php echo $list['id']; ?>">
<td><?php echo $list['code']; ?><input type="hidden" name="code[]" value="<?php echo $list['code']; ?>"></td>
<td><?php echo $list['item'];?><input type="hidden" name="item[]"value="<?php echo $list['item'];?>"></td>
<td><input type="text" name="count[]" value="<?php echo $list["count"] ? $list["count"] : null; ?>"></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
<input id="order_btn" type="submit" name="update_stock" value="保存">
</form>
サーバーサイド
フォームの商品一覧を表示したり、ポップアップから送られてきた値を受け取る機能です。
//ログインのセッション確認
if(!isset($_SESSION['id'])){
header('Location:login/index.php');
exit;
}
//ショップを絞る
$id = $_SESSION['id'];
$i_sql = "SELECT shop_id FROM users WHERE id = :id";
$i_stmt = $dbh->prepare($i_sql);
$i_stmt->bindParam(':id',$id,PDO::PARAM_INT);
$i_stmt->execute();
$id_lists = $i_stmt->fetch(PDO::FETCH_ASSOC);
$shop_id = $id_lists['shop_id'];
//在庫表示
$s_sql = "SELECT si.* FROM stock_input AS si WHERE shop_id = :shop_id";
$stmt = $dbh->prepare($s_sql);
$stmt->bindParam(':shop_id',$shop_id,PDO::PARAM_INT);
$stmt->execute();
$lists = $stmt->fetchAll(PDO::FETCH_ASSOC);
//ブラウザバッグのエラー対策
if($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['update_stock']) && is_array($_POST['id'])){
try{
foreach($_POST['id'] as $key => $value){
$id = $value;
$code = $_POST['code'][$key];
$item = $_POST['item'][$key];
//直接数値入力
$count = isset($_POST['count'][$key]) && is_numeric($_POST['count'][$key])?intval($_POST['count'][$key]):0;
$u_sql = "UPDATE stock_input
SET `code` = :code, `maker` = :maker, `item` = :item, `count` = :count
WHERE `id` = :id";
$stmt = $dbh->prepare($u_sql);
$stmt->bindParam(':code',$code,PDO::PARAM_INT);
$stmt->bindParam(':item',$item,PDO::PARAM_STR);
$stmt->bindParam(':count',$count,PDO::PARAM_INT);
$stmt->bindParam(':id',$id,PDO::PARAM_INT);
$stmt->execute();
}
//二重登録防止
header('Location:index.php');
exit;
} catch (PDOException $e) {
error_log("データベースエラー: " . $e->getMessage());
// エラー応答を返す
echo json_encode(['status' => 'error', 'message' => 'データベースエラーが発生しました。']);
exit;
}
}
JavaScript
JavaScriptはポップアップの具体的な機能を作っています。
ここで作られた値をPHPのサーバーサイドに送ります。
JavaScriptのコードは次のようになる。
$(function(){
$('#myForm').submit(function(event){
var isAllFilled = true;
// 'count[]' フィールドの各要素をループ処理
$('input[name="count[]"]').each(function(){
if($(this).val() === ''){ // 値が空の場合
isAllFilled = false;
}
});
if(!isAllFilled){
event.preventDefault(); // フォーム送信をキャンセル
alert('未入力があります。'); // アラート表示
} else {
// ここに他の処理を入れる(必要に応じて)
}
});
});
フォームがすべて空の状態でinputボタンを押すと、アラートが表示され、入力が中断されます。
または、フォームの一部や全てが埋まっていないと、アラートが表示され、未入力がありますと表示されます。
$(function(){
$('#order_btn').click(function(event){
event.preventDefault(); // デフォルトのsubmit動作をキャンセル
$('#popup').fadeIn();
});
$('#close-popup').click(function(){
submitForm();
});
$('#popup').click(function(){
submitForm();
});
$('#popup-content').click(function(event){
event.stopPropagation(); // ポップアップの内容部分のクリックイベントが外側へ伝播しないようにする
});
function submitForm(){
$('<input>').attr({
method: 'POST',
type: 'hidden',
name: 'update_stock',
value: '入力確認' // 送信したい値を設定
}).appendTo('#myForm');
$('#myForm').submit(); // フォームを手動で送信
$('#popup').fadeOut();
}
});
ポップアップされると、隠れたタグのある、submitForm関数が起動する。
OKボタンが押された場合、関数内のhiddenされたタグが起動し、値を送信する。
キャンセルボタンが押されると、preventDefault関数が起動し、入力内容が初期化される。