[JavaScript]ポップアップを使った入力[PHP]

2023年11月12日

入力ボタンを押すとポップアップが表示されて閉じるボタンを押すと入力が完了します。

全体像

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['maker'];?><input type="hidden" name="maker[]" value="<?php echo $list['maker'];?>"></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>
 
ポップアップ
<div id="popup" style="display:none;">
<div id="popup-content">
<p style="margin-bottom: 20px;">入力が完了しました。</p>
<button id="close-popup">閉じる</button>
</div>
</div>

ポップアップのスタイル
<style>
#popup {
  position: fixed; /* 画面全体に固定 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5); /* 半透明の背景 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000; /* 他の要素より上に表示 */
}

#popup-content {
  background: white;
  padding: 40px; /* ポップアップ内の余白を増やす */
  border-radius: 15px; /* 角の丸みを追加 */
  text-align: center;
  width: auto; /* 幅を自動に設定 */
  max-width: 600px; /* 最大幅を設定 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影を追加して立体感を出す */
  z-index: 1001; /* 必要に応じてz-indexを設定 */
}

#popup-content p {
  /* テキストの大きさを現在の2倍にし、太文字にします。 */
  font-size: 150%; /* 現在のサイズの2倍に設定 */
  
}
</style>

ポップアップのJavaScript
<script>
$(function(){
  $('#order_btn').click(function(event){
    event.preventDefault(); // デフォルトのsubmit動作をキャンセル
    var isAllFilled = true;

    // 'count[]' フィールドの各要素をループ処理
    $('input[name="count[]"]').each(function(){
      if($(this).val() === ''){ // 値が空の場合
        isAllFilled = false;
      }
    });

    if(isAllFilled){
      $('#popup').fadeIn(); // 全て入力されている場合はポップアップを表示
    } else {
      alert('未入力があります。'); // 未入力の場合はアラート表示
    }
  });

  $('#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();
  }
});
</script>

サーバーサイド

//ログインのセッション確認
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'];

//在庫表示
//user_idから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];
    $maker = $_POST['maker'][$key];
    $item = $_POST['item'][$key];
    //直接数値入力
    $count = isset($_POST['count'][$key]) && is_numeric($_POST['count'][$key])?intval($_POST['count'][$key]):0; 
    //$price = $_POST['price'][$key];
    //$subtotal = $_POST['subtotal'][$key];

    $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(':maker',$maker,PDO::PARAM_STR);
    $stmt->bindParam(':item',$item,PDO::PARAM_STR);
    $stmt->bindParam(':count',$count,PDO::PARAM_INT);
    //$stmt->bindParam(':price',$price,PDO::PARAM_INT);
    //$stmt->bindParam(':subtotal',$subtotal,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;
    }
}

説明

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['maker'];?><input type="hidden" name="maker[]" value="<?php echo $list['maker'];?>"></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>

JavaScript

<script>
$(function(){
  $('#order_btn').click(function(event){
    event.preventDefault(); // デフォルトのsubmit動作をキャンセル
    var isAllFilled = true;

    // 'count[]' フィールドの各要素をループ処理
    $('input[name="count[]"]').each(function(){
      if($(this).val() === ''){ // 値が空の場合
        isAllFilled = false;
      }
    });

    if(isAllFilled){
      $('#popup').fadeIn(); // 全て入力されている場合はポップアップを表示
    } else {
      alert('未入力があります。'); // 未入力の場合はアラート表示
    }
  });

  $('#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();
  }
});
</script>

JavaScriptのコードを分解すると次のようになる。

フォームにnullの状態でinputボタンを押すとアラートが表示され入力が中断される

$(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 {
      // ここに他の処理を入れる（必要に応じて）
    }
  });
});

ポップアップが表示されて閉じるで入力する

$(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();
  }
});

サーバーサイド

//ログインのセッション確認
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'];

//在庫表示
//user_idから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];
    $maker = $_POST['maker'][$key];
    $item = $_POST['item'][$key];
    //直接数値入力
    $count = isset($_POST['count'][$key]) && is_numeric($_POST['count'][$key])?intval($_POST['count'][$key]):0; 
    //$price = $_POST['price'][$key];
    //$subtotal = $_POST['subtotal'][$key];

    $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(':maker',$maker,PDO::PARAM_STR);
    $stmt->bindParam(':item',$item,PDO::PARAM_STR);
    $stmt->bindParam(':count',$count,PDO::PARAM_INT);
    //$stmt->bindParam(':price',$price,PDO::PARAM_INT);
    //$stmt->bindParam(':subtotal',$subtotal,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;
    }
}

全体像

説明

カテゴリー