セレクトボックスでデータ更新を実現する仕組みと実装例
2024.11.29
前回のチェックボックスでデータ更新を実現する仕組みと実装例の応用で、select要素によるセレクトボックス変更時に、サーバーサイドで情報を更新するというインターフェイスを考えてみたいと思います。
画面のイメージは以下のような感じ。
記事タイトル | カテゴリ | 作成日 | ステータス |
---|---|---|---|
404エラーとの戦い方:迷子の旅路 | Web開発 | 2024-11-20 | |
珈琲とHTTPステータスコードの関係性 | 技術雑談 | 2024-11-25 | |
将棋AIの敗北:人間の直感は無敵なのか | 将棋 | 2024-11-26 | |
恐竜は本当に羽毛だった?化石の新発見 | 古生物 | 2024-11-27 | |
B'zの歌詞で学ぶJavaScript入門 | 技術雑談 | 2024-11-27 |
ステータスのセレクトボックスの値を変更したら、サーバー側でテーブルのステータス値を変更するイメージ。
今回もできるだけ汎用性のある形で実装してみようと思います。
HTML側 - data属性で情報を付与する
HTML側では、select要素に、data属性で情報を付与しておきます。
<table>
<tr>
<th>記事タイトル</th>
<th>カテゴリ</th>
<th>作成日</th>
<th>ステータス</th>
</tr><tr>
<td>404エラーとの戦い方:迷子の旅路</td>
<td>Web開発</td>
<td>2024-11-20</td>
<td>
<select name="status" class="trigger-postchangedata"
data-posturl="https://mydomain/script/update_status/1">
<option value="4" selected>公開中</option>
<option value="3">公開予約</option>
<option value="2">確認中</option>
<option value="1">編集中</option>
<option value="0">非公開</option>
</select>
</td>
</tr><tr>
<td>珈琲とHTTPステータスコードの関係性</td>
<td>技術雑談</td>
<td>2024-11-25</td>
<td>
<select name="status" class="trigger-postchangedata"
data-posturl="https://mydomain/script/update_status/2">
<option value="4" selected>公開中</option>
<option value="3">公開予約</option>
<option value="2">確認中</option>
<option value="1">編集中</option>
<option value="0">非公開</option>
</select>
</td>
</tr><tr>
<td>将棋AIの敗北:人間の直感は無敵なのか</td>
<td>将棋</td>
<td>2024-11-26</td>
<td>
<select name="status" class="trigger-postchangedata"
data-posturl="https://mydomain/script/update_status/3">
<option value="4">公開中</option>
<option value="3" selected>公開予約</option>
<option value="2">確認中</option>
<option value="1">編集中</option>
<option value="0">非公開</option>
</select>
</td>
</tr><tr>
<td>恐竜は本当に羽毛だった?化石の新発見</td>
<td>古生物</td>
<td>2024-11-27</td>
<td>
<select name="status" class="trigger-postchangedata"
data-posturl="https://mydomain/script/update_status/4">
<option value="4">公開中</option>
<option value="3">公開予約</option>
<option value="2" selected>確認中</option>
<option value="1">編集中</option>
<option value="0">非公開</option>
</select>
</td>
</tr><tr>
<td>B'zの歌詞で学ぶJavaScript入門</td>
<td>技術雑談</td>
<td>2024-11-27</td>
<td>
<select name="status" class="trigger-postchangedata"
data-posturl="https://mydomain/script/update_status/5">
<option value="4">公開中</option>
<option value="3">公開予約</option>
<option value="2">確認中</option>
<option value="1" selected>編集中</option>
<option value="0">非公開</option>
</select>
</td>
</tr>
</table>
data-posturlに、セレクトボックスの値が変更された時に送信するサーバー側プログラムへのURLを指定しておきます。
今回の例だと、update_status という処理に各記事のID番号を付与してURLとして指定しています。
また、各セレクトボックスには、共通のクラスを指定しておきます(今回の例では trigger-postchangedata というクラス名)。
JavaScript側 - チェックボックスの状態を見て値を付与
セレクトボックスの値が変更された時に起動するJavaScript側の処理は以下のような感じ(今回はjQueryを使います)。
// クラス「trigger-postchangedata」の値が変更されたら起動
$(".trigger-postchangedata").change(function(){
// data-posturlの値のURLに、フォームの値を付与してPOST
let post_url = $(this).data('posturl');
post_url += '/' + $(this).val();
$.ajax({
url: post_url,
type: 'POST',
dataType: 'html',
timeout: 5000,
})
.done(function(data) {
// 成功時の処理
console.log(data);
})
.fail(function(jqXHR, textStatus) {
// 失敗時の処理
console.log(textStatus);
alert('Error: postchangedata');
});
});
上記のスクリプトで、以下のURLに対してPOSTされることになります。
- https://mydomain/script/update_status/[article_id]/[status]
サーバーサイドでは、このURLで受け取った値を元に、データを更新すればOK。
また、今回はセレクトボックスを例に出しましたが、select要素以外のフォーム部品(input type="text" 等)でも、クラス名trigger-postchangedataを付与すれば、値が変更されると同様の動きが実現できます。
チェックボックスでデータ更新を実現する仕組みと実装例
2024.11.27
一覧画面のチェックボックスを用いて、データの状態を即時に更新する仕組みを実装する方法を解説します。HTMLの構造設計からJavaScriptの連携処理、サーバーサイドでの対応まで、説明しています。
datalistとJavaScriptで作るタグ入力フォームの実装ガイド
2024.11.17
ブログやアプリケーションで便利な「タグ入力フォーム」。この記事では、datalist要素を利用して、既存タグの選択と新規タグの追加を同時に実現するUIの作成方法をご紹介します。さらに、JavaScriptとCSSを活用して、複数選択対応やタグ削除機能、Enterキーでのタグ追加機能も実装。タグ入力フォームを効率的かつユーザーフレンドリーにカスタマイズする方法を詳しく解説します。
ページリロードボタンを作成するシンプルな方法
2023.05.25
リロード機能を持つボタンを追加したい時に便利な、location.reload() を利用した実装方法を解説します。初心者にもわかりやすいコード例付きです。
ラジオボタンの選択状態をjQueryで操作する基本テクニック
2023.04.13
、jQueryを使ってHTMLのラジオボタンの値を設定する方法を解説。