動的なデータ転送：テーブルロウデータをブートストラップモーダルボックスフォームに入力する

この記事の目的は、HTMLテーブルの特定の行（電子メールアドレスなど）の特定の行（モーダルボックスフォームのブートストラップに動的にデータを渡す問題を解決することを目的としています。 BootstrapのData-BS-AnyverプロパティとJavaScriptのshow.bs.modalイベントを活用することにより、モーダルボックスフォームがテーブルのボタンをクリックするたびに対応する行の動的なデータを正確に埋めることができ、それにより効率的なユーザーの相互作用とデータ転送を実現できるようにします。

1。問題の背景と分析

Web開発では、データリストからアイテムを選択し、モーダルボックス（MODAL）でアイテムを編集または操作する必要があることがよくあります。一般的な問題は、モーダルボックスのフォームフィールドが、常に最初の行のデータを表示するのではなく、クリックされた行のデータで適切に満たされていることを確認する方法です。

元のコードでは、data-bs-hatever = ""がトリガーボタンで使用されて電子メールアドレスを配信しますが、モーダルボックス内のフォームフィールドには、対応するJavaScriptロジックがありません。さらに、提供されたモーダルボックスHTMLはPHPループの外側で定義されていますが、モーダルボックスが誤って定義されている場合、またはその内部フィールドがJavaScriptによって正しく更新されない場合、データ配信は失敗します。

2。ソリューションの概要

この問題を解決するコアは次のとおりです。

1. モーダルボックスの均一性：モーダルボックスのHTML構造が、データループで繰り返しではなく、ページで一度だけ定義されていることを確認してください。
2. データ配信メカニズム： Bootstrap 5で提供されるデータ-BS-BS-Andiftionを使用して、トリガーボタンに渡されるデータを保存します。
3. JavaScriptイベントリスニング： Bootstrap Modal Boxのshow.bs.modalイベントを聴きます。モーダルボックスを表示しようとしている場合、このイベントは、モーダルボックスをトリガーするDOM要素（つまり、クリックされているボタン）を指す関連ターゲットプロパティを提供します。
4. ダイナミックフィル：関連ターゲットを介してボタンに格納されているデータ-BS-BS-hapsの値を取得し、モーダルボックス内の対応するフォームフィールドに入力します。

3。実装の手順とコードの例

動的なデータ配信を有効にするために既存のコードを変更する方法を段階的に示します。

3.1テーブルとモーダルボックスのトリガーボタンを最適化します

まず、テーブル内のボタンがData-BS-Apseverプロパティを正しく設定し、モーダルボックスのHTML構造がPHPループの外側に定義されていることを確認してください。

 
  
    <tr>
      <th scope="col">＃</th>
      <th scope="col"> name </th>
      <th scope="col">電子メール</th>
      <th scope="col">件名</th>
      <th scope="col">メッセージ</th>
      <th scope="col"> time </th>
      <th scope="col">アクション</th>
    </tr>
  
  <tbody>
    
      <tr>
        <td>  </td>
        <td>  </td>
        <td>  </td>
        <td>  </td>
        <td>  </td>
        <td>  </td>
        <td>
          
          <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="＃replymodal" data-bs-bs-bs-htmlspecialchars data> ">
            返事
          </button>
        </td>
      </tr>
    
  </tbody>

知らせ：

• ID = "ExamPleModal"にid = "ReplyModal"に名前を変更して、セマンティックの明確さを改善しました。
• XSS攻撃を防ぐために、htmlspecialchars（）を追加します。
• フォームタグは、全体をラップする必要はありません。その行のデータに関連する操作のみを含める必要があります（コミットが必要な場合）。ここでモーダルボックスをトリガーするボタンは、形式である必要はありません。

  3.2モーダルボックスHTML構造

  モーダルボックスのHTMLがPHPループの外側に定義されており、受信者のメールアドレスを表示または入力するためのフィールドが含まれていることを確認してください。ここでは、指示対象のメール入力ボックスを追加します。

   
  <div class="modal fade" id="ReplyModal" tabindex="-1" aria-labelledby="ReplyModallabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="ReplyModallabel">電子メールへの返信</h5>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"> </button>
        </div>
        <div class="modal-body">
          <form method="post" role="form" enctype="multipart/form-data" action="">
            <div class="row">
              
              <div class="col-md-12 mb-3">
                <label for="reciontient-email" class="col-form-label">受信者：</label>
                
                
              </div>
  
              <div class="col-md-6 mb-3">
                <label for="email-subject" class="col-form-label">電子メール件名：</label>
                <input type="text" class="form-control" name="件名" id="email-subject">
              </div>
  
              <div class="mb-3">
                <label for="message-text" class="col-form-label">メッセージコンテンツ：</label>
                <textarea class="form-control" rows="8" name="message" id="message-text"> </textarea>
              </div>
  
              <div class="col-md-6 mb-3">
                <label for="attachment" class="col-form-label">添付ファイル</label>
                
              </div>
            </div>
            電子メールを送信
          </form>
        </div>
      </div>
    </div>
  </div>

  知らせ：

  • モーダルボックスのIDは、ボタン（#ReplyModal）のData-BSターゲットと一致しています。
  • ID = "Reciontient-Email"の新しい入力フィールドが追加され、受信者のメールを表示します。ユーザーが自由に変更できないようにするために、読み取るように設定できます。

  3.3 JavaScriptダイナミックフィルロジック

  これは、問題を解決するための重要な部分です。 Modal Boxのshow.bs.modalイベントを聞いて、そこからデータを抽出するために、JavaScriptコードを作成する必要があります。

   
    // Modal Box Element var ReplyModal = document.getElementById（ 'ReplyModal'）を取得します;
  
    // show.bs.modalイベントのモーダルボックスのイベント（ブートストラップ5）
    ReplyModal.AddeventListener（ 'show.bs.modal'、function（event）{
      //モーダルボックスvarボタンをトリガーするボタンを取得します= event.lelatedTarget;
  
      //ボタンVAR RESICIANEMAIL = BUTTON.GETATTRIBUTE（ 'DATA-BS-hatever'）のdata-bs-hateverプロパティからメールアドレスを抽出します。
  
      //モーダルボックスで受信者の電子メール入力ボックスを取得しますvar Recipientinput = ReplyModal.QuerySelector（ '＃RECORITION-EMAIL'）;
      //モーダルボックスタイトルVar ModalTitle = ReplyModal.QuerySelector（'。Modal-Title '）を取得します。
  
      //入力ボックスレシピエントインプットの値を入力します。
      //モーダルボックスのタイトルを更新します。たとえば、modaltitle.textcontent = '返信：' RecipientEmail;
    }）;
  

  知らせ：

  • このJavaScriptコードは、HTMLドキュメントの下部に配置するか、DOMコンテンツがロードされた後に実行する必要があります（たとえば、DomContentLoadedイベントを使用して）。

  • これは、ネイティブJavaScriptを使用しています。 jQueryがプロジェクトに導入されている場合は、jQueryの構文を使用することもできます。

     $（document）.ready（function（）{
      $（ '＃ReplyModal'）。
        var button = $（event.relatedTarget）; //モーダルボックスをトリガーするボタンvar resisionemail = button.data（ 'bs-hatever'）; // data-bs-hantyver var modal = $（this）から値を取得します。
        Modal.find（ '＃reciontient-email'）。val（Recipientemail）;
        modal.find（ '。モーダルタイトル'）。
      }）;
    }）;

  3.4 PHPメーラーバックエンド処理

  バックエンドPHPメーラーコードは同じままで、$ _POST ['Email']から受信者アドレスを取得します。電子メールと呼ばれる入力ボックスに正しい電子メールアドレスを入力したので、バックエンドはそれを正しく受信できます。

    issmtp（）;
          $ mail-> smtpdebug = 0; // 0 = off（生産用）
          $ mail-> host = 'smtp.gmail.com';
          $ mail-> smtpauth = true;
          $ mail-> username = "your_email@gmail.com"; // gmailメールボックスに置き換えます$ mail-> password = "your_app_password"; // gmailアプリケーションに置き換えますパスワード$ mail-> smtpsecure = 'tls';
          $ mail-> port = 587;
  
          // sender $ mail-> setfrom（ "your_email@gmail.com"、 "your name"）; //送信者情報に置き換えます//電子メールアドレスをフィルターif（！filter_var（$ recipientemail、filter_validate_email））{
              新しい例外をスローします（ "無効な受信者のメールアドレス。"）;
          }
          $ mail-> addaddress（$ recipientemail）;
  
          // content $ mail-> ishtml（true）;
          $ mail-> subject = htmlspecialchars（$ _ post ['subject']）; //フィルタートピック$ mail-> body = htmlspecialchars（$ _ post ['message']）; //フィルターメッセージコンテンツ//添付ファイルの処理if（yisset（$ _ files ['file']）&& count（$ _ files ['file'] ['tmp_name']> 0）{
              for（$ i = 0; $ i <count _ files i if mail-> addattachment（$ _ files ['file'] ['tmp_name'] [$ i]、$ _files ['file'] ['name'] [$ i]）;
                  }
              }
          }
  
          $ mail-> send（）;
          Echo 'あなたのメールは正常に送信されました！ ';
      } catch（例外$ e）{
          echo "メール送信失敗！phpmailerエラー：{$ mail-> errorinfo}";
      }
  } それ以外 {
      //通常、フォームがpostを介して送信されない場合にトリガー// echo「連絡先ドキュメントに問題があります！」; //このメッセージは不正確である可能性があり、「フォームから送信してください」に変更できます。
  }
  ？></count>

  重要なヒント：

  • セキュリティ：常にユーザー入力（Filter_var、htmlspecialchars）を確認してクリーニングして、SQLインジェクションやXSS攻撃などのセキュリティの脆弱性を防ぎます。
  • Gmailアプリケーションパスワード： GmailをSMTPサーバーとして使用する場合、Gmailアカウントパスワードを直接使用してセキュリティを改善する代わりに、PHPMailerの「アプリパスワード」を生成する必要があります。
  • phpmailerパス：要求ステートメントのphpmailerファイルパスが正しいことを確認してください。依存関係管理に作曲家を使用することをお勧めします。

  4.予防策とベストプラクティス

  • モーダルボックスの場所：ループ内ではなく、ドキュメントのルートレベルでモーダルボックスのHTML構造を常に定義してください。これにより、パフォーマンスが向上するだけでなく、IDの競合や潜在的なJavaScriptの問題を回避します。
  • データ属性の使用：データ - *属性は、カスタムデータをHTML5に保存する良い方法です。これにより、フロントエンドJavaScriptはこのデータに簡単にアクセスして操作できます。
  • JavaScriptイベント委任：大きなテーブルの場合、イベント委任を使用して、各ボタンのバインディングイベントの代わりにボタンクリックイベントをリッスンすることを検討できます。これにより、パフォーマンスが向上する可能性があります。ただし、Bootstrap Modal Boxのshow.bs.modalイベントでは、モーダルボックス自体を直接聴くことが標準的な慣行です。
  • ユーザーエクスペリエンス：メッセージが成功または失敗した後にユーザーに視覚的なフィードバックを提供することを検討してください（たとえば、トースト通知の使用やモーダルボックスコンテンツの変更）。
  • エラー処理： PHPメーラーセクションでは、メール送信プロセス中に例外をキャッチし、ユーザーにフレンドリーなエラーメッセージを表示するためにトライキャッチブロックが追加されます。

  5。概要

  上記の手順を通じて、テーブルの行データを動的に渡すという問題を正常に解決しました。コアは、BootstrapのData-BS-Apsver属性を使用してフロントエンドのデータを渡し、Modal Boxのshow.bs.modalイベントを組み合わせて、フォームフィールドを動的に設定することです。この方法には、クリアコードがあり、メンテナンスが簡単なだけでなく、Webアプリケーションのインタラクティブ性とユーザーエクスペリエンスも向上します。実際のアプリケーションでは、データセキュリティとバックエンド検証に注意を払い、堅牢で信頼できるシステムを構築することが重要です。

以上が動的なデータ転送：テーブルロウデータをブートストラップモーダルボックスフォームに入力するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。