2023.11.12 2026.04.05

【JavaScript】ポップアップ（モーダルウィンドウ）を使った入力【PHP】【完全版】JavaScript×PHPでポップアップ確認付きフォームを作る方法｜エラー対策・動かない原因も解説【JavaScript】ポップアップ（モーダルウィンドウ）を使った入力【PHP】

toshi

この記事では、

入力内容をポップアップ（モーダル）で確認してから送信するフォームの作り方を解説します。

さらに以下もカバーしています。

未入力チェック（JavaScript）
データ更新（PHP）
セキュリティ対策（XSS）
よくあるエラー
動かない原因5選

初心者でも「なぜそうするのか」が理解できる構成になっています。

この記事でできること

安全なデータ更新処理

在庫管理フォームの作成

入力ミス防止（確認ポップアップ）

Contents

HTMLフォーム（全体）

HTMLフォーム（全体）

<form action="" method="post" id="myForm">
<table>
<tbody>

<?php foreach($lists as $list): ?>
<tr>

<input type="hidden" name="id[]" value="<?= htmlspecialchars($list['id'], ENT_QUOTES) ?>">

<td>
<?= htmlspecialchars($list['code'], ENT_QUOTES) ?>
<input type="hidden" name="code[]" value="<?= htmlspecialchars($list['code'], ENT_QUOTES) ?>">
</td>

<td>
<?= htmlspecialchars($list['item'], ENT_QUOTES) ?>
<input type="hidden" name="item[]" value="<?= htmlspecialchars($list['item'], ENT_QUOTES) ?>">
</td>

<td>
<input type="number" name="count[]" value="<?= htmlspecialchars($list['count'] ?? '', ENT_QUOTES) ?>">
</td>

</tr>
<?php endforeach; ?>

</tbody>
</table>

<input id="order_btn" type="submit" name="update_stock" value="保存">
</form>

HTMLの重要ポイント解説

① formタグ

<form action="" method="post">

method=”post” → データをURLに表示せず送信（安全）
action空 → 同ページで処理

② hiddenタグ

<input type="hidden" name="id[]">

表示しないデータを送るためのタグです。

用途

ID
商品コード
内部データ

③ 配列送信（超重要）

name=”count[]”

複数データをまとめて送信できるよ。

PHP側では

$_POST['count'][0]
$_POST['count'][1]

④ XSS対策（必須）

htmlspecialchars()

悪意あるスクリプトを無効化するよ。

PHP（サーバー処理）

フォームの商品一覧を表示したり、ポップアップから送られてきた値を受け取る機能です。

if($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['update_stock'])){

    try{

        foreach($_POST['id'] as $key => $id){

            $code = $_POST['code'][$key];
            $item = $_POST['item'][$key];
            $count = is_numeric($_POST['count'][$key]) ? (int)$_POST['count'][$key] : 0;

            $sql = "UPDATE stock_input 
                    SET code = :code, item = :item, count = :count 
                    WHERE id = :id";

            $stmt = $dbh->prepare($sql);

            $stmt->bindValue(':code', $code, PDO::PARAM_STR);
            $stmt->bindValue(':item', $item, PDO::PARAM_STR);
            $stmt->bindValue(':count', $count, PDO::PARAM_INT);
            $stmt->bindValue(':id', $id, PDO::PARAM_INT);

            $stmt->execute();
        }

        header('Location:index.php');
        exit;

    } catch (PDOException $e) {
        error_log($e->getMessage());
        echo "エラーが発生しました";
    }
}

PHPの重要ポイント解説

foreach処理

foreach($_POST['id'] as $key => $id)

配列データを1件ずつ処理してます。

バリデーション

is_numeric()

数値チェック（不正入力防止）だよ。

bindValue

$stmt->bindValue(':count', $count, PDO::PARAM_INT);

SQLインジェクション対策ね。

リダイレクト

header('Location:index.php');

二重送信防止（超重要）だよ。

JavaScript（未入力チェック）

JavaScriptはポップアップの具体的な機能を作っています。

ここで作られた値をPHPのサーバーサイドに送ります。

JavaScriptのコードは次のようになる。

$(function(){
  $('#myForm').submit(function(e){

    let valid = true;

    $('input[name="count[]"]').each(function(){
      if($(this).val() === ''){
        valid = false;
      }
    });

    if(!valid){
      e.preventDefault();
      alert('未入力があります');
    }
  });
});

フォームがすべて空の状態でinputボタンを押すと、アラートが表示され、入力が中断されます。または、フォームの一部や全てが埋まっていないと、アラートが表示され、未入力がありますと表示されます。

❗ よくあるエラー例（重要）

① データが更新されない！？

原因

name属性ミス
POST条件ミス

② Undefined index エラー

原因

$_POST[‘count’]

データが存在してないからでしたー

対策

isset()でポストされた値の存在確認をします。

③ SQLエラー

原因：

bindの型ミス
カラム名違い

④ JavaScriptが動かない

原因：

jQuery未読み込み
IDミス

⑤ 値が空になる

原因：

hiddenタグ未設定

ポップアップ処理

$(function(){

  $('#order_btn').click(function(e){
    e.preventDefault();
    $('#popup').fadeIn();
  });

  $('#popup').click(function(){
    submitForm();
  });

  $('#popup-content').click(function(e){
    e.stopPropagation();
  });

  function submitForm(){

    $('<input>').attr({
      type: 'hidden',
      name: 'update_stock',
      value: '1'
    }).appendTo('#myForm');

    $('#myForm').submit();
  }
});

ポップアップされると、隠れたタグのある、submitForm関数が起動する。

OKボタンが押された場合、関数内のhiddenされたタグが起動し、値を送信する。

キャンセルボタンが押されると、preventDefault関数が起動し、入力内容が初期化される。

#ポップアップ #入力

ABOUT ME